Als je begint met het stijlen van je website, kom je verschillende eenheden tegen om groottes aan te passen. Hiermee kan je lettertypes, padding en marges aanpassen.
Hieronder leggen we uit wat deze eenheden betekenen en wanneer je ze het beste kan gebruiken.
1. PX #
PX staat voor pixel. Een pixel is één enkele gekleurde punt op een beeldscherm of in een digitale afbeelding. Als je bijvoorbeeld ver inzoomt, wordt het beeld erg blokkerig. Op het punt dat je niet verder kan inzoomen, is één zo’n blokje één pixel.
Pixels zijn een absolute eenheid. Dit betekent dat de grootte vaststaat. De grootte verandert dus niet als je het venster aanpast of de website op een ander beeldscherm bekijkt.
Veel websites hebben een responsief ontwerp. Dit betekent dat het ontwerp zich aanpast aan verschillende schermformaten. Gebruik pixels alleen als je zeker weet dat dit het responsieve ontwerp niet verstoort.
2. PT #
Pt staat voor point. Dit is eigenlijk een overblijfsel uit de tijd van de boekdrukkunst.
Points of punten zijn gebaseerd op inches. Eén inch bevat 72 points, echter varieert dit per browser.
Ons advies is om deze eenheid niet te gebruiken.
3. % (percentage) #
Een percentage is een relatieve eenheid. Dit betekent dat het zich aanpast aan de container waarin het zich bevindt. Het is relatief ten opzichte van die container. Een subblok kan bijvoorbeeld 50% kleiner zijn dan het containerblok.
Het percentage wordt vaak gebruikt voor het aanpassen van (met uitzonder van lettertypes):
- Padding
- Marges
- Afstanden
- Hoogtes
- Breedtes
4. EM #
EM is geen afkorting en de oorsprong ervan is omstreden. Sommigen zeggen dat het afkomstig is van de breedte van de letter ‘M’ en zijn oorsprong heeft in de boekdrukkunst.
EM is een relatieve eenheid voor het instellen van lettergroottes. Het past zich aan op basis van de standaardgrootte van het lettertype. Als de standaardgrootte van een lettertype 16px is, dan is 1,5 EM gelijk aan 24px.
5. REM #
REM staat voor Root EM.
Net als EM is REM een relatieve eenheid voor het instellen van lettergroottes. Het verschil is dat het zich aanpast op basis van de lettergrootte van het root-element, in plaats van de standaardgrootte van het lettertype.
Als de lettergrootte niet in het root-element is ingesteld, gebruikt de browser de standaardwaarde van 16px.
6. VW #
VW staat voor viewport width, oftewel de breedte van het beeldscherm of venster.
Het gedraagt zich zoals percentages. 10 VW betekent 10% van de breedte van het zichtbare beeldscherm of venster.
VW is een relatieve eenheid en wordt voornamelijk gebruikt voor (met uitzonder van lettertypes):
- Padding
- Marges
- Afstanden
- Hoogtes
- Breedtes
7. VH #
VH staat voor viewport height, oftewel de hoogte van het beeldscherm of venster.
Net als VW gedraagt het zich zoals percentages. 10 VH betekent 10% van de hoogte van het zichtbare beeldscherm of venster.
VH is ook een relatieve eenheid en wordt voornamelijk gebruikt voor (met uitzonder van lettertypes):
- Padding
- Marges
- Afstanden
- Hoogtes
- Breedtes