CSS skriftstørrelse: Pixels vs Em vs Rem vs Rem vs Procent vs Viewport Units

Der er blevet diskuteret meget om pixels vs em vs procent vs rem, og hvilken skrifttypegenskab der skal bruges og hvornår. På trods af alle de over 100 artikler online kan dette emne være meget forvirrende i betragtning af, hvordan brugen af disse skrifttypeegenskaber varierer afhængigt af behovene i vores projekter. Nogle foreslår f.eks., at man ikke skal bruge faste pixelværdier på basisniveau (html- og body-elementer), da brugeren ikke får mulighed for at nulstille skriftstørrelsen efter sine ønsker. Men for folk som mig, der er afhængige af bootstrap, er dette ikke tilrådeligt. Vi ender med at have en fast basisværdi i pixels og er nødt til at oprette hele vores projekts skrifttypeegenskaber i forhold til basispixelværdierne.

Denne artikel forklarer forskellen mellem disse skrifttypeegenskaber, og hvordan man bedst bruger dem. Der er naturligvis ingen rigtig måde at gøre dette på, og en stor del af hvilke skriftstørrelser der skal bruges og hvordan, vil i høj grad være deterministisk baseret på vores forståelse af disse skriftstørrelsesenheder og det pågældende projekt.

Pixels: Før indførelsen af responsivt design blev pixel i vid udstrækning brugt som DEN skriftstørrelse til alt fra typografi til bredde, padding og højde. Pixels er dog enheder med fast størrelse og ændrer sig ikke baseret på størrelsen af viewport eller er skalerbare. Hvis du ønsker at opbygge et responsivt websted ved hjælp af pixels, kan det blive meget svært at holde styr på alle de pixelbaserede værdier i hele CSS-stilarket, herunder værdierne i media queries. Så hvilken skrifttypeegenskab kan vi bruge, som giver os mulighed for at foretage minimale ændringer i vores CSS-stilark, men som stadig er skalerbar? Det er her, em, rem, procent og viewport-enheder kommer ind i billedet.

Em:Em er en fleksibel, skalerbar enhed, der konverteres af browseren til pixelværdier. Hvis standardskriftstørrelsen i chrome er 16 px, er 1 em = 16 pixels. En stor misforståelse om em er, at den er relativ til skriftstørrelsen på det overordnede element. I henhold til W3-specifikationen er em relativ til skriftstørrelsen på det element, som de anvendes på. Denne artikel her har gjort et fantastisk stykke arbejde med at forklare begrebet em på en klar og detaljeret måde. Hvis du virkelig ønsker at lære, hvordan em fungerer, må du ikke springe den ovennævnte artikel over. Ems bruges almindeligvis til typografi såsom overskrifter, tekster , afsnit og de elementer, der er forbundet med typografi såsom marginer, padding osv. Hvis du indstiller din base html- og body-elementers skriftstørrelse i pixels, og dine typografielementers egenskaber er defineret ved hjælp af ems, skal du for responsivt design blot ændre standardskriftstørrelsen på basisniveauet, f.eks. som

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

og alle em-værdier vil automatisk blive genberegnet til basisniveauet.

Ems har dog et stort forbehold, nemlig arvelighed!!! For eksempel, en <div> med en font-size på 16px, der indeholder et <p> med en font-size på 2em, oversættes til 32 px for <p>-elementet. Hvis du nu tilføjer en <div> inde i <p> med en skriftstørrelse på 0,5em også, vil resultatet af div’en være 16px, halvdelen af 32 px, ikke 8px. Det er her, at rems kommer ind i billedet.

Rem: Rem er relativ til skriftstørrelsen i rodelementet (html-elementet). Hvis html-elementets skriftstørrelse er 16 px, så er 1rem = 16 px. Rem vil ALTID være relativt i forhold til rodelementet, uanset hvor indlejrede elementerne er. Hvis man kun bruger rems og ingen ems, kan det dog give sin egen del af problemer, da typografien enten kan blive for stor eller for lille, hvilket kan føre til skaleringsproblemer. Denne artikel forklarer en god måde at løse dette problem på.

Percents: Procentværdi er altid relativ til en anden værdi, hvad enten det er elementets overordnede værdi eller fra en anden egenskab i selve elementet. Procentværdier anvendes i vid udstrækning i responsivt design. Et godt eksempel er Twitter’s Bootstrap-ramme. Bootstraps 12-kolonne-layout har sine bredder indstillet i procenter, så de er altid flydende og har en størrelse i forhold til deres overordnede element
Procenter bruges ofte til bredde og højde af containere, divs og til størrelsen af responsive billeder.

Viewport-enheder:

1vw = 1 % af visningsbredden
1vh = 1 % af visningshøjden

Visningsbredde- og højdeegenskaber er relative til bredden/højden af den aktuelle visningsstørrelse.

Visningsstørrelse betyder her browserens vinduesstørrelse. Hvis du ønsker at størrelsen af dit element skal være baseret på viewportbredden og ikke på det overordnede element/rodelement, er viewport-enheder den enhed for skriftstørrelse, du skal bruge. vw/vh-enheder fungerer godt med typografi og bruges almindeligvis til det samme.
Her er en god artikel, der forklarer, hvordan du bruger denne egenskab.

Endelige dom: Da jeg bruger bootstrap ofte, er min standardbasisstørrelse i pixels. Jeg bruger procent til at indstille bredden og højden af billeder, containere og divs, ems og rems til typografi og elementer relateret til typografi såsom margin, padding osv. Jeg leger i øjeblikket med viewport-enheder til responsiv typografi og finder det fantastisk. Eksperimenter meget med disse skrifttypegenskaber, og du vil snart falde ind i en stil, der er skræddersyet til dig.