Responsive Font-size met ‘%’ ‘px’, ‘em’ of ‘rem’

Stel dat je een website bezoekt op je desktop. Het normale lettertype grootte op een desktop is 16 pixels, maar veel webdesigners schalen dat naar beneden omdat de website op meerdere types schermen bekeken moet worden. Het gevolg is dat je met je ogen veel te dicht op je scherm gaat zitten om de tekst nog te lezen. Dezelfde situatie maar dan andersom doet zich voor als je de website op een mobiel bekijkt. Omdat de letters nu supergroot zijn moet je je mobiel bijna een meter van je gezicht afhouden om comfortabel te kunnen lezen. Op dit moment denk je misschien, zou het niet veel mooier zijn als de grootte van het lettertype zich aanpast aan de grootte van het scherm dat je op dat moment gebruikt. Nou, dat kan.

Sinds versie 3 van css is het mogelijk om zogenaamde media-queries te gebruiken op je website. Je kunt dan per type scherm instellen wat de website moet laten zien. Hieronder een voorbeeld van hoe je stylesheet eruit zou kunnen zien als je een desktop, een tablet en een mobiel wilt ondersteunen, dat mobile-first doet, en je pixels gebruikt om je lettergrootte in te stellen.

h1 { font-size: 16px;}

h2 { font-size: 12px;}

p { font-size: 10px;}

 

@media all and (min-width: 980px) {

h1 { font-size: 20px;}

h2 { font-size: 14px;}

p { font-size: 12px;}

}

 

@media all and (min-width: 1260px) {

h1 { font-size: 24px;}

h2 { font-size: 18px;}

p { font-size: 16px;}

}

Probleem opgelost? Niet dus. Want versies 8 van Internet Explorer en lager ondersteunen geen pixels als eenheid om lettergroottes mee in te stellen. En anno 2014 zijn er nog steeds legio bedrijven die een verouderde versie van internet explorer gebruiken. En wie neemt hen dat kwalijk, met hun eigenwijze systeembeheerders die niets zien in vernieuwing (lees: extra werk).

Nu komt de eenheid ‘em’ in beeld. Em wordt gebruikt als relatieve eenheid, zodat Internet Explorer je webpagina netjes kan schalen. Wanneer je de standaard lettergrootte van het document op 16px laat staan, zal een h1 element met een lettergrootte van ‘1.5em’ anderhalf keer zo groot zijn als 16 pixels, 22 pixels dus. Alleen het vervelende em is dat het als basis lettergrootte niet de standaard lettergrootte van het document neemt, maar de lettergrootte van het omvattende element. Heb je dus een standaard lettergrootte van 16 pixels, een div element met een lettergrootte van 0.8em, en daarin een p element met een lettergrootte van nog eens 0.8 em, dan wordt je lettergrootte in pixels 16 * 0.8 * 0.8 = 10,24 pixels, en dat slaat natuurlijk nergens op. Laat staan dat het makkelijk is om mee te rekenen. Eigenlijk schiet je met ‘em’ dus niets meer op dan wanneer je procenten gebruikt om je lettertypes te schalen, wat net zo min is aan te raden.

En daarom is er in versie 3 van css nog iets nieuws uitgevonden. De eenheid ‘rem’, wat staat voor root-em. Met rem hoef je niet steeds rekening te houden met de lettergrootte van het omvattende element, maar hoef je maar één keer de lettergrootte van het document in te stellen waarna je dat rem overal x aantal keer kunt vergroten of verkleinen.

Als je bovendien de lettergrootte van het document op 62.5% instelt kun je heel gemakkelijk zien op welk aantal pixels de lettergrootte uitkomt,  want want 16px * 0,625 = 10 pixels. 2.4rem is dan gewoon 24 pixels als je het omrekent. Wanneer je je website vervolgens responsive maakt wordt alles nog makkelijker omdat je alleen de lettergrootte van je document hoeft aan te passen, de rest wordt automatisch mee geschaald. Hieronder laat ik zien hoe je stylesheet er dan uitziet. Speciaal voor browsers die rem niet ondersteunen heb ik nog wel het aantal pixels ingesteld. Daarna stel ik steeds het aantal rem in zodat nieuwe en moderne browsers een relatieve lettergrootte gebruiken.

 

html { font-size: 62.5%)

h1 { font-size: 16px; font-size: 1.6rem;}

h2 { font-size: 12px; font-size: 1.2rem;}

p { font-size: 10px; font-size: 1.0rem;}

 

@media all and (min-width: 980px) {

html { font-size: 80%; }

}

@media all and (min-width: 1260px) {

html {font-size: {font-size: 100%;}

}

Hieronder staat bij bron 3 een link naar een webpagina waarbij ik het lettertype op deze manier responsive heb gemaakt. Als je de pagina op een desktop opent kun je het venster verkleinen en vergroten om eens te kijken welk effect dat heeft op de grootte van het lettertype.

Bronnen

1. http://www.w3schools.com/css/css_font.asp
2. http://snook.ca/archives/html_and_css/font-size-with-rem
3. http://www.daniel-dewit.nl/wp-content/Responsive%20design/index.html

Een gedachte over “Responsive Font-size met ‘%’ ‘px’, ‘em’ of ‘rem’”

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *