Voiko nettisivulla olevan tekstin kokoa muuttaa, jos se on määritelty px-mittana?

Lyhyt vastaus: voi. (Kokeile vaikka – tämän sivun lopussa on rinnakkain sekä px- että em-mitoilla muotoiltua tekstiä.)

Pitempi vastaus:

Aina on olemassa keino nähdä nettisivun teksti suurempana. Tietokoneella selaimissa voi suurentaa koko nettisivua (tai Firefoxissa vaihtoehtoisesti myös pelkkää tekstiä) pyörittämällä hiiren rullaa ctrl- tai cmd-näppäin alaspainettuna, tai näppäinyhdistelmällä ctrl ja + (macOS:ssa cmd ja +). Tekstin koko muuttuu silloin samalla tavalla riippumatta siitä, onko se määritelty px- vai em-yksikköä käyttäen. Takaisin alkuperäiseen kokoon pääsee näppäinkomennolla ctrl ja nolla tai cmd ja nolla.

Sen sijaan jos tekstin kokoa muuttaa tietokoneella Chromen tai Firefoxin asetuksista, se vaikuttaa tekstiin jonka koko on määritelty em-yksiköllä tai jätetty määrittelemättä kokonaan, mutta se ei vaikuta tekstiin jonka koko on määritelty px-yksiköllä. (Muissa testatuissa Windows- ja macOS-selaimissa ei voi muuttaa tekstin kokoa selaimen asetuksista.)

Puhelimessa voi aina suurentaa nettisivun tekstiä "venyttämällä" sitä kahdella sormella. Jos tekstin kokoa muuttaa puhelimen tai puhelimen selaimen asetuksista, tekstin koko muuttuu yhtä hyvin tai huonosti riippumatta siitä, onko se määritelty em- vai px-yksiköllä. (Sekä Android-Chromessa että -Firefoxissa muuttuu silloin teksti, jonka koko on jätetty määrittelemättä. Yllättäen yhdessä sekä px- että em-teksti muuttuvat myös, mutta toisessa ne eivät muutu.)

Kannattaako fonttikoon määrittelyssä käyttää px- vai em-mittoja?

Mieluiten ei kumpaakaan! Parasta olisi jättää leipätekstin koko määrittelemättä kokonaan. Silloin se näkyy todennäköisimmin mahdollisimman monella sen kokoisena, että sitä on mukava lukea.

Sen sijaan otsikoiden kokoon on usein aiheellista puuttua. Otsikoiden fonttikoot saa pysymään tietyssä suhteessa leipätekstin kokoon, kun ne määritellään käyttäen em-yksikköä tai prosenttikokoa – jotka ovat muuten täsmälleen sama asia. Arvo 1.5em on määritelmän mukaan sama kuin 150%.

Entä marginaalit ja padding?

Tekstin vasemmalle ja oikealle puolelle on usein pakko määrätä joku määrä tyhjää tilaa. Suosittelen käyttämään siinä em-yksikköä, jotta tyhjän tilan määrä pysyy suhteellisesti samana riippumatta siitä, minkä kokoisena tekstiä katsellaan. Tekstikappaleiden välinen tyhjä tila on oletusavoisesti 1em. Jos se ei kelpaa, suosittelen määräämään tilalle jonkin toisen em-mitan.

Otsikoiden ylä- ja alapuolella oleva tyhjä tila on vaikeampi kysymys. Jos otsikon ylä- ja alamarginaalit määritellään em-yksiköllä, ne eivät ole missään järkevässä suhteessa tekstikappaleiden välissä olevaan tyhjään tilaan. Otsikoiden em-marginaalit kun lasketaan kyseisten otsikoiden omasta fonttikoosta, ei leipätekstin fonttikoosta. (Jos otsikon koko on 2em eli leipätekstiin nähden 200%, sen 1em:n alamarginaali on kaksinkertainen p-elementin marginaaliin, joka sekin on silti sama 1em. Hämärää, vai mitä.)

