CSS Font Sizing: Pikselit vs Em vs Rem vs Prosentti vs Viewport Units

Pikselit vs Em vs Prosentti vs Rem ja siitä, mitä fonttiominaisuutta kannattaa käyttää ja milloin, on keskusteltu paljon. Huolimatta kaikista yli 100 artikkelista verkossa, tämä aihe voi olla hyvin hämmentävä, kun otetaan huomioon, miten näiden fonttiominaisuuksien käyttö vaihtelee projektiemme tarpeiden mukaan. Jotkut esimerkiksi suosittelevat, ettei kiinteitä pikseliarvoja käytettäisi perustasolla (html- ja body-elementit), koska käyttäjällä ei ole mahdollisuutta muuttaa fonttikokoa omien vaatimustensa mukaiseksi. Mutta minun kaltaisilleni ihmisille, jotka ovat riippuvaisia bootstrapista, tämä ei ole suositeltavaa. Päädymme siihen, että meillä on kiinteä perusarvo pikseleinä ja meidän on luotava koko projektimme fonttiominaisuudet suhteessa peruspikseliarvoihin.

Tässä artikkelissa selitetään näiden fonttiominaisuuksien välinen ero ja miten niitä kannattaa käyttää. Tietenkään ei ole olemassa mitään oikeaa tapaa tehdä tämä, ja suuri osa siitä, mitä fonttikokoja käytetään ja miten, on pitkälti determinististä, joka perustuu ymmärrykseemme näistä fonttikokoyksiköistä ja kyseisestä projektista.

Pikselit: Ennen responsiivisen suunnittelun tuloa pikseliä käytettiin laajalti THE fontin mitoitusyksikkönä kaikessa typografiasta leveyteen, pehmusteisiin ja korkeuteen. Pikselit ovat kuitenkin kiinteäkokoisia yksiköitä, eivätkä ne muutu näkymäikkunan koon perusteella tai ole skaalautuvia. Jos haluat rakentaa responsiivisen verkkosivuston, jossa käytetään pikseleitä, voi olla hyvin vaikeaa pitää kirjaa kaikista pikselipohjaisista arvoista koko CSS-tyylitiedostossa, mukaan lukien arvot mediakyselyissä. Mitä fonttiominaisuutta voimme siis käyttää, jonka avulla voimme tehdä mahdollisimman vähän muutoksia CSS-tyylitaulukkoon, mutta joka on silti skaalautuva? Tässä kohtaa kuvaan tulevat em-, rem-, prosentti- ja viewport-yksiköt.

Em:Em on joustava, skaalautuva yksikkö, jonka selain muuntaa pikseliarvoiksi. Jos Chromessa fontin oletuskoko on 16 px, 1 em = 16 pikseliä. Yksi suuri väärinkäsitys em:stä on, että se on suhteellinen vanhemman elementin fonttikokoon nähden. W3-määrittelyn mukaan em on suhteellinen sen elementin fonttikokoon nähden, jossa sitä käytetään. Tässä artikkelissa on tehty erinomaista työtä em:n käsitteen selittämisessä selkeällä ja yksityiskohtaisella tavalla. Jos todella haluat oppia, miten em toimii, älä ohita edellä mainittua artikkelia. Em-kirjaimia käytetään yleisesti typografiassa, kuten otsikoissa, teksteissä , kappaleissa ja typografiaan liittyvissä elementeissä, kuten marginaaleissa, pehmusteissa jne. Jos asetat html- ja runkoelementtien fontin koon pikseleinä ja typografiaelementtisi ominaisuudet määritellään ems:n avulla, responsiivista suunnittelua varten sinun tarvitsee vain muuttaa oletusarvoista fonttikokoa perustasolla, kuten

@media (max-width: 400px) {
html, body { font-size: 15px; }
}

, ja kaikki em-arvot lasketaan automaattisesti uudelleen perustasolle.

Em:llä on kuitenkin merkittävä varoitus, periytyvyys!!! Esimerkiksi <div>, jonka fonttikoko on 16px ja joka sisältää <p>, jonka fonttikoko on 2em, tarkoittaa <p>-elementille 32 px. Lisää nyt <div> <p>:n sisälle <p>, jonka fonttikoko on myös 0.5em, niin divin tulos on 16px, puolet 32 px:stä, ei 8px. Tässä kohtaa rem tulee kuvaan mukaan.

Rem: Rem on suhteellinen juurielementin (html-elementin) fonttikokoon nähden. Jos html-elementin fonttikoko on 16 px, niin 1rem = 16 px. Rem on AINA suhteellinen juurielementtiin riippumatta siitä, kuinka sisäkkäisiä elementit ovat. Pelkkien rem-elementtien käyttäminen ilman em-elementtejä voi kuitenkin aiheuttaa omat ongelmansa, sillä typografiasta voi tulla joko liian suurta tai liian pientä, mikä voi johtaa skaalautumisongelmiin. Tässä artikkelissa kerrotaan hyvä tapa ratkaista tämä ongelma.

Percents: Prosenttiarvo on aina suhteellinen johonkin toiseen arvoon, oli se sitten elementin vanhemman arvo tai itse elementin jokin muu ominaisuus. Prosenttiarvoja käytetään laajasti responsiivisessa suunnittelussa. Hyvä esimerkki on Twitterin Bootstrap-kehys. Bootstrapin 12-sarakkeisessa asettelussa sen leveydet on asetettu prosentteina, joten ne ovat aina juoksevia ja mitoitettu suhteessa vanhemman elementtiin
Prosentteja käytetään yleisesti konttien ja divien leveyteen ja korkeuteen sekä responsiivisten kuvien mitoitukseen.

Viewport-yksiköt: Katseluikkunan leveys- ja korkeusominaisuudet ovat suhteessa nykyisen katseluikkunakoon leveyteen/korkeuteen.

1vw = 1 % katseluikkunan leveydestä
1vh = 1 % katseluikkunan korkeudesta

Katseluikkuna tarkoittaa tässä selaimen ikkunakokoa. Jos haluat mitoittaa elementtisi näkymäikkunan leveyden eikä vanhemman elementin/juurielementin perusteella, viewport-yksiköt on fontin mitoitusyksikkö, jota sinun on käytettävä. vw/vh-yksiköt toimivat hyvin typografiassa ja niitä käytetään yleisesti samaan.
Tässä on hyvä artikkeli, jossa kerrotaan, miten tätä ominaisuutta käytetään.

Lopputuomio: Koska käytän bootstrapia usein, oletusarvoinen peruskokoni on pikseleissä. Käytän prosenteja asettaakseni kuvien, konttien ja divien leveyden ja korkeuden, typografian ems- ja rem-elementtien sekä typografiaan liittyvien elementtien, kuten marginaalin, pehmusteen jne. Leikin tällä hetkellä viewport-yksiköillä responsiivista typografiaa varten ja pidän sitä mahtavana. Kokeile paljon näillä fonttiominaisuuksilla ja pian päädyt juuri sinulle räätälöityyn tyyliin.