{"id":69573,"date":"2024-08-26T07:00:00","date_gmt":"2024-08-26T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=69573"},"modified":"2025-05-26T09:11:45","modified_gmt":"2025-05-26T16:11:45","slug":"rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/","title":{"rendered":"REM vs. EM: Hoe Kies Je de Juiste CSS-eenheid"},"content":{"rendered":"\n<p>Je droomt waarschijnlijk &#8216;s nachts niet over de grootte van CSS-elementen, maar als je <a href=\"https:\/\/www.dreamhost.com\/website-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">een website of app bouwt<\/a>, is dit onderwerp zeker het overdenken waard.<\/p>\n\n\n<p>Terwijl sommige CSS-eenheden goed samenspelen met je responsieve ontwerp, kunnen anderen een rebelse kant vertonen. In staat zijn om de verschillende karakters te onderscheiden kan je in de toekomst veel hoofdpijn besparen.<\/p>\n\n\n<p>Neem de combinatie van REM en EM. Welke zou je moeten gebruiken, en waarom?<\/p>\n\n\n<p>Blijf bij ons voor de volgende paar alinea&#8217;s, en we zullen alles onthullen!<\/p>\n\n\n<h2 id=\"h-rem-vs-em-in-a-nutshell\" class=\"wp-block-heading\">REM vs. EM in Een Notendop<\/h2>\n\n\n<p>Als je snel een antwoord wilt, <strong>hier is de korte versie<\/strong>:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>REM:<\/strong> Deze eenheid is gebaseerd op het root-element (meestal de <code>&lt;html&gt;<\/code> tag.) Wat er verder ook op de pagina gebeurt, je dimensionering blijft consistent.<\/li>\n\n\n\n<li><strong>EM:<\/strong> Deze eenheid zoekt naar richtlijnen. Als het bovenliggende element verandert, zal je dimensionering volgen.<\/li>\n\n\n<\/ul>\n\n\n<p>Als je het verschil wilt onthouden, onthoud dan dat de &#8220;R&#8221; in REM staat voor &#8220;Root&#8221;.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1119\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css.webp\" alt=\"Vergelijking van REM vs. EM eenheden in CSS, met uitleg over hun relatie tot respectievelijk root- en ouderelementen.\" class=\"wp-image-48908 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-300x210.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1024x716.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-768x537.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1536x1074.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-600x420.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1200x839.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-730x511.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1460x1021.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-784x548.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1568x1097.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-877x613.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1119;\" \/><\/figure>\n\n\n<p><strong><em>Nerd Opmerking<\/em><\/strong><em>: Waarom eindigen beide eenheden met &#8220;EM&#8221;? Dit is geen afkorting. Vroeger, toen alle tekst nog werd gedrukt, gebruikten typografen de breedte van een hoofdletter M als maatstaf voor tekstgrootte. Best slim, toch?<\/em><\/p>\n\n\n<p><strong>Dus, welke zou je moeten gebruiken?<\/strong><\/p>\n\n\n<p>Nou, dat hangt ervan af.&nbsp;<\/p>\n\n\n<p>Als je wilt dat tekst zich aanpast aan de omgeving, is EM misschien de betere optie. Maar als je wilt dat de grootte over je hele website consistent blijft, moet je overschakelen naar REM.<\/p>\n\n\n<p>Waarom?<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>EM:<\/strong> Flexibeler, maar kan rommelig worden als je niet voorzichtig bent.<\/li>\n\n\n\n<li><strong>REM:<\/strong> Consistente afmetingen, geweldig voor responsief ontwerp.<\/li>\n\n\n<\/ul>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Responsief Ontwerp<\/h3>\n    <p>Responsief ontwerp stelt een website in staat zich aan te passen aan de schermgrootte van het apparaat waarop het bekeken wordt. De website zal er daarom anders uitzien op verschillende apparaten.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/responsive-design\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lees Meer                    <\/a>\n\n<\/div>\n\n\n<p>Nog steeds verward? Maak je geen zorgen, we gaan zo dadelijk dieper in op de materie.<\/p>\n\n\n<p>Onthoud dit voor nu: <strong>REM is meestal de veiligere keuze voor de meeste websites<\/strong>.<\/p>\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tHow to Learn CSS In 2026 (Fast &amp; Free)\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/learn-css\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n<h2 id=\"h2_understanding-rem-and-em\" class=\"wp-block-heading\">REM en EM Begrijpen<\/h2>\n\n\n<p>Ok\u00e9, laten we wat dieper ingaan.<\/p>\n\n\n<p><strong>Zowel REM als EM zijn relatieve eenheden. Dat betekent dat ze dezelfde grootte behouden <em>relatief<\/em> ten opzichte van een specifieke maatstaf.<\/strong><\/p>\n\n\n<p>Dit type <a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">grootte speelt een sleutelrol in responsief ontwerp<\/a>.<\/p>\n\n\n<p>Absolute groottes (bijv. px) blijven altijd hetzelfde, wat betekent dat tekst piepklein kan lijken op een desktop en enorm op een telefoon. In tegenstelling tot relatieve eenheden kunnen deze zich aanpassen aan verschillende apparaten en lay-outs.<\/p>\n\n\n<p>In een digitale context worden REM en EM nog steeds voornamelijk gebruikt om tekst te meten. Je kunt deze eenheden echter ook gebruiken voor:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Marges<\/li>\n\n\n\n<li>Opvulling<\/li>\n\n\n\n<li>Breedte en hoogte<\/li>\n\n\n\n<li>Regelhoogte<\/li>\n\n\n\n<li>Randeigenschappen<\/li>\n\n\n\n<li>Doosschaduw<\/li>\n\n\n\n<li>Positionering<\/li>\n\n\n\n<li>Mediaquery&#8217;s<\/li>\n\n\n<\/ul>\n\n\n<p>Met andere woorden, REM en EM zijn nuttig wanneer je flexibele afmetingen in je ontwerp wilt.<\/p>\n\n\n<p>Ok\u00e9, dat dekt grotendeels de gemeenschappelijke basis tussen deze twee eenheden.<\/p>\n\n\n<p>Laten we nu eens nader bekijken wat elk van hen uniek maakt.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"h2_getting-to-know-rem\" class=\"wp-block-heading\">REM Leren Kennen<\/h2>\n\n\n<p>REM staat voor \u201croot em\u201d. Wanneer je deze eenheid gebruikt, definieer je hoe groot iets moet zijn, relatief ten opzichte van de lettergrootte van je root-element (meestal je <code>&lt;html&gt;<\/code>-tag).<\/p>\n\n\n<p>De meeste browsers gebruiken standaard <code>16px<\/code> voor het root-element. Het is echter een goed idee om je standaard lettergrootte te defini\u00ebren <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">met behulp van CSS<\/a>.<\/p>\n\n\n<p>Je kunt het zo doen:<\/p>\n\n\n<p><code>html { font-size: 16px; \/* Je basis lettergrootte *\/ }<\/code><\/p>\n\n\n<p>Welke grootte je ook kiest, wordt <code>1rem<\/code>. Dit is je nieuwe basislijn voor de hele pagina.<\/p>\n\n\n<p>Elk figuur dat groter of kleiner is, zal de grootte van je doelelement veranderen, relatief aan je gekozen standaard.<\/p>\n\n\n<p>Het is een beetje ingewikkeld om duidelijk uit te leggen, dus hier is een eenvoudig voorbeeld:<\/p>\n\n\n<p><code>html { font-size: 16px; \/* Je basis lettergrootte *\/ }<br>body { font-size: 1.2rem; \/* 19.2px *\/ }<br>h1 { font-size: 2.4rem; \/* 38.4px *\/ }<\/code><\/p>\n\n\n<p>In dit scenario hebben we de lettergrootte van de <code>&lt;html&gt;<\/code> tag gedefinieerd als <code>16px<\/code>. Dit is onze basislijn van <code>1rem<\/code>.<\/p>\n\n\n<p>We willen dat onze hoofdtekst iets groter is dan dat. Dus we stellen de <code>&lt;body&gt;<\/code> lettergrootte in op <code>1.2rem<\/code>. Dat is 120% van de basislijn.<\/p>\n\n\n<p>De hoofdkop op onze pagina moet veel groter zijn. Door de lettergrootte van <code>&lt;h1&gt;<\/code> in te stellen op <code>2.4rem<\/code>, kunnen we de kop 240% zo groot maken als onze basislijn.<\/p>\n\n\n<p>Je eindigt met zoiets als dit:<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1133\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem.webp\" alt=\"Diagram van lettergrootte in REM-eenheden. HTML op 16px, h1 op 2.4rem (38.4px) en body op 1.2rem (19.2px) met voorbeeldtekst.\" class=\"wp-image-48911 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-300x212.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1024x725.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-768x544.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1536x1088.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-600x425.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1200x850.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-730x517.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1460x1034.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-784x555.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1568x1110.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-877x621.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1133;\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\">Waarom REM Gebruiken?<\/h3>\n\n\n<p>Wat zijn de voordelen van dit systeem?<\/p>\n\n\n<p>In CSS bieden REM-eenheden enkele behoorlijk goede voordelen:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Echte Consistentie:<\/strong> Alles schaalt proportioneel op basis van de rootgrootte, dus je ontwerp zal er altijd precies uitzien zoals je bedoeld hebt op elk apparaat.<\/li>\n\n\n\n<li><strong>Responsiviteit:<\/strong> Proportionele schaling betekent dat je website of app zich kan aanpassen aan een breed scala aan apparaten.<\/li>\n\n\n\n<li><strong>Eenvoudig Onderhoud:<\/strong> Wanneer al je stijlen gebaseerd zijn op dezelfde rootinstelling, is het eenvoudig om indien nodig grootschalige wijzigingen aan te brengen \u2014 Je hoeft niet elk afzonderlijk element te bezoeken en de lettergrootte handmatig te wijzigen. Dit bespaart je ook <em>veel<\/em> tijd.<\/li>\n\n\n\n<li><strong>Geweldige Toegankelijkheid:<\/strong> Heel <a href=\"https:\/\/medium.com\/@vamptvo\/pixels-vs-ems-users-do-change-font-size-5cfb20831773\" target=\"_blank\" rel=\"noreferrer noopener\">veel mensen<\/a> wijzigen daadwerkelijk de standaard lettergrootte van hun browsers om tekst gemakkelijker te kunnen lezen. Door REM-maatvoering te gebruiken, kan je ontwerp zich aanpassen aan deze gebruikersvoorkeuren.<\/li>\n\n\n<\/ul>\n\n\n<p>Natuurlijk is het niet allemaal rozengeur en maneschijn. Er zijn enkele nadelen:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Derde-partij Wildcards:<\/strong> Als je site ingesloten inhoud bevat, merk je misschien dat tekst en andere elementen je REM-regels niet volgen.<\/li>\n\n\n\n<li><strong>Lastige berekeningen: <\/strong>Uitzoeken hoe groot 1,2rem gaat zijn vereist wat rekenwerk.<\/li>\n\n\n\n<li><strong>Grote macht, grotere verantwoordelijkheid: <\/strong>Wanneer je de tekstgrootte op je website zo gemakkelijk kunt wijzigen, moet je voorzichtig zijn met bewerkingen om designrampen over de hele site te voorkomen!<\/li>\n\n\n<\/ul>\n\n\n<p>Als algemene regel geldt, <strong>REM moet je standaardkeuze zijn voor de meeste projecten<\/strong>. Het is makkelijker te hanteren dan EM-afmetingen, en de resultaten zijn voorspelbaarder.<\/p>\n\n\n<p>Echter, er zijn momenten waarop EM nuttig is.<\/p>\n\n\n<h2 id=\"h2_getting-to-know-em\" class=\"wp-block-heading\">Kennismaking Met EM<\/h2>\n\n\n<p>EM is een lastige klant. Deze eenheid is gebaseerd op de lettergrootte van zijn bovenliggende element \u2014 net als een kameleon die zich aan zijn omgeving aanpast.<\/p>\n\n\n<p>De verwarring begint als je gaat nesten. De meeste elementen <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">erven hun standaard lettergrootte van hun ouder<\/a>. Maar wat als de ouder ook EM-afmetingen gebruikt? Je kunt vrij gemakkelijk verstrikt raken in een wirwar van proportionaliteit.<\/p>\n\n\n<p>Hier is een eenvoudig voorbeeld:<\/p>\n\n\n<p>Stel je voor dat je een pagina hebt die een <code>&lt;div&gt;<\/code> bevat. In die box hebben we een <code>&lt;p&gt;<\/code> tag met wat tekst.<\/p>\n\n\n<p><code>&lt;html&gt;<br>    &lt;div&gt;<br>        &lt;p&gt;Hier wat tekst.&lt;\/p&gt;<br>    &lt;\/div&gt;<br>&lt;\/html&gt;<\/code><\/p>\n\n\n<p>Bekijk nu de CSS voor dit HTML-fragment:<\/p>\n\n\n<p><code>html { font-size: 16px; \/* Standaard beginformaat *\/ }<br>div { font-size: 1.2em; \/* 19.2px *\/ }<br>p { font-size: 1.2em; \/* 23.04px *\/ }<\/code><\/p>\n\n\n<p>We zijn begonnen met het defini\u00ebren van de standaard lettergrootte voor de hele pagina. Tot nu toe gaat alles goed.<\/p>\n\n\n<p>Hierna zeiden we dat de <code>&lt;div&gt;<\/code> inhoud <code>1.2em<\/code> moet zijn. Met andere woorden, onze tekst zou 120% van het standaardformaat van het bovenliggende element moeten zijn.<\/p>\n\n\n<p>Om af te ronden, maken we ook de <code>&lt;p&gt;<\/code><strong> <\/strong>lettergrootte <code>1.2em<\/code>.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1133\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em.webp\" alt=\"Diagram van lettergrootte in EM-eenheden die geneste tekstelementen toont en hun relatieve groottes op basis van bovenliggende elementen.\" class=\"wp-image-48913 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-300x212.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1024x725.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-768x544.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1536x1088.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-600x425.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1200x850.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-730x517.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1460x1034.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-784x555.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1568x1110.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-877x621.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1133;\" \/><\/figure>\n\n\n<p>Wacht even! Er is een aanzienlijke toename in de grootte van de tekst, gemeten in pixels.<\/p>\n\n\n<p>Waarom is dat zo?<\/p>\n\n\n<p>Het <code>&lt;p&gt;<\/code> element heeft de lettergrootte van zijn ouder <code>&lt;div&gt; (19.2px)<\/code> bekeken en deze als standaard genomen. En omdat we om <code>1.2em<\/code> vroegen, krijgen we tekst die 120% van de standaardgrootte is.<\/p>\n\n\n<p>Deze soort fouten zijn gemakkelijk te maken als je werkt met de EM-eenheid.<\/p>\n\n\n<h3 class=\"wp-block-heading\">EM Is Geweldig Voor Specifieke Afmetingen<\/h3>\n\n\n<p>Afgezien van de nadelen, kan de EM-eenheid echt nuttig zijn voor het dimensioneren van specifieke componenten.<\/p>\n\n\n<p>Stel je wilt een knop maken die ongeveer altijd dezelfde hoeveelheid ruimte inneemt binnen zijn bovenliggende element.<\/p>\n\n\n<p>Je HTML-code zou kunnen zijn:<\/p>\n\n\n<p><code>&lt;button class='button'&gt;Klik op Mij&lt;\/button&gt;<\/code><\/p>\n\n\n<p>Om je knop te stijlen, kun je EM-eenheden gebruiken voor <code>font-size<\/code> en <code>padding<\/code>.<\/p>\n\n\n<p>De CSS ziet er ongeveer zo uit:<\/p>\n\n\n<p><code>.button {<br>&nbsp;&nbsp;&nbsp;&nbsp;font-size: 1em; \/* Grootte relatief aan de tekstgrootte van de ouder *\/<br>&nbsp;&nbsp;&nbsp;&nbsp;padding: 0.5em 1em; \/* Padding schaalt mee met de lettergrootte *\/<br>}<\/code><\/p>\n\n\n<p>De bovenstaande code geeft ons een eenvoudige knop met een beetje ruimte rond de tekst.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1133\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components.webp\" alt=\"EM-afmetingen voor UI-componenten, waarbij de knopvulling schaalt met het lettertype van het bovenliggende element terwijl de verhoudingen consistent blijven.\" class=\"wp-image-48915 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-300x212.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1024x725.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-768x544.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1536x1088.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-600x425.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1200x850.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-730x517.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1460x1034.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-784x555.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1568x1110.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-877x621.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1133;\" \/><\/figure>\n\n\n<p>Als de lettergrootte van het bovenliggende element omhoog schaalt, zullen de lettergrootte en de opvulling van de knop volgen.<\/p>\n\n\n<p>Op deze manier kun je dezelfde visuele balans tussen elementen binnen de parent behouden, zelfs als je van apparaat wisselt of inzoomt.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Waarom EM Gebruiken?<\/h3>\n\n\n<p>Gezien alle verwarring, waarom zou je EM \u00fcberhaupt gebruiken?<\/p>\n\n\n<p>Nou, het biedt wel enkele voordelen:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Contextuele schaling:<\/strong> Elementen schalen op basis van de grootte van hun ouder, waardoor je meer genuanceerde controle krijgt over de afmetingen in je ontwerp.<\/li>\n\n\n\n<li><strong>Componentgebaseerd ontwerp:<\/strong> EM-eenheden zijn geweldig voor het cre\u00ebren van zelfstandige, herbruikbare componenten die dezelfde verhoudingen behouden.<\/li>\n\n\n\n<li><strong>Nauwkeurige controle:<\/strong> Je kunt de groottes op elk niveau van de documentstructuur nauwkeurig afstemmen, zonder grootschalige wijzigingen te hoeven maken.<\/li>\n\n\n\n<li><strong>Responsiviteit:<\/strong> Net als REM laten EM-eenheden je ontwerp toe om zich aan te passen aan verschillende schermformaten en gebruikersvoorkeuren via <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-optimize-your-site-for-mobile\/\" target=\"_blank\" rel=\"noreferrer noopener\">adapt to different screen sizes<\/a>.<\/li>\n\n\n<\/ul>\n\n\n<p>Zoals we hebben gezien, zijn er ook enkele nadelen:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Versterkende effecten<\/strong>: Geneste elementen kunnen leiden tot onverwachte groottes, aangezien EM-waarden beginnen op te stapelen.<\/li>\n\n\n\n<li><strong>Onderhoudsuitdagingen<\/strong>: Het wijzigen van de lettergrootte van een bovenliggend element be\u00efnvloedt alle onderliggende elementen, wat kan leiden tot onbedoelde gevolgen \u2014 zoals enorme lichaamstekst en piepkleine titels.<\/li>\n\n\n\n<li><strong>Complexiteit in grote projecten<\/strong>: Naarmate je project groeit, kan het bijhouden van alle relatieve groottes uitdagend worden.<\/li>\n\n\n<\/ul>\n\n\n<p>Samenvattend kan EM ongelooflijk nuttig zijn voor op componenten gebaseerde ontwerpen en wanneer je precieze controle over elementrelaties nodig hebt. Het is flexibeler dan op pixels gebaseerde afmetingen, maar vereist zorgvuldiger planning dan REM.<\/p>\n\n\n<h2 id=\"h-rem-or-em-which-should-you-use\" class=\"wp-block-heading\">REM of EM: Welke Moet Je Gebruiken?<\/h2>\n\n\n<p>Nou, dat was een hoop interessante informatie. Echter, als je iets bouwt, moet je gewoon weten welke CSS-eenheid je moet gebruiken.<\/p>\n\n\n<p>Hier is ons oordeel:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>REM is de betere keuze voor de meeste projecten<\/strong> omdat het schaalbaarder is en meer controle biedt.<\/li>\n\n\n\n<li><strong>EM kan een waardevol hulpmiddel zijn voor specifieke scenario&#8217;s<\/strong> die geneste stijlen bevatten.<\/li>\n\n\n<\/ul>\n\n\n<p>Het is ook de moeite waard om te vermelden dat zowel REM als EM over het algemeen <a href=\"https:\/\/www.dreamhost.com\/blog\/time-for-website-redesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">beter zijn voor modern ontwerp<\/a> dan absolute eenheden zoals <code>px<\/code>.<\/p>\n\n\n<p>Ze zijn ook praktischer voor het aanpassen van tekstgrootte in vergelijking met andere relatieve eenheden, zoals viewport-eenheden (<code>vh\/vw<\/code>) en percentage (<strong>%<\/strong>).<\/p>\n\n\n<p><strong>Laten we REM vs. EM vanuit een vogelperspectief bekijken:<\/strong><\/p>\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Functie<\/strong><\/td><td><strong>REM<\/strong><\/td><td><strong>EM<\/strong><\/td><\/tr><tr><td>Erfenis<\/td><td>Consistent met het root element<\/td><td>Relatief aan het bovenliggende element<\/td><\/tr><tr><td>Schaalbaarheid<\/td><td>Uitstekend<\/td><td>Beperkter<\/td><\/tr><tr><td>Complexiteit<\/td><td>Lager, vanwege consistentie<\/td><td>Hoger, vanwege contextuele afmetingen<\/td><\/tr><tr><td>Onderhoud<\/td><td>Makkelijk \u2014 veranderingen in root grootte verspreiden zich<\/td><td>Kan lastiger zijn met geneste elementen<\/td><\/tr><tr><td>Toegankelijkheid<\/td><td>Werkt goed met gebruikersvoorkeuren<\/td><td>Kan aanpassingen vereisen<\/td><\/tr><tr><td>Best voor<\/td><td>Wereldwijde afstand en lay-out<\/td><td>Component-specifieke schaling<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h2 id=\"h2_rem-and-em-font-sizing-faqs\" class=\"wp-block-heading\">REM en EM: Veelgestelde Vragen Over Lettergrootte<\/h2>\n\n\n<p>De gids zou veel van de verwarring rond deze zeer vergelijkbare eenheden moeten hebben opgehelderd.<\/p>\n\n\n<p>Maar als je nog vragen hebt, hier is wat je moet weten!<\/p>\n\n\n<h3 class=\"wp-block-heading\">Moet ik REM of EM gebruiken voor responsief ontwerp?<\/h3>\n\n\n<p>REM is over het algemeen de betere keuze voor responsieve ontwerpen omdat het je in staat stelt consistente en schaalbare lay-outs te cre\u00ebren die zich aanpassen aan verschillende schermformaten.<\/p>\n\n\n<p>De enige uitzondering is wanneer je discrete eenheden wilt cre\u00ebren, waarbij alle elementen dezelfde grootteverhouding behouden.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Hoe kan ik complexiteit vermijden bij het gebruik van EM-eenheden?<\/h3>\n\n\n<p>Om complexiteit met EM-eenheden te vermijden, probeer het nestelen van elementen te beperken. Gebruik REM voor globale afmetingen en EM voor kleine aanpassingen binnen specifieke componenten.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Is er een aanbevolen basislettergrootte voor REM?<\/h3>\n\n\n<p>Hoewel er geen strikte regel is, is een gangbare basislettergrootte voor REM <code>16px<\/code>. Je kunt echter elke waarde kiezen die past bij je ontwerpvoorkeuren en <a href=\"https:\/\/www.dreamhost.com\/blog\/make-your-website-accessible\/\" target=\"_blank\" rel=\"noreferrer noopener\">toegankelijkheidseisen<\/a>.<\/p>\n\n\n<h2 id=\"h2_dive-deeper-into-css\" class=\"wp-block-heading\">Duik Dieper In CSS<\/h2>\n\n\n<p>Wil je meer leren over digitaal ontwerp? We hebben veel geweldige leermiddelen voor CSS:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/css-transform\" target=\"_blank\" rel=\"noreferrer noopener\">Kennismaking Met De CSS Transform Eigenschap<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/tailwind-vs-bootstrap\" target=\"_blank\" rel=\"noreferrer noopener\">Tailwind versus Bootstrap: Welk CSS Framework Heb Je Nodig?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/tailwind-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Je Complete Tailwind CSS Primer<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/css-frameworks\/\" target=\"_blank\" rel=\"noreferrer noopener\">16 Populaire CSS Frameworks Die Je Tijd Zullen Besparen (Met Stijl)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/css-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Animaties: Verrijk Je Website Met Deze 17 Opties<\/a><\/li>\n\n\n<\/ul>\n\n\n<h2 id=\"h2_responsive-design-matters\" class=\"wp-block-heading\">Responsief Ontwerp Is Belangrijk<\/h2>\n\n\n<p>De CSS-eenheid is een component dat vaak over het hoofd wordt gezien, zoals we aan het begin van deze gids hebben vermeld.<\/p>\n\n\n<p>Echter, als je een website of app wilt maken die er goed uitziet op elk apparaat en werkt voor elke gebruiker, is het belangrijk om na te denken over de details van het ontwerp.<\/p>\n\n\n<p>Het debat tussen REM of EM doet er uiteindelijk niet echt toe \u2014 Het belangrijkste is dat je site toegankelijk, responsief en gebruiksvriendelijk is!<\/p>\n\n\n<p>Onthoud gewoon dat een mooie interface niets betekent als je site of app niet laadt. Als het gaat om het bieden van de beste ervaring aan je gebruikers, overweeg dan om je hosting te upgraden bij DreamHost.<\/p>\n\n\n<p>We bieden een <strong>uptime-garantie van 100%<\/strong> op al onze <a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">shared hosting plannen<\/a>, met geoptimaliseerde servers en uitstekende beveiligingsfuncties. <a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">Meld je vandaag nog aan<\/a> om zelf het verschil te zien!<\/p>\n\n\n\n<div class=\"article-cta-shared article-cta-small article-cta--product\">\n\t<div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-dedicated-hosting-877x586.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-dedicated-hosting.webp 2x\"  \/><\/div>\n\n\t<a href='https:\/\/www.dreamhost.com\/hosting\/dedicated\/' class='link-top' target='_blank' rel='noopener noreferrer'>\n\t\t<span>Dedicated Hosting<\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" width=\"15\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n\n\t<div class=\"content-btm\">\n\t\t<h2 class=\"h2--md\">\n\t\t\tUltimate in Power, Security, and Control\n\t\t<\/h2>\n\t\t<p class=\"p--md\">\n\t\t\tDedicated servers from DreamHost use the best hardware\r\nand software available to ensure your site is always up, and always fast.\n\t\t<\/p>\n\n\t\t        <a\n            href=\"https:\/\/www.dreamhost.com\/hosting\/dedicated\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            See More                    <\/a>\n\n\t<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Verward over REM en EM? Leer het verschil tussen deze CSS-eenheden in onze super beknopte gids.<\/p>\n","protected":false},"author":1075,"featured_media":48901,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Verward over REM en EM? Leer het verschil tussen deze CSS-eenheden in onze super beknopte gids.","toc_headlines":"[[\"h-rem-vs-em-in-a-nutshell\",\"REM vs. EM in Een Notendop\"],[\"h2_understanding-rem-and-em\",\"REM en EM Begrijpen\"],[\"h2_getting-to-know-rem\",\"REM Leren Kennen\"],[\"h2_getting-to-know-em\",\"Kennismaking Met EM\"],[\"h-rem-or-em-which-should-you-use\",\"REM of EM: Welke Moet Je Gebruiken?\"],[\"h2_rem-and-em-font-sizing-faqs\",\"REM en EM: Veelgestelde Vragen Over Lettergrootte\"],[\"h2_dive-deeper-into-css\",\"Duik Dieper In CSS\"],[\"h2_responsive-design-matters\",\"Responsief Ontwerp Is Belangrijk\"]]","hide_toc":false,"footnotes":""},"categories":[14942],"tags":[],"class_list":["post-69573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-nl"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>REM vs. EM: Hoe Kies Je de Juiste CSS-eenheid - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Verward over REM en EM? Leer het verschil tussen deze CSS-eenheden in onze super beknopte gids.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"REM vs. EM: Hoe Kies Je de Juiste CSS-eenheid\" \/>\n<meta property=\"og:description\" content=\"Verward over REM en EM? Leer het verschil tussen deze CSS-eenheden in onze super beknopte gids.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-26T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T16:11:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Jennifer Le\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jennifer Le\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"REM vs. EM: Hoe Kies Je de Juiste CSS-eenheid - DreamHost Blog","description":"Verward over REM en EM? Leer het verschil tussen deze CSS-eenheden in onze super beknopte gids.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/","og_locale":"en_US","og_type":"article","og_title":"REM vs. EM: Hoe Kies Je de Juiste CSS-eenheid","og_description":"Verward over REM en EM? Leer het verschil tussen deze CSS-eenheden in onze super beknopte gids.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-08-26T14:00:00+00:00","article_modified_time":"2025-05-26T16:11:45+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","type":"image\/webp"}],"author":"Jennifer Le","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jennifer Le","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/"},"author":{"name":"Jennifer Le","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf"},"headline":"REM vs. EM: Hoe Kies Je de Juiste CSS-eenheid","datePublished":"2024-08-26T14:00:00+00:00","dateModified":"2025-05-26T16:11:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/"},"wordCount":1937,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","articleSection":["Websiteontwerp"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/","name":"REM vs. EM: Hoe Kies Je de Juiste CSS-eenheid - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","datePublished":"2024-08-26T14:00:00+00:00","dateModified":"2025-05-26T16:11:45+00:00","description":"Verward over REM en EM? Leer het verschil tussen deze CSS-eenheden in onze super beknopte gids.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","width":1460,"height":1095,"caption":"REM vs. EM: How To Choose the Right CSS Unit"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/rem-vs-em-hoe-kies-je-de-juiste-css-eenheid-nl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"REM vs. EM: Hoe Kies Je de Juiste CSS-eenheid"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf","name":"Jennifer Le","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","caption":"Jennifer Le"},"description":"Jennifer is Designer II at DreamHost and is responsible for branding, design, and UX\/UI. In her free time, she enjoys crafting, cooking, and camping. Follow Jennifer on LinkedIn: https:\/\/www.linkedin.com\/in\/nhijenniferle\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jenniferle\/"}]}},"lang":"nl","translations":{"nl":69573,"en":48900,"es":48882,"pl":52124,"de":54730,"uk":54758,"pt":54800,"ru":54868,"fr":69547,"it":72698},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1075"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=69573"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69573\/revisions"}],"predecessor-version":[{"id":69575,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69573\/revisions\/69575"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/48901"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=69573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=69573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=69573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}