Eenheden

px

De pixel was ooit letterlijk één beeldpunt. Dat is hij al lang niet meer: een CSS-pixel is een logische pixel, gedefinieerd als een kijkhoek van 0,0213 graden. Op 71 cm afstand, de gemiddelde armlengte, komt dat neer op ongeveer 0,26 mm.

Dat klinkt omslachtig, en dat is het ook.
Het gevolg is dat een px op een telefoon met een scherm van 400 echte beeldpunten per centimeter even groot oogt als op je laptop.

px schaalt niet mee

Een px is een absolute eenheid. Zet een bezoeker zijn lettergrootte groter, omdat hij slechter ziet, dan verandert er aan jouw px niets. Je tekst blijft even klein en je gebruiker is gesjareld.

Daarom gebruik je px vrijwel nooit voor afmetingen van tekst of layout. Voor een border van 1px of een kleine schaduw kan het (nog net).

em

Een relatieve eenheid: 1em is de font-size van het element zelf.

h1, h2, h3, h4 {
    margin-top: 2em;
    margin-bottom: 0.5em;
}

Een h1 van 32px krijgt daarmee 64px boven en 16px onder. Een h4 van 16px krijgt 32px en 8px. De witruimte schaalt dus mee met de kop, zonder dat je per niveau iets apart schrijft.

em stapelt

Omdat font-size overerft, stapelt em ook. Een em in een element dat zelf al in een geschaald element zit, vertrekt van die geschaalde waarde. Drie niveaus diep ben je het spoor bijster.

Gebruik em dus voor dingen die ten opzichte van hun eigen tekst moeten schalen: ruimte onder een titel, padding in een knop, een component waarvan je de uiteindelijke lettergrootte niet kent.

rem

Root em: relatief ten opzichte van de font-size van het html-element, oftewel :root. Standaard is dat 16px.

Geen stapeling, dus geen verrassingen. 1rem is overal in je document even groot.

.card {
    padding: 1.5rem;     /* 24px */
    margin-bottom: 2rem; /* 32px */
}

Werk in rem, tenzij je een reden hebt om het niet te doen.

Het belangrijkste argument is niet consistentie maar toegankelijkheid 🤓: zet een bezoeker in zijn browser de standaardlettergrootte op 20px omdat hij slechter ziet, dan schaalt je hele layout mee.
Met px gebeurt er niets.

Omrekenen van px naar rem

Je ziet soms de truc om html { font-size: 62.5%; } te zetten, zodat 1rem gelijk wordt aan 10px en het rekenen makkelijker is. Dat werkt, maar het is een omweg.

💡 Beter is dat je ophoudt in pixels te denken en in verhoudingen begint te denken!

Krijg je toch een design binnen in px? Stuur dat design gewoon terug naar 2010.

% - percent

Een percentage is relatief ten opzichte van de parent.

p {
    font-size: 80%;   /* 80% van de font-size van de parent, dus hetzelfde als 0.8em */
}

img {
    width: 80%;       /* 80% van de breedte van de parent */
}

Voor font-size gedraagt het zich als em. Voor width en height verwijst het naar de afmetingen van de parent, en dat is waar je het echt voor gebruikt.

dvw en dvh

Dynamic viewport width en height: 1dvw is een honderdste van de breedte van het browservenster, 1dvh een honderdste van de hoogte.

h1 {
    font-size: 5dvw;
}

Die h1 schaalt mee terwijl je het venster versleept. Handig voor een grote titel of een blok dat het hele scherm moet vullen.

Waarom dynamic

Op een telefoon verandert de zichtbare hoogte terwijl je scrolt, omdat de adresbalk in- en uitschuift. De oudere vh rekent met de hoogte zonder adresbalk en springt daardoor. De dvh houdt rekening met wat er op dat moment echt zichtbaar is.

Samengevat

Eenheid	Waarvoor
rem	je standaard, voor zowat alles
em	wat ten opzichte van zijn eigen tekst moet schalen
%	breedtes ten opzichte van de parent
dvw / dvh	wat met het venster moet meeschalen
px	kleine dingen die niet mogen schalen: een border, een schaduw

Volgende week

Bij responsive design kom je hier op terug, want dan ga je layouts bouwen die op elke schermbreedte werken. De keuze tussen deze eenheden bepaalt dan of dat vanzelf gaat of niet.