Hier komen ‘rem’ en ‘em’ van pas.
Ze zijn flexibel en passen zich aan verschillende schermformaten aan.
Veel ontwikkelaars raken in de war door deze eenheden.
In deze gids maken we het ‘rem’ vs ‘em’ debat duidelijk.
Je leert hoe je ze gebruikt om websites te maken die goed werken op alle apparaten.

CSS-eenheden: De Bouwstenen van Webdesign

CSS-eenheden zijn essentieel voor webdesign.
They set the size and place of every part of your page.
Think of them as digital rulers, making sure your headings, text, images, and buttons fit together well.
CSS units come in different types, each with its own uses.

De belangrijkste soorten CSS-eenheden zijn vast en flexibel.

  • Vaste eenheden, zoals pixels (px), veranderen niet van grootte.
    Eén pixel is altijd één stip op je scherm.
    Dit maakt ze makkelijk te gebruiken, maar kan problemen geven bij responsive design.
    Websites moeten er goed uitzien op zowel grote als kleine schermen.
    Alleen vaste eenheden gebruiken is als een huis bouwen met stijve muren – het gaat niet goed om met veranderingen.
  • Flexibele eenheden veranderen van grootte op basis van andere factoren, zoals schermgrootte.
    Ze rekken uit en krimpen om op verschillende apparaten te passen, waardoor ze geweldig zijn voor responsive design.

Er zijn ook 4 CSS-eenheden om uit te kiezen:

  • Pixels (px): Vaste grootte, goed voor precieze controle
  • Percentages (%): Flexibel, vaak gebruikt voor breedtes en hoogtes
  • Viewport-eenheden (vw, vh): Grootte gebaseerd op het browservenster
  • ‘rem’ en ‘em’: Flexibele eenheden waar we in deze gids op focussen

De juiste CSS-eenheid kiezen gaat over meer dan alleen uiterlijk.
Het beïnvloedt hoe makkelijk je website te gebruiken en bij te werken is.
Stel je tekst voor die te klein is om te lezen op een telefoon of een lay-out die rommelig is op een tablet.
Dit soort problemen kan gebruikers wegjagen.
Door de voor- en nadelen van elke eenheid te kennen, kun je websites maken die voor iedereen goed werken.

Wat is ‘rem.‘

‘rem’ is een flexibele CSS-eenheid waar veel webontwikkelaars dol op zijn. Laten we eens kijken hoe het werkt en waarom het handig is.

‘rem’ staat voor “root em.”
De lettergrootte wordt bepaald door het root-element van je webpagina, meestal het <html> element.
Zo werkt het:

  • Als de root lettergrootte 16px is (gebruikelijk in de meeste browsers), is 1rem gelijk aan 16px
  • Als je de root lettergrootte verandert naar 20px, is 1rem dan gelijk aan 20px

Deze link tussen ‘rem’ en de root lettergrootte maakt het geweldig voor schaalbare designs.

Zie je webpagina als een gebouw.
Het root-element is het fundament, en alle andere elementen zijn blokken erop.
Als je ‘rem’ gebruikt om iets te dimensioneren, zeg je eigenlijk: “Maak dit blok X keer groter of kleiner dan het fundament.”

Bijvoorbeeld:

  1. Stel root lettergrootte in op 16px
  2. Maak een kop 2rem
  3. De kop zal 32px zijn (2 * 16px)
  4. Als je de root verandert naar 20px, wordt de kop 40px (2 * 20px)

Deze schaalbaarheid is geweldig voor responsive design.
Door de root lettergrootte te veranderen voor verschillende schermformaten, kun je eenvoudig je hele lay-out aanpassen.

Voordelen van het Gebruik van ‘rem’

Het gebruik van ‘rem’ heeft verschillende voordelen:

  1. Makkelijk Schalen: Wil je alle lettergroottes in één keer veranderen?
    Pas gewoon de root lettergrootte aan.
    Alles wat ‘rem’ gebruikt, schaalt mee.
  2. Eenvoudiger te Onderhouden: ‘rem’ maakt je CSS-code overzichtelijker en makkelijker te begrijpen.
    Dit helpt bij samenwerken met anderen of als je later terugkomt bij je project.
  3. Voorspelbaarder: In tegenstelling tot ‘em,’ dat gebaseerd is op de lettergrootte van het bovenliggende element, verwijst ‘rem’ altijd naar de root.
    Hierdoor is het makkelijker te voorspellen hoe dingen eruit zullen zien.

Wanneer ‘rem’ te Gebruiken

‘rem’ is handig in veel situaties:

  1. Lettergroottes