Onneksi on olemassa myös yksikkö rem. Jos otsikon marginaalit määrittelee rem-yksiköllä, voi valita mittoja jotka ovat samasta maailmasta kuin leipätekstin marginaalit. Isonkin otsikon 1rem:n marginaali on saman kokoinen kuin tavallisen kokoisen tekstikappaleen 1rem:n marginaali (eli 1em, jos leipätekstin koko on jätetty määrittelemättä, tai sen kooksi on jostain syystä asetettu erikseen tuo kyseinen 1em).

Ovatko MDN, W3Schools ja muut siis väärässä?

Tällaisia varoituksia annetaan monissa nettisivu-oppaissa: "Tekstin koon asettaminen px-mittayksikköä käyttäen luo käytettävyys­esteen, sillä silloin sivun lukija ei voi muuttaa tekstin kokoa" (mm. MDN 2018-02-13 & W3Schools 2018-04-27). Väite pitää paikkansa vain tietyissä tilanteissa, kuten alussa on kuvattu.

Varoituksissa on historiallista painolastia, sillä tilanne oli paljon pahempi vuosituhannen vaihteessa – silloin ei välttämättä ollut mitään keinoa muuttaa nettisivulla olevan tekstin kokoa, jos se oli määritelty px-yksikköä käyttäen. Onneksi enää ei ole niin.

Testejä

Alla olevien tekstien taustaviivoituksessa on viiva joka 16. pikselin välein, eli viivoitetut rivit ovat 16 pikselin korkuisia.

Tässä on tekstiä, jonka fonttikooksi on asetettu 16px. Vaihtelun vuoksi tässä on käytetty kahta fonttia. Riviväli on 1. Mitä jos tekstiä on tosi paljon? Mitä jos tekstiä on tosi paljon? Mitä jos tekstiä on tosi paljon? Mitä jos tekstiä on tosi paljon? Mitä jos tekstiä on tosi paljon? Mitä jos tekstiä on tosi paljon? Mitä jos tekstiä on tosi paljon? Mitä jos tekstiä on tosi paljon? Mitä jos tekstiä on tosi paljon? Mitä jos tekstiä on tosi paljon? Näköjään jokainen rivi vie tasan 16 pikseliä, kiva!

Tässä on tekstiä, jonka fonttikooksi on asetettu 1em. Vaihtelun vuoksi tässä on käytetty kahta fonttia. Riviväli on 1. Vain tämän tekstin koko muuttuu, kun tietokoneen selaimen asetuksiin säädetään alkuperäistä isompi fonttikoko lukemisen helpottamiseksi.

P. S. Koska em-mitta on sama kuin prosenttimitta, käy näin:

Tämän tekstin koko on 1em.
Tämän tekstin koko on 0.8em.
Tämän tekstin koko on 0.8em.
Tämän tekstin koko on 0.8em.
Tämän tekstin koko on 0.8em.

Oikein toimivissa (CSS-muotoiluja ylipäätään noudattavissa) selaimissa teksti pienenee aina jokaisessa sisemmässä laatikossa.

Tämä ei tarkoita, etteikö tekstin kokoa kannattaisi koskaan määritellä em-mittana. Pitää vain ottaa huomioon, että kun elementtejä on sisäkkäin, em-mittojen eli prosenttimittojen lopullinen koko lasketaan aina uudestaan sen mukaan minkä kokoista tekstiä ympäröivässä elementissä on.

Testatut selaimet

Tällä sivulla esitetyt väitteet perustuvat testeihin seuraavilla selaimilla joulukuussa 2018.

Käyttöjärjestelmä Selain
Tietokoneet Windows 10 Chrome
Firefox
Internet Explorer
Edge
macOS Safari
Chrome
Firefox
Puhelimet Android (Samsung) Chrome
Firefox
Samsung Internet
Opera
Muut iOS (iPod Touch) Safari
iOS (iPad) Safari

Puhelintestejä on tarkoitus tehdä lisää.