Artikkelin Saavutettavaa typografiaa – Osa 2 kommentit

Kirjoittaja: Niko

Niko — Thu, 20 Apr 2006 06:52:03 +0000

Kuten sanoit jo itse kirjoituksessa, 16 pikseliä on yleisin oletusasetus, jolloin 1em vastaa 16 pikseliä elementin sisällä.

Viilaan kuitenkin vielä semanttista pilkkua (tai emmää) sanomalla, että mielestäni on virheellistä sanoa 1em olevan 16 pikseliä, koska käytännössä 1em on 100% koko suhteessa ympäröivän html-elementin fonttikokoon.

Jos selaimen oletus on 16 px, bodyn CSS:ssä koko on määritelty 12 pikseliksi, sen sisällä on h1-elementti jonka fonttikooksi on määritelty 180% ja sen sisällä span jonka fonttikooksi on määritelty 1em, tällöin 1em vastaa noin 22 pikseliä.

CSS:n periytyminen siis vaikuttaa siihen, mitä pikselikokoa 1em missäkin dokumentin osassa vastaa, jolloin 1em=16px on melko roima yleistys. :)

Kirjoittaja: timo.laak

timo.laak — Mon, 17 Apr 2006 10:30:18 +0000

1 em on kyllä 16 pikseliä yleisimmissä selaimissa, mikäli fonttikokoa ei ole muutettu. Harrille kiitos tarkennuksesta. Tässä em ja ex eroavat toisistaan.

Kirjoittaja: Harri Paavola

Harri Paavola — Mon, 17 Apr 2006 09:45:36 +0000

Jos fontin kooksi on asetettu 12 pikseliä, on yksi em silloin 12�?12 pikseliä. Em ei suinkaan ole yhtä korkea kuin esimerkiksi kirjain H tai M ei mikään muukaan aakkonen, vaan se on kaikissa fonteissa korkeakampi.

Tämä johtuu siitä, että H tai M tai mikään muukaan aakkonen ei ylety typografisessa viivastossa yläviivalta alaviivalle, ja vielä lisäksi näiden viivojen molemmille puolille jätetään vähän tyhjää tilaa.

Em on siis käytetyn fontin neliön koko.

Havainnollistuksia asiasta: http://24ways.org/advent/an-explanation-of-ems

Kirjoittaja: Niko

Niko — Mon, 17 Apr 2006 07:03:08 +0000

CSS em-yksikkö taitaa käytännössä toimia täysin samoin kuin %-yksikkö, eikä näin ollen 1em vastaa 16 pikseliä, vaan suoraan käyttäjän selaimessa asettamaa fonttikokoa. Ja aivan kuten prosentteina määriteltyjen kokojen kanssa, em-määritelty fonttikoko muuttuu CSS-perinnän mukaan: jos oletuskoko on 16px, font-size: 80% blokin sisällä 1em vastaa noin 13px fonttia.