Geweldig voor het maken van tekst die gemakkelijk te lezen is op elk apparaat. Deze setup laat gebruikers in- of uitzoomen, en de tekstgroottes blijven in verhouding. Bijvoorbeeld:

css

				
					html {
  font-size: 16px; /* Base size */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1.2rem; /* 19.2px */
}
  1. Element Dimensionering

Gebruik ‘rem’ voor breedtes, hoogtes, marges en padding.
Dit houdt je lay-out in balans als schermformaten veranderen.

  1. Algemene Lay-out

Gebruik ‘rem’ om containerbreedtes en ruimtes tussen secties in te stellen.
Dit helpt je hele pagina soepel aan te passen aan verschillende schermen.

Door ‘rem’ te gebruiken, kun je websites bouwen die er goed uitzien en lekker werken op allerlei apparaten.

Wat is ‘em.‘

Hoewel ‘rem’ een stevige basis biedt voor schaalbaar webdesign, biedt ‘em’ een andere manier om elementen te dimensioneren op basis van hun omgeving. Laten we eens kijken hoe ‘em’ werkt en waar het uitblinkt.

‘em’ dankt zijn naam aan de breedte van de letter ‘M’ in ouderwets drukwerk.
In tegenstelling tot ‘rem’, dat altijd kijkt naar de lettergrootte van het root-element, neemt ‘em’ zijn grootte over van het bovenliggende element.
Dit betekent:

  • Als de lettergrootte van een bovenliggend element 16 pixels is, zal 1em van het kind ook 16 pixels zijn.
  • Als de lettergrootte van het bovenliggende element verandert, veranderen de ‘em’-waarden van het kind ook mee.

Deze schalingsmethode maakt ‘em’ geweldig voor het maken van onderdelen van een webpagina die zich aanpassen aan waar je ze ook neerzet.

Zie ‘em’ als een soort stamboom van groottes.
Elk element geeft zijn lettergrootte door aan zijn kinderen, die die grootte dan gebruiken om hun eigen ‘em’-maten uit te rekenen.
Dit kan een domino-effect veroorzaken, waarbij het veranderen van de lettergrootte van één element invloed heeft op al zijn nakomelingen.

Laten we eens naar een voorbeeld kijken:

css

				
					.container {
  font-size: 16px;
}

.container h2 {
  font-size: 2em; /* 32px */
}

.container p {
  font-size: 1.2em; /* 19.2px */
}

  1. In dit geval:

    • De <h2> en <p> elementen krijgen hun grootte van de .container.
    • De <h2> zal twee keer zo groot zijn als de lettergrootte van de container (32px).
    • De <p> zal 1,2 keer groter zijn (19,2px).

    Als we de lettergrootte van .container veranderen naar 20px, zullen de <h2> en <p> automatisch aanpassen naar 40px en 24px.

    Dit gedrag kan zowel handig als lastig zijn.
    Het zorgt voor flexibel ontwerp, maar kan ook tot verrassingen leiden als je niet oppast, vooral in complexe layouts.

    Voordelen van het gebruik van ‘em’

    1. Past zich aan aan de omgeving

    ‘em’ blinkt uit in zijn vermogen om van grootte te veranderen op basis van zijn bovenliggende element.
    Dit is super handig als je onderdelen van je website wilt maken die op verschillende plekken passen, elk met zijn eigen lettergrootte.

    Stel je bijvoorbeeld een knop voor die je zowel in je hoofdmenu als in je zijbalk wilt gebruiken.
    Het menu heeft misschien grotere tekst dan de zijbalk, dus je wilt dat de knop van grootte verandert om te passen.
    Door ‘em’ te gebruiken voor de padding, lettergrootte en andere afmetingen van de knop, zorg je ervoor dat hij er goed uitziet, waar je hem ook neerzet.

    1. Geweldig voor bouwstenen

    ‘em’ werkt goed met modulair ontwerp, waarbij je je website opbreekt in herbruikbare onderdelen.
    Wanneer je elementen binnen een component met ‘em’ dimensioneert, creëer je een op zichzelf staande eenheid die schaalt op basis van zijn eigen lettergrootte.
    Dit maakt het makkelijk om de component in verschillende delen van je website te gebruiken zonder je zorgen te maken dat het er niet bij past.

    Het is als bouwen met blokken.
    Elk blok heeft zijn eigen grootte, maar ze passen allemaal bij elkaar omdat ze gebaseerd zijn op dezelfde maat.
    Op dezelfde manier laat ‘em’ je CSS “blokken” maken die hun interne balans behouden terwijl ze in het grotere plaatje van je website passen.

    Deze aanpak maakt je code niet alleen herbruikbaarder en makkelijker te onderhouden, maar helpt je ook efficiënter te werken.
    Je kunt je concentreren op het perfectioneren van elke component, wetende dat ze soepel zullen passen in de rest van je ontwerp.

    Waar ‘em’ te gebruiken

    ‘em’ is vooral handig in situaties waar je flexibiliteit nodig hebt binnen specifieke delen van je website.

    1. Dingen in verhouding houden

    Een van de belangrijkste sterke punten van ‘em’ is dat het elementen binnen een component in verhouding tot elkaar houdt.
    Dit betekent dat onderdelen van een knop of een menu samen kunnen groeien of krimpen wanneer de lettergrootte van de component verandert.
    Dit zorgt ervoor dat alles in balans blijft, ongeacht waar je de component op je site gebruikt.

    Stel je een knop voor met padding en lettergrootte ingesteld in ‘em’.
    Als je deze knop in een container met grotere tekst plaatst, zal de knop automatisch meegroeien, terwijl hij zijn vorm en uiterlijk behoudt.
    Dit bespaart je het aanpassen van de stijl van de knop elke keer dat je hem op een nieuwe plek gebruikt.

    1. Harmonie creëren binnen componenten

    ‘em’ is ook geweldig om ervoor te zorgen dat verschillende onderdelen van een component er goed samen uitzien.
    Door ‘em’ te gebruiken voor dingen als marges, padding en zelfs afbeeldingsgroottes, kun je ervoor zorgen dat ze allemaal samen van grootte veranderen wanneer de lettergrootte van het component verandert.
    Dit zorgt voor een ontwerp waarbij alle onderdelen van het component verbonden en in balans voelen.

    Denk bijvoorbeeld aan een kaartcomponent met een titel, een afbeelding en wat tekst.
    Als je de afbeeldingshoogte en de ruimtes rond elementen instelt met ‘em’, zullen ze allemaal samen groeien of krimpen wanneer de lettergrootte van de kaart verandert.
    Dit houdt alles consistent en voorkomt dat een onderdeel te groot of te klein lijkt.

    Laten we eens kijken naar een praktisch voorbeeld:

    css

				
					.card {
  font-size: 16px;
}

