Lettergrootte-omzetter
Reken een lettergrootte om tussen punten, pixels, em, rem, procent, millimeters, inches en picas. De omzetter volgt de CSS-definities — 96 pixels en 72 punten per inch — en laat je de basis- en oudergrootte instellen waarvan em, rem en % afhangen.
Browsers beginnen op 16 px. Verander deze als je stylesheet een andere grootte instelt op het html-element of op het bovenliggende element.
12 pt in elke eenheid
| Eenheid | Grootte | CSS | Kopiëren |
|---|---|---|---|
| Punten (pt) | 12 | 12pt | |
| Pixels (px) | 16 | 16px | |
| em | 1 | 1em | |
| rem | 1 | 1rem | |
| Procent (%) | 100 | 100% | |
| Millimeter (mm) | 4,2333 | 4.2333mm | |
| Centimeter (cm) | 0,4233 | 0.4233cm | |
| Inch (in) | 0,1667 | 0.1667in | |
| Picas (pc) | 1 | 1pc |
Berekening
- 12 pt × 96 ÷ 72 = 16 px
- 16 px ÷ 16 px = 1 em
- 16 px ÷ 16 px = 1 rem
- 16 px × 25,4 ÷ 96 = 4,2333 mm
Word op Windows en Google Docs geven typegroottes in punten en rekenen een inch als 96 pixels, dus bij 100% zoom ziet 12 punt tekst er even groot uit als 16 px tekst in een browser.
Veelgebruikte puntgroottes
em, rem en % gebruiken de basis- en oudergroottes hierboven.
| Punten | Pixels | em | rem | % | mm |
|---|---|---|---|---|---|
| 6 | 8 | 0,5 | 0,5 | 50 | 2,12 |
| 7 | 9,33 | 0,583 | 0,583 | 58,3 | 2,47 |
| 8 | 10,67 | 0,667 | 0,667 | 66,7 | 2,82 |
| 9 | 12 | 0,75 | 0,75 | 75 | 3,18 |
| 10 | 13,33 | 0,833 | 0,833 | 83,3 | 3,53 |
| 10,5 | 14 | 0,875 | 0,875 | 87,5 | 3,7 |
| 11 | 14,67 | 0,917 | 0,917 | 91,7 | 3,88 |
| 12 | 16 | 1 | 1 | 100 | 4,23 |
| 14 | 18,67 | 1,167 | 1,167 | 116,7 | 4,94 |
| 16 | 21,33 | 1,333 | 1,333 | 133,3 | 5,64 |
| 18 | 24 | 1,5 | 1,5 | 150 | 6,35 |
| 20 | 26,67 | 1,667 | 1,667 | 166,7 | 7,06 |
| 22 | 29,33 | 1,833 | 1,833 | 183,3 | 7,76 |
| 24 | 32 | 2 | 2 | 200 | 8,47 |
| 28 | 37,33 | 2,333 | 2,333 | 233,3 | 9,88 |
| 32 | 42,67 | 2,667 | 2,667 | 266,7 | 11,29 |
| 36 | 48 | 3 | 3 | 300 | 12,7 |
| 48 | 64 | 4 | 4 | 400 | 16,93 |
| 72 | 96 | 6 | 6 | 600 | 25,4 |
Zo gebruik je de lettergrootte-omzetter
- 1. Voer een grootte en de eenheid in. Typ 12 en kies punten, of 24 en kies pixels — elk van de negen eenheden kan het startpunt zijn.
- 2. Stel de referentiegroottes in als je dat nodig hebt. rem wordt gemeten aan de basisgrootte (
html), en em en % aan die van het bovenliggende element. Beide beginnen op 16 px, de standaard van de browser. - 3. Lees de grootte in elke eenheid af. Elke rij geeft de waarde en de CSS om te plakken, met een kopieerknop, en de berekening toont elke omrekening via pixels.
- 4. Bekijk de tabel met veelgebruikte groottes. De puntgroottes uit een tekstverwerkermenu, van 6 tot 72, staan vermeld met hun equivalenten in pixels, em, rem, procent en millimeters.
De omrekenregels
CSS legt de fysieke eenheden onderling vast: een inch is 96 pixels, 72 punten, 6 picas of 25,4 millimeter. Een punt is dus precies 4/3 van een pixel. De relatieve eenheden hebben nog één getal nodig — de lettergrootte waaraan ze gemeten worden.
| Eenheid | Naar pixels | Van pixels |
|---|---|---|
| Punten (pt) | px = pt × 96 ÷ 72 | pt = px × 72 ÷ 96 |
| Picas (pc) | px = pc × 16 | pc = px ÷ 16 |
| Millimeter (mm) | px = mm × 96 ÷ 25,4 | mm = px × 25,4 ÷ 96 |
| Inch (in) | px = in × 96 | in = px ÷ 96 |
| em | px = em × grootte van het bovenliggende element | em = px ÷ grootte van het bovenliggende element |
| rem | px = rem × basisgrootte | rem = px ÷ basisgrootte |
| Procent (%) | px = % × grootte van het bovenliggende element ÷ 100 | % = px ÷ grootte van het bovenliggende element × 100 |
Basis- en oudergroottes zijn in pixels; beide zijn 16 px tenzij een stylesheet ze verandert.
Met de standaardwaarden is 12 pt gelijk aan 12 × 96 ÷ 72 = 16 px. Dan geeft 16 ÷ 16 1 em, 1 rem en 100%, en geeft 16 × 25,4 ÷ 96 4,2333 mm. Zet de oudergrootte op 20 px en dezelfde 16 px wordt 0,8 em en 80% — maar het blijft 1 rem, omdat rem het bovenliggende element negeert.
Waarom 12 pt gelijk is aan 16 px
Een punt is 1/72 van een inch en een CSS-pixel is 1/96 van een inch, dus 12 punten is 12/72 = 1/6 inch, wat 96 ÷ 6 = 16 pixels is. Word op Windows en Google Docs rekenen een inch ook als 96 pixels op het scherm, dus bij 100% zoom ziet 12 punt tekst er even groot uit als 16 px tekst in een browser — en 16 px is de grootte die browsers gebruiken voor tekst die geen stylesheet heeft ingesteld.
Een CSS-pixel is niet noodzakelijk één stip van je scherm. Op een scherm met hoge pixeldichtheid beslaat één CSS-pixel meerdere schermpixels, en de browser schaalt elke eenheid samen, dus de verhoudingen hierboven gelden altijd. LaTeX is de enige gangbare uitzondering op de inch van 72 punten: zijn pt is het drukkerspunt, 72,27 per inch, dus een LaTeX-12pt is ongeveer 0,4% kleiner dan 12 pt in Word of CSS. TeX's bp (“big point”) is het punt van 72 per inch dat deze omzetter gebruikt.
Lettergroottes voor academische papers
Stijlgidsen geven typegroottes in punten, dus de lettergrootte van een paper hoeft nooit omgerekend te worden — maar het helpt om te weten wat elke gids werkelijk vraagt:
- APA 7 noemt lettertype-en-grootte-combinaties in plaats van één grootte: 11 punt Calibri, 11 punt Arial, 10 punt Lucida Sans Unicode, 12 punt Times New Roman, 11 punt Georgia of 10 punt Computer Modern.
- MLA 9 vraagt om een goed leesbaar lettertype waarvan de cursieve vorm contrasteert met de gewone stijl, op een grootte tussen 11 en 13 punt, tenzij je docent anders aangeeft.
- Turabian (Chicago-stijl voor studenten): het officiële tipsheet raadt 12 punt Times New Roman of Calibri aan, of 11 punt Arial.
Lettertypes zien er bij dezelfde puntgrootte anders uit — Arial leest groter dan Times New Roman — daarom koppelt APA elk lettertype aan zijn eigen grootte. Voor marges, regelafstand, koppen en de rest van de pagina, zie Een academisch werkstuk opmaken in APA, MLA en Chicago.
Veelgestelde vragen
- Hoeveel pixels is 12 pt?
- 16 pixels. CSS definieert een inch als 96 pixels en als 72 punten, dus één punt is 4/3 pixel en 12 × 4/3 = 16. Dezelfde regel maakt 10 pt 13,33 px, 11 pt 14,67 px en 14 pt 18,67 px.
- Hoe reken ik px om naar rem?
- Deel door de basislettergrootte. Bij de standaard 16 px is 24 px gelijk aan 24 ÷ 16 = 1,5 rem en 14 px aan 0,875 rem. Als je stylesheet het
html-element een andere grootte geeft, vul je die in als basisgrootte, en de omzetter gebruikt die. - Wat is het verschil tussen em en rem?
- Beide zijn relatief ten opzichte van een lettergrootte, maar van een andere. rem verwijst altijd naar het basiselement (
html), dus 1,5 rem is overal op de pagina even groot. em verwijst naar het bovenliggende element, dus 1,5 em binnen een vak waarvan de tekst al 1,5 em is, komt uit op 2,25 keer de basisgrootte — em stapelt op, rem niet. - Is 1 em altijd 16 px?
- Alleen standaard. 1 em is gelijk aan de lettergrootte van het bovenliggende element en 1 rem aan die van de basis, en browsers beginnen beide op 16 px. Een lezer die de standaard tekstgrootte in zijn browserinstellingen verhoogt, verandert dat startpunt; daarom volgt tekst in rem of em de keuze van de lezer en tekst in px niet.
- Hoe groot is 12 pt in millimeters?
- 12 punten is 1/6 inch, of ongeveer 4,23 mm. Dat is de grootte van het em-vak van het lettertype, de ontwerpruimte waarin elke letter wordt getekend, niet de hoogte van een hoofdletter; die is in gangbare tekstlettertypes ongeveer tweederde daarvan.
- Waarom lijkt dezelfde puntgrootte in sommige lettertypes groter?
- De puntgrootte bepaalt het em-vak, niet de zichtbare letters. Lettertypes tekenen hun letters in verschillende verhoudingen binnen dat vak — Arial heeft hogere kleine letters dan Times New Roman — dus 12 punt Arial lijkt groter. Daarom koppelt APA 7 11 punt Arial aan 12 punt Times New Roman in plaats van één grootte voor elk lettertype.