Onko px hyvä tekstin koon mittayksikkö?

Tämä on testisivu, jolla kaikki* tekstikoot on määritelty px-mittaa käyttäen. Myös tämän laatikon leveys ja reunaviivan paksuus on määrätty px-mittana. Sen sijaan tekstin ympärillä oleva tyhjä tila (padding- ja margin-arvot) on määritelty em-mittoina.

Sivulla on myös kuva, jonka koko on luonnollisesti määritelty px-mittoina (html-koodissa, ei css:llä).

Tekstiä voi silti suurentaa ja pienentää selaimessa ja ilman että "sivu menee rikki". (Kokeile vaikka: työpöytäselaimessa ctrl-näppäin pohjassa hiiren rullalla ees taas. Takaisin alkuperäiseen kokoon pääsee ctrl-näppäimellä ja nollalla.) Px-mittojen käyttö tekstin koon määrittelyssä oli ongelma parikymmentä vuotta sitten, mutta ei enää vuonna 2017.

Tämän sivun taitto tai typografia ei muutu ei-toivotulla tavalla, vaikka sivun lukija muuttaisi tekstin kokoa.

On huomattava, että sivua voi suurentaa kahdella tavalla:

  1. Niin että kaikki suurenee yhtä paljon, ikään kuin koko sivua venytettäisiin tai katsottaisiin lähempää. Tuo sivun alussa oleva laatikkokin levenee, kuvakin kasvaa.
  2. Niin että vain teksti suurenee. Tällöin sanoja mahtuu vähemmän riville.

Firefoxissa voi valita helposti, kumpaa suurennustapaa käytetään. Kaikissa selaimissa tätä valintaa ei voi tehdä.

* Oikeasti en suosi leipätekstin koon peukaloimista

Leipäteksin kokoa ei mielestäni yleensä kannata muuttaa. Se on oletusarvoisesti yleensä juuri sen kokoista kuin ympäristöön ja käyttäjälle parhaiten sopii.

Jos leipätekstin kokoa ei muuteta, otsikoiden koko voidaan määritellä suhteessa leipätekstiin, esim kooksi 170% tai 1.7em (tarkoittavat määritelmän mukaisesti täsmälleen samaa).

P. S. Tällä sivulla otsikoiden ja tekstikappaleiden jälkeen tuleva tyhjä tila ei ole järkevässä suhteessa toisiinsa. Ne kannattaisi määrätä mittayksiköllä, joka ei riipu kyseisen elementin fonttikoosta.

Juhani Anttila
16.6.2017
http://iki.fi/juhani/px/