.card h3 {
  font-size: 1.5em; /* 24px */
  margin-bottom: 0.5em; /* 8px */
}

.card img {
  height: 10em; /* 160px */
  margin-bottom: 1em; /* 16px */
}

.card p {
  font-size: 1em; /* 16px */
  line-height: 1.5em; /* 24px */
}

  1. In deze code hebben we een kaartcomponent gemaakt met een kop, een afbeelding en een alinea.
    Alle groottes en ruimtes binnen de kaart zijn ingesteld met ‘em’, zodat ze samen veranderen als de lettergrootte van de kaart verandert.
    Dit creëert een component dat er goed uitziet en zich kan aanpassen aan verschillende toepassingen op je website.

    Mogelijke uitdagingen met ‘em’

    Hoewel ‘em’ flexibiliteit biedt, is het belangrijk om je bewust te zijn van enkele uitdagingen om verrassingen in je layouts te voorkomen.

    1. Overerving kan ingewikkeld worden

    Omdat ‘em’ gebaseerd is op overerving, kan het soms tot onverwachte resultaten leiden, vooral in complexe HTML-structuren.
    Omdat elk element zijn lettergrootte van zijn ouder neemt, kunnen veranderingen hogerop verrassende effecten hebben verderop.

    Als je bijvoorbeeld een lijst hebt in een container die ‘em’ gebruikt voor zijn lettergrootte, zal het veranderen van de lettergrootte van de container ook de grootte van de lijstitems veranderen.
    Dit zou ze te groot of te klein kunnen maken, wat layoutproblemen veroorzaakt.
    Het oplossen van layoutproblemen kan ingewikkelder zijn, omdat je moet letten op hoe groottes worden doorgegeven door je HTML.

    2. Testen is cruciaal

    Vanwege de manier waarop ‘em’ werkt, is het echt belangrijk om je layouts grondig te testen.
    Je moet ervoor zorgen dat alles er goed uitziet in verschillende situaties en wanneer lettergroottes veranderen.

    Controleer je website op verschillende apparaten en met verschillende browserzoommogelijkheden om eventuele layoutproblemen op te sporen.
    Browser-ontwikkelaarshulpmiddelen kunnen echt handig zijn om overervingsketens te bekijken en de bron van ‘em’-gerelateerde problemen te vinden.
    Door voorzichtig en proactief te zijn in je testen, kun je frustrerende verrassingen voorkomen en een gepolijste, gebruiksvriendelijke website maken.

    ‘rem’ vs. ‘em’ vergelijking

    Nu we de individuele sterke punten en eigenaardigheden van ‘rem’ en ‘em’ hebben onderzocht, laten we ze naast elkaar zetten in een directe vergelijking.
    Dit geeft je een beter idee van hoe ze verschillen en wanneer je elk van beide moet gebruiken.

    Zij-aan-zij vergelijkingstabel

    Functie

    rem

    em

    Definitie

    Relatief aan de lettergrootte van het root-element

    Relatief aan de lettergrootte van het ouder-element

    Erfenis

    Erft niet over

    Erft over van het ouder-element

    Schaalbaarheid

    Uitstekend voor algemene website-schaling

    Goed voor schaling binnen componenten

    Onderhoudbaarheid

    Bevordert schonere, beter onderhoudbare code

    Dit kan leiden tot complexe overervingsketens

    Voorspelbaarheid

    Hoge voorspelbaarheid in elementgrootte

    Kan onvoorspelbaar zijn in geneste structuren

    Ideale gebruikssituaties

    Lettergrootte, elementgrootte, algemene layout

    Modulaire schaling, relatieve grootte binnen componenten

    Voordelen

    Schaalbaarheid, onderhoudbaarheid, voorspelbaarheid

    Contextuele schaling, flexibiliteit binnen componenten

    Nadelen

    Mogelijke problemen met geneste elementen, minder controle over fijnmazige aanpassingen

    Overervingscomplexiteiten, mogelijkheid van onverwacht gedrag

    De juiste CSS-eenheid kiezen: Waar je aan moet denken

    Bij het bouwen van een website is het kiezen van de juiste CSS-eenheid belangrijk.
    Hier is waar je aan moet denken:

    1. Hoe groot is je project?

    De grootte van je project doet ertoe:

    • Grote websites: ‘rem’ werkt misschien beter.
      Het is makkelijker te schalen en netjes te houden.
    • Kleine projecten of herbruikbare onderdelen: ‘em’ kan een goede keuze zijn.
      Het is flexibeler.
    1. Wat is je ontwerpsdoel?

    Denk na over wat je wilt bereiken:

    • De hele website ziet er goed samen uit: ‘rem’ is beter.
    • Onderdelen die overal kunnen passen: ‘em’ zou de juiste keuze kunnen zijn.

    3. Is je site makkelijk te gebruiken voor iedereen?

    Het laten werken van je site voor alle gebruikers is cruciaal:

    • ‘rem’ is gekoppeld aan de belangrijkste lettergrootte.
      Dit kan het makkelijker maken voor gebruikers om tekstgrootte te veranderen zonder de layout te verpesten.
    • ‘em’ kan ook werken, maar je moet oppassen hoe groottes veranderen binnen delen van je site.

    4. Werkt Je Site op Alle Apparaten?

    Zowel ‘rem’ als ‘em’ kunnen goed werken voor sites die er goed uitzien op alle schermen.
    Maar:

    • ‘rem’ is voorspelbaarder.
      Het heeft altijd betrekking op de belangrijkste lettergrootte.
    • ‘em’ kan je soms verrassen, vooral in ingewikkelde layouts.
      Je zult het meer moeten testen.

    ‘rem’ en ‘em’ Samen Gebruiken: Beste Ideeën

    Je hoeft niet maar één te kiezen. Het gebruik van zowel ‘rem’ als ‘em’ kan je site nog beter maken. Hier lees je hoe:

    1. Begin met ‘rem’ voor de basics: Stel je belangrijkste lettergrootte in met ‘rem’.
      Dit zet de toon voor je hele site.
    2. Gebruik ‘em’ voor onderdelen die overal moeten passen: Voor dingen zoals knoppen of menu’s, helpt ‘em’ ze passen waar je ze ook neerzet.
    3. Houd vast aan ‘rem’ voor de grote dingen: Gebruik ‘rem’ voor de hoofdlayout, zoals hoe breed dingen zijn of hoeveel ruimte er tussen secties zit.
      Het houdt dingen consistent.
    4. Mix het voor geneste onderdelen: Als je dingen binnen andere dingen hebt, probeer dan beide te gebruiken.
      Gebruik ‘em’ voor groottes binnen een component en ‘rem’ voor alles wat moet matchen met de algemene layout.
    5. Probeer verschillende dingen: Wees moedig en experimenteer.
      Test verschillende mixen van ‘rem’ en ‘em’ om te zien wat het beste werkt voor jouw site.

    Door ‘rem’ en ‘em’ samen te gebruiken, kun je sites maken die er goed uitzien en goed werken op alle apparaten.

    Coole Trucs en Tools

    Als je beter wordt met ‘rem’ en ‘em,’ kun je wat geavanceerde technieken gebruiken:

    1. CSS Variabelen: Je Design Controlecentrum

    CSS variabelen laten je waarden opslaan die je vaak gebruikt.
    Dit maakt het veranderen van je design veel makkelijker.

    Zo werkt het:

    css

				
					:root {
  --main-font-size: 16px;
}

