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

Lyhyt vastaus: kyllä voi

Voit todeta sen tässä saman tien itsekin.

Tietokoneella 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.

Puhelimessa ja tabletissa voi suurentaa nettisivun tekstiä "venyttämällä" sitä kahdella sormella.

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.

Ylläolevien tekstien taustaviivoituksessa on viiva joka 16. pikselin välein, eli viivoitetut rivit ovat 16 pikselin korkuisia. Vain niiden tekstikoko on määritelty. Tämän sivun muu leipäteksti on jätetty kokonsa puolesta määrittelemättä.

Pitempi vastaus: riippuu siitä, miten tekstiä haluaa suurentaa

Jos tekstin kokoa muuttaa tietokoneella Chromen, Firefoxin tai Internet Explorerin 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ä. Edgessä ja Safarissa ei voi muuttaa tekstin kokoa selaimen asetuksista.

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ä.

Taulukon tiedot on koottu syksyllä 2019. Kerro toki, jos olet havainnut muuta!

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%.

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 edellä 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.

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ä, niillä ei välttämättä ole järkevää yhteyttä 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).

Elementille määrätty em-mitta on aina prosenttimitta

Koska em-mitta on tekstikokona käytettynä sama kuin prosenttimitta, käy näin:

Oikein toimivissa (CSS-muotoiluja ylipäätään noudattavissa) selaimissa teksti pienenee aina jokaisessa sisemmässä laatikossa - vaikka kaikissa on sama fonttikoko 0.8em!

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.