em rem waarden gebruiken in css voor betere typografie

Je bent misschien gewend geraakt aan het gebruik van flexibele meeteenheden, maar je begrijpt misschien nog steeds niet helemaal wanneer je rem en wanneer em moet gebruiken. Deze handleiding helpt je dat uit te zoeken!

Zowel em als rem zijn flexibele, schaalbare eenheden die door de browser worden vertaald naar pixelwaarden, afhankelijk van de lettergrootte-instellingen in je ontwerp. Als je een waarde van 1em of 1rem gebruikt, kan die in de browser worden vertaald als 16px tot 160px of een andere waarde.

Anderzijds worden px-waarden door de browser als zodanig gebruikt, dus 1px wordt altijd weergegeven als precies 1px.

Probeer de schuifregelaar hieronder in het voorbeeld om te zien hoe de waarde van rem en em eenheden kan vertalen naar verschillende pixelwaarden, terwijl expliciet ingestelde px eenheden een vaste grootte houden:

See the Pen Untitled by Envato Tuts+ (@tutsplus) on CodePen.

em- en rem-eenheden in CSS geeft ons flexibiliteit

Het gebruik van em- en rem-eenheden geeft ons flexibiliteit in onze ontwerpen, en de mogelijkheid om elementen op en neer te schalen, in plaats van vast te zitten aan vaste maten. We kunnen deze flexibiliteit gebruiken om onze ontwerpen tijdens de ontwikkeling gemakkelijker aan te passen, responsiever te maken, en browsergebruikers in staat te stellen de totale schaal van sites te bepalen voor maximale leesbaarheid.

Zowel em als rem eenheden bieden deze flexibiliteit en werken op vergelijkbare wijze, dus de grote vraag is, wanneer moeten we em waarden gebruiken en wanneer rem waarden?

Cruciaal verschil em- en rem-eenheden en webdesign

Het verschil tussen em- en rem-eenheden is hoe de browser de px-waarde bepaalt waarin ze worden vertaald. Inzicht in dit verschil is de sleutel om te bepalen wanneer elke eenheid moet worden gebruikt.

We beginnen met een overzicht van de werking van rem- en em-eenheden, zodat je elk detail kent. Dan gaan we verder met de vraag waarom je em of rem eenheden moet gebruiken.

Tenslotte bekijken we de praktische toepassing van precies die elementen van een typisch ontwerp waarvoor je elk type eenheid zou moeten gebruiken.

Hoe rem eenheden vertalen naar pixelwaarden

Wanneer je rem-eenheden gebruikt, hangt de pixelgrootte waarnaar ze vertalen af van de lettergrootte van het basiselement van de pagina, d.w.z. het html-element. Die lettergrootte wordt vermenigvuldigd met het getal dat je gebruikt met je rem eenheid.

Bijvoorbeeld, met een lettergrootte van 16px van het basiselement, komt 10rem overeen met 160px, dus 10 x 16 = 160.

Hoe em-eenheden vertalen naar pixelwaarden voor website

Bij gebruik van em eenheden is de uiteindelijke pixelwaarde een vermenigvuldiging van de lettergrootte van het element dat gestyled wordt.

Bijvoorbeeld, als een div een lettergrootte van 18px heeft, komt 10em overeen met 180px, dus 10 x 18 = 180.

misvatting em-eenheden

Het is een wijdverbreide misvatting dat em-eenheden relatief zijn aan de lettergrootte van het bovenliggende element. In feite zijn ze volgens de W3 spec relatief aan de lettergrootte “van het element waarop ze worden gebruikt”.

De lettergrootte van het bovenliggende element kan de em-waarden beïnvloeden, maar als dat gebeurt, is dat uitsluitend vanwege overerving. Laten we eens kijken waarom, en zien hoe dit in zijn werk gaat.

Het effect van overerving em-eenheden voor WordPress website

Werken met em-eenheden kan lastig worden als het gaat om overerving, want elk element erft automatisch de lettergrootte van zijn ouder. Het effect van overerving kan alleen worden opgeheven door expliciet een lettergrootte in te stellen met een eenheid die niet onderhevig is aan overerving, zoals px of vw.

De lettergrootte van het element waarop em-eenheden worden gebruikt bepaalt hun grootte. Maar dat element kan een lettergrootte hebben geërfd van zijn ouder, die een lettergrootte heeft geërfd van zijn ouder, enzovoort. Zo kan elke em-waarde worden beïnvloed door de lettergrootte van elk van zijn ouders.

Laten we een voorbeeld bekijken. Probeer dit gerust zelf uit in CodePen terwijl we het doorlopen. Gebruik Chrome Developer Tools of Firebug voor Firefox om de pixelwaarden te inspecteren waarin onze em-eenheden worden berekend.

Voorbeeld van em overerving

Als we een pagina hebben met een hoofdlettergrootte van 16px (meestal de standaard) en een kind-div met een padding van 1,5em, erft die div de lettergrootte van 16px van het hoofdelement. De vulling zal dus 24px zijn, d.w.z. 1.5 x 16 = 24.

See the Pen Untitled by Envato Tuts+ (@tutsplus) on CodePen.

Wat als we dan een andere div om de eerste wikkelen en de lettergrootte ervan instellen op 1,25em?

See the Pen Untitled by Envato Tuts+ (@tutsplus) on CodePen.

Onze wrapper div erft de hoofdlettergrootte van 16px en vermenigvuldigt die met zijn eigen font-size instelling van 1.25em. Hierdoor krijgt de div een lettergrootte van 20px, dus 1.25 x 16 = 20.

Em vs. Rem – Wanneer gebruik je welke eenheid voor je webdesign?

Er is geen standaardaanpak voor het gebruik van em en rem. Het gebruik van beide eenheden hangt af van je doelstellingen.
Als je alleen maar wilt dat de elementen van de kinderen meeschalen als hun bovenliggende elementen van grootte veranderen, gebruik dan em.

Gebruik rem als je een vast referentiepunt wilt voor de schaal van de kinderelementen en het gedrag voorspelbaar wilt houden.

Em en rem zijn verschillende eenheden, maar wat beide gemeen hebben is dat ze je helpen responsiviteit toe te voegen voor verschillende resoluties in je ontwerp.

Je zou kunnen proberen te experimenteren met beide eenheden en dan beslissen welke het beste werkt voor jou. Uiteindelijk komt het neer op persoonlijke voorkeuren.

Dat was het, mensen. Ik hoop dat dit nieuwe inzicht in em en rem je zal helpen ze beter te gebruiken en je te ondersteunen bij het bouwen van responsieve ontwerpen.

Als je vragen, opmerkingen of suggesties hebt, neem dan gerust contact met me op.

Meer over em, rem en responsieve typografie en webdesign

Meer over em, rem en responsieve typografie