body {
  font-size: var(--main-font-size);
}

h1 {
  font-size: calc(2 * var(--main-font-size));
}

  1. In dit voorbeeld stellen we een hoofdlettergrootte in en gebruiken het voor de bodytekst en om de kopgrootte te berekenen.
    Als we later de grootte willen veranderen, hoeven we de variabele maar één keer te veranderen, en alles update!

    2. De calc() Functie: Doe Wiskunde in Je CSS

    De calc() functie laat je wiskunde doen recht in je CSS.
    Dit geeft je meer controle over je layout.

    Bijvoorbeeld, je zou een zijbalk breedte zo kunnen instellen:

    css

				
					.sidebar {
  width: calc(20vw - 20px);
}

  1. Dit maakt de zijbalk 20% van de schermbreedte minus 20 pixels.
    Het past zich automatisch aan voor verschillende schermgroottes.

    3. Elementor: CSS Eenheden Makkelijk Maken

    Als je een website wilt bouwen zonder direct CSS code te schrijven, probeer dan Elementor.
    It’s a visual builder that lets you:

    • Verander groottes en stijlen met intuïtieve bediening
    • Zie hoe je site eruitziet op verschillende apparaten
    • Stel stijlen in voor je hele site op één plek

    Elementor regelt de berekeningen voor relatieve eenheden zoals rem en em zodat jij je kunt concentreren op het design.

    Veelvoorkomende Fouten en Hoe Ze Op te Lossen

    Zelfs als je veel weet over ‘rem’ en ‘em,’ kun je nog steeds tegen problemen aanlopen.
    Hier zijn wat veelvoorkomende misverstanden en hoe je ze kunt vermijden:

    Mythe 1: ‘em’ is Altijd Beter voor Toegankelijkheid

    Waarheid: Zowel ‘em’ als ‘rem’ kunnen goed werken voor het maken van makkelijk te gebruiken sites.
    ‘rem’ kan beter zijn voor het laten veranderen van de algemene tekstgrootte door gebruikers.

    Mythe 2: ‘rem’ is Alleen voor Lettergroottes

    Waarheid: Je kunt ‘rem’ gebruiken voor elke grootte op je pagina – breedte, hoogte, marges, en meer.

    Mythe 3: ‘em’ is Altijd Onvoorspelbaar

    Waarheid: Met goede planning en testen kan ‘em’ betrouwbaar en flexibel zijn.

    Mythe 4: Je Moet Altijd Eén Boven de Ander Kiezen

    Waarheid: Vaak werkt het gebruik van zowel ‘rem’ als ‘em’ samen het beste.

    Tips voor het Oplossen van Problemen

    Als je tegen problemen aanloopt met ‘rem’ of ‘em,’ probeer dan deze tips:

    1. Check de grootteketen: Gebruik de tools van je browser om te zien welke elementen groottes beïnvloeden.
    2. Zoek naar conflicterende stijlen: Soms kan andere CSS je ‘rem’- of ‘em’-instellingen overrulen.
    3. Test op verschillende apparaten: Check altijd hoe je site eruitziet op telefoons, tablets en computers.
    4. Gebruik CSS-variabelen en calc(): Deze tools maken je CSS flexibeler en makkelijker te beheren.
    5. Probeer een visuele builder: Tools zoals Elementor kunnen je helpen met het beheren van groottes zonder verdwaald te raken in code.

    Inpakken

    Zowel ‘rem’ als ‘em’ zijn handige tools voor webdesigners. ‘rem’ is geweldig om je hele site consistent te houden, terwijl ‘em’ helpt om flexibele componenten te maken.

    Er is geen one-size-fits-all oplossing – de beste keuze hangt af van wat je aan het bouwen bent.
    Als je beide eenheden begrijpt, kun je slimme beslissingen nemen over je websites.

    Wees niet bang om ‘rem’ en ‘em’ te mixen voor de beste resultaten.
    En als je een makkelijkere manier wilt om te ontwerpen, check dan tools zoals Elementor.

    Onthoud, oefening baart kunst.
    Hoe meer je met deze eenheden werkt, hoe beter je wordt in het maken van toffe websites.
    Veel plezier met ontwerpen!