PX naar EM Converter (Standaard 16px)

PX naar EM:

Formule: (Pixelwaarde) / (Basislettergrootte) = EM-waarde

Voorbeeld: 32px / 16px = 2 EM

PX naar EM Conversietabel

Pixels (px)EM
80.5
120.75
161
201.25
241.5
322

CSS-eenheden: Pixels vs. EM’s

  • Pixels (px): Pixels zijn absolute eenheden in CSS. Ze vertegenwoordigen een vaste grootte op het scherm, ongeacht apparaat of schermresolutie. Het gebruik van pixels biedt precieze controle over elementgroottes.
  • EM’s (em): EM’s zijn relatieve eenheden. Hun grootte hangt af van de lettergrootte van hun bovenliggende element. De standaard lettergrootte in de meeste browsers is 16px, dus 1em is aanvankelijk gelijk aan 16px. EM’s zijn handig voor het maken van schaalbare en responsieve ontwerpen.

Waarom PX naar EM omzetten?

  1. Toegankelijkheid: Gebruikers kunnen tekst in hun browsers vergroten. Ontwerpen die EM’s gebruiken schalen evenredig mee met deze tekstgrootte-aanpassingen, waardoor ze toegankelijker zijn voor gebruikers met visuele beperkingen.
  2. Responsiviteit: EM’s helpen bij het maken van layouts die soepel aanpassen aan verschillende schermformaten. Omdat EM’s gebaseerd zijn op lettergroottes, worden elementen natuurlijk aangepast wanneer de viewport (het zichtbare gebied van een website) verandert.
  3. Flexibiliteit: Geneste elementen die EM’s gebruiken, stellen je in staat om de maatverhouding in een ontwerp gemakkelijk te beheersen. Het aanpassen van de basislettergrootte beïnvloedt voorspelbaar alle elementen die EM’s gebruiken.

De Conversieformule

Om pixels naar EM’s om te zetten, gebruik je de volgende formule:

EM’s = Pixels / Doel Lettergrootte (in pixels)

Voorbeeld:

Als je 24px naar EM’s wilt omzetten, en je basislettergrootte is 16px (standaard):

  • EM’s = 24px / 16px = 1.5em

Belangrijke opmerking: In complexere layouts, als het bovenliggende element zelf een lettergrootte heeft ingesteld met EM’s, worden berekeningen ingewikkelder omdat geneste EM’s relatief zijn aan hun directe ouder.

Praktische Overwegingen

  • Basislettergrootte: Het is gebruikelijk om een basislettergrootte in te stellen op het html- of body-element. Alle EM-berekeningen zijn dan gebaseerd op deze waarde.
  • Eenheden mengen: Hoewel EM’s aanpasbaarheid bevorderen, wordt vaak een mix van px en EM’s gebruikt voor fijnere controle in bepaalde situaties.
  • REM: Een andere relatieve eenheid, REM’s, is gebaseerd op de root lettergrootte (meestal het html-element). Ze kunnen berekeningen in complexe layouts vereenvoudigen.