Een CSS-lettergrootte omrekenen
Voer de bestaande numerieke grootte in, kies px, em, pt of % en stel de referentielettergrootte in pixels in. Kies vervolgens Lettergrootte omrekenen. Het resultaatpaneel toont dezelfde berekende grootte in alle vier ondersteunde eenheden. Elke rij heeft een kopieerknop, zodat je waarden zoals 1.5em of 18pt direct in een stylesheet kunt plakken.
De referentie is van belang voor em en percentages. Dit is de pixelgrootte die deze pagina als 1em en 100% beschouwt. Heeft een bovenliggend element font-size: 20px, gebruik dan 20 als referentie voor een onderliggende lettergrootte in em of %. Gebruikt je project een andere grootte, pas de referentie dan aan en reken opnieuw om. De verhouding px/pt verandert niet met de referentie.
Wat de converter berekent
Elke invoer wordt eerst omgezet naar pixels. Een px-invoer staat al in pixels. Een em-invoer wordt vermenigvuldigd met de referentie. Een percentage wordt vermenigvuldigd met de referentie en gedeeld door 100. Punten gebruiken de verhouding van absolute CSS-eenheden: 1in is 96px en 72pt, dus 1pt is 96 ÷ 72px. De pixelwaarde wordt daarna in elke doeleenheid uitgedrukt.
De formules zijn px = em × referentie, px = % × referentie ÷ 100 en px = pt × 96 ÷ 72. De omgekeerde formules delen door dezelfde factoren. Berekeningen behouden hun interne nauwkeurigheid; getoonde en gekopieerde waarden gebruiken een praktische afronding zonder resten zoals 0.30000000000000004. Heel kleine niet-nulwaarden blijven zichtbaar in plaats van nul te worden.
Twee gecontroleerde omrekenvoorbeelden
Voorbeeld 1: voer 24 in, kies px en laat de referentie op 16px. De resultaten zijn 24px, 1.5em, 18pt en 150%. Het em-resultaat komt van 24 ÷ 16, punten van 24 × 72 ÷ 96 en het percentage van 24 ÷ 16 × 100. Omrekenen van 1.5em met dezelfde referentie van 16px geeft weer 24px.
Voorbeeld 2: voer 125 in, kies % en stel de referentie in op 20px. Het resultaat is 25px, 1.25em, 18.75pt en 125%. Verander alleen de referentie naar 16px en reken opnieuw: dezelfde 125% wordt nu 20px, 1.25em en 15pt. Dit laat zien waarom een relatieve waarde niet nauwkeurig kan worden omgerekend zonder de lettergroottecontext.
Wanneer deze tool handig is
Gebruik de converter om een ontwerp in pixels naar relatieve CSS om te zetten, een typografiewaarde te controleren tegen een bovenliggende lettergrootte of een puntwaarde voor drukwerk naar een webstylesheet om te rekenen. Ook bij geërfde CSS is hij nuttig: voer de berekende grootte van het bovenliggende element als referentie in om de em- of procentwaarde te bepalen.
De tool houdt de context bewust zichtbaar in plaats van aan te nemen dat elk project 16px gebruikt. Zestien pixels is een gangbare browserstartwaarde, maar makers en gebruikers kunnen letterinstellingen wijzigen. Noteer de referentie naast de omgerekende waarde als een andere ontwikkelaar de berekening moet kunnen herhalen.
Beperkingen en veelgemaakte fouten
Dit is een converter voor lettergroottes, geen algemene CSS-parser. Hij leest geen calc(), clamp(), variabelen, stylesheets, rem, viewport- of containereenheden of geërfde DOM-stijlen. Bij em hangt de relevante referentie af van de CSS-eigenschap; deze pagina gebruikt de expliciete pixelreferentie die je opgeeft. Hij inspecteert het echte bovenliggende element niet.
Percentages hangen ook van de eigenschap af. Deze pagina interpreteert % alleen als lettergroottepercentage, waarbij 100% de opgegeven referentiegrootte is. Gebruik het percentage niet voor breedte, hoogte, transformaties of een andere eigenschap met een ander referentiekader. Negatieve lettergroottes en een referentie van nul worden afgewezen omdat ze hier geen geldige omzetting geven.
Punten volgen CSS-eenheden, niet de pixelafmetingen van tekst in een afbeeldingseditor of printerpixels. De zichtbare hoogte van een letter hangt ook af van lettertypematen, regelhoogte en rendering. Gelijke berekende lettergroottes garanderen daarom niet dat letters in verschillende lettertypen er hetzelfde uitzien.
De gekopieerde uitvoer gebruiken
Kopieer de eenheid die bij je stylesheet past en test die in het echte onderdeel en met vergrote browsertekst. Relatieve eenheden kunnen schaalbare typografie ondersteunen, maar omrekenen alleen garandeert geen toegankelijk contrast, regellengte, tekstomloop of zoomgedrag. Bewaar de oorspronkelijke waarde of ontwerptoken als een afgeronde CSS-waarde moet worden beoordeeld.
Alle berekeningen worden in deze browser uitgevoerd. De pagina vereist geen account en verstuurt de ingevoerde waarden niet als analyseparameters. Bij een geblokkeerd klembord blijft het resultaat behouden: selecteer de zichtbare waarde en kopieer met je browser of toetsenbord.
Alle ondersteunde omrekeningen van CSS-lettergrootte-eenheden
| Omrekenrichting | Formule bij een referentiewaarde van 16 px | Voorbeeld |
|---|---|---|
| Pixels naar Em (px naar em) | em = px × 0.0625 | 1px = 0.0625em |
| Pixels naar Punten (px naar pt) | pt = px × 0.75 | 1px = 0.75pt |
| Pixels naar Procent (px naar %) | % = px × 6.25 | 1px = 6.25% |
| Em naar Pixels (em naar px) | px = em × 16 | 1em = 16px |
| Em naar Punten (em naar pt) | pt = em × 12 | 1em = 12pt |
| Em naar Procent (em naar %) | % = em × 100 | 1em = 100% |
| Punten naar Pixels (pt naar px) | px ≈ pt × 1.333333333 | 1pt ≈ 1.333333333px |
| Punten naar Em (pt naar em) | em ≈ pt × 0.08333333333 | 1pt ≈ 0.08333333333em |
| Punten naar Procent (pt naar %) | % ≈ pt × 8.333333333 | 1pt ≈ 8.333333333% |
| Procent naar Pixels (% naar px) | px = % × 0.16 | 1% = 0.16px |
| Procent naar Em (% naar em) | em = % × 0.01 | 1% = 0.01em |
| Procent naar Punten (% naar pt) | pt ≈ % × 0.12 | 1% ≈ 0.12pt |
Veelgestelde vragen over CSS-lettereenheden
Is 16px altijd gelijk aan 1em?
Alleen als de relevante referentielettergrootte 16px is. Bij een referentie van 20px is 1em gelijk aan 20px. Voer de echte referentie in van het element waaraan je werkt.
Waarom verandert de referentie em en % maar niet pt?
Em en lettergroottepercentages zijn relatief aan een lettergroottecontext. CSS-px en pt gebruiken een vaste verhouding voor absolute eenheden, dus 96px = 72pt blijft gelden ongeacht het referentieveld.
Kan ik het %-resultaat voor breedte gebruiken?
Nee. De converter definieert % als lettergroottepercentage. Breedtepercentages gebruiken een omvattend blok en vereisen een andere referentie en opmaakcontext.
Waarom kan de gekopieerde waarde afgerond zijn?
De interface volgt de praktische weergaveregel van de site en verwijdert onnodige decimale ruis. De converter rekent met de onafgeronde waarde; test de gekopieerde waarde in het doelonderdeel als een uitzonderlijk fijne typografische schaal essentieel is.
Kan dit ook rem omrekenen?
Nee. Deze pagina is bewust beperkt tot px, em, pt en lettergrootte-%. Een rem-waarde gebruikt de berekende lettergrootte van het hoofdelement, terwijl em een andere context kan gebruiken.