CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units

Er is veel gediscussieerd over pixels vs em vs percent vs rem en welke font eigenschap te gebruiken en wanneer. Ondanks alle meer dan 100 artikelen online, kan dit onderwerp erg verwarrend zijn, gezien hoe het gebruik van deze lettertype-eigenschappen verschilt op basis van de behoeften van onze projecten. Sommige mensen stellen bijvoorbeeld voor om geen vaste pixelwaarden te gebruiken op het basisniveau (html en body elementen) omdat de gebruiker dan niet de kans krijgt om de font-grootte aan te passen aan zijn specificaties. Maar, voor mensen zoals ik die afhankelijk zijn van bootstrap, is dit niet aan te raden. We eindigen met een vaste basiswaarde in pixels en moeten de font-eigenschappen van ons hele project maken ten opzichte van de basis pixel waarden.

Dit artikel legt het verschil uit tussen deze font-eigenschappen en hoe je ze het beste kunt gebruiken. Natuurlijk, er is geen juiste manier om dit te doen en een groot deel van welke font sizing’s te gebruiken en hoe zal grotendeels deterministisch zijn op basis van ons begrip van deze font sizing-eenheden en het project in kwestie.

Pixels: Voor de komst van responsive design werd pixel op grote schaal gebruikt als DE font sizing voor alles van typografie tot breedte, padding en hoogte. Pixels zijn echter eenheden met een vaste grootte en veranderen niet op basis van de grootte van de viewport of zijn schaalbaar. Als je een responsive website wilt bouwen met pixels, kan het erg moeilijk worden om alle pixel-gebaseerde waarden in de CSS stylesheet bij te houden, inclusief de waarden binnen media queries. Dus, welke font eigenschap kunnen we gebruiken die ons in staat stelt minimale wijzigingen aan te brengen in onze CSS stylesheet en toch schaalbaar te zijn? Dat is waar em, rem, percent en viewport units in beeld komen.

Em:Em is een flexibele, schaalbare eenheid die door de browser wordt omgezet in pixel waarden. Als de standaard lettergrootte in chrome 16 px is, dan is 1 em = 16 pixels. Een grote misvatting over em is dat het relatief is ten opzichte van de lettergrootte van het parent element. Volgens de W3 spec, is em relatief aan de lettergrootte van het element waarop ze worden gebruikt. Dit artikel hier heeft het concept van em op een duidelijke en gedetailleerde manier uitgelegd. Als je echt wilt leren hoe em werkt, sla dan bovenstaand artikel niet over. Ems worden vaak gebruikt voor typografie, zoals koppen, teksten, paragrafen en de elementen geassocieerd met typografie, zoals marges, padding etc. Als u uw basis html en body elementen lettergrootte in pixels en uw typografie element eigenschappen worden gedefinieerd met behulp van ems, voor responsive design alles wat je hoeft te doen is het veranderen van de standaard font-grootte op het basisniveau, zoals

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

en alle em waarden zal automatisch opnieuw te berekenen naar het basisniveau.

Hoewel, ems hebben een groot voorbehoud, Erfenis!!! Bijvoorbeeld, een <div> met een font-size van 16px met daarin een <p> met een font-size van 2em vertaalt zich naar 32 px voor het <p> element. Voeg nu een <div> toe binnen de <p> met ook een font-size van 0.5em, het resultaat van de div zal 16px zijn, de helft van 32 px, niet 8px. Dit is waar rems in het plaatje komen.

Rem: Rem is relatief ten opzichte van de lettergrootte van het root element (html element). Als de font-size van het html element 16 px is, dan is 1rem = 16 px. Rem zal ALTIJD relatief zijn ten opzichte van het root element, ongeacht hoe genest de elementen zijn. Echter, het gebruik van alleen rems en geen ems kan zijn eigen deel van de problemen hebben, omdat de typografie ofwel te groot of te klein kan worden en dit kan leiden tot schalingsproblemen. Dit artikel legt een goede manier uit om dit probleem op te lossen.

Percents: Percentage waarde is altijd relatief ten opzichte van een andere waarde, of het nu de waarde van het element’s parent is of van een andere eigenschap van het element zelf. Percentages worden veel gebruikt in responsive design. Een goed voorbeeld hiervan is Twitter’s Bootstrap framework. Bootstrap’s 12-koloms layout heeft zijn breedtes ingesteld in percentages, zodat ze altijd vloeiend zijn en de grootte hebben ten opzichte van hun bovenliggende element
Procentages worden vaak gebruikt voor de breedte en hoogte van containers, divs en voor de grootte van responsive afbeeldingen.

Viewport eenheden: Viewport breedte en hoogte eigenschappen zijn relatief ten opzichte van de breedte/hoogte van de huidige viewport grootte.

1vw = 1% van viewport breedte
1vh = 1% van viewport hoogte

Viewport betekent hier de venstergrootte van de browser. Als je de grootte van je element wilt baseren op de viewport breedte en niet op het parent element/root element, dan is viewport units de font sizing unit die je moet gebruiken. vw/vh units werken geweldig met typografie en worden vaak voor hetzelfde gebruikt.
Hier staat een goed artikel dat uitlegt hoe je deze eigenschap gebruikt.

Eindoordeel: Omdat ik bootstrap vaak gebruik, is mijn standaard basisgrootte in pixels. Ik gebruik procenten om de breedte en hoogte van afbeeldingen, containers en divs in te stellen, ems en rems voor typografie en elementen gerelateerd aan typografie zoals margin, padding etc. Ik ben momenteel aan het spelen met viewport units voor responsive typografie en vind het geweldig. Experimenteer veel met deze font eigenschappen en je zult snel in een stijl vallen die op maat voor je gemaakt is.