Zo gebruik je het
- Kies de invoereenheid en voer de lettergrootte in.
- Stel zo nodig de basislettergrootte in; browsers gebruiken standaard 16 px.
- Bekijk de uitkomst en de voorbeeldtekst.
Opties uitgelegd
- CSS-pixel
- px is een CSS-lengte-eenheid; de fysieke grootte op het scherm hangt af van display en zoom.
- Punt
- Drukwerk gebruikt punten; 12 pt is 4,23 mm.
- em en procent
- Deze waarden zijn relatief aan de basislettergrootte. rem is relatief aan de root-lettergrootte.
Veelgebruikte groottes
| pt | px | em (basis 16 px) |
|---|---|---|
| 9 | 12 | 0,75 |
| 10,5 | 14 | 0,875 |
| 12 | 16 | 1 |
| 14 | 18,67 | 1,1667 |
| 18 | 24 | 1,5 |
| 24 | 32 | 2 |
Webgroottes in pixels, punten en rem
Met de browserstandaard van 16 px als basisgrootte:
| Pixels | Punten | rem / em | Typisch gebruik |
|---|---|---|---|
| 12 px | 9 pt | 0,75 rem | Bijschriften, voetnoten |
| 14 px | 10,5 pt | 0,875 rem | Kleine tekst, labels |
| 16 px | 12 pt | 1 rem | Lopende tekst |
| 18 px | 13,5 pt | 1,125 rem | Grote lopende tekst, inleidende alinea’s |
| 20 px | 15 pt | 1,25 rem | Kleine koppen |
| 24 px | 18 pt | 1,5 rem | Koppen |
| 32 px | 24 pt | 2 rem | Paginatitels |
Welke eenheid gebruik je
pt (punten) zijn voor drukwerk en tekstverwerkers: 1 pt is 1/72 inch, dus tekst van 12 pt heeft op elke printer dezelfde fysieke grootte.
px (CSS-pixels) zijn voor schermen: 1 px is gedefinieerd als 1/96 inch bij normale zoom, waardoor 12 pt gelijk is aan 16 px.
rem en em zijn relatief. 1 rem is de root-lettergrootte (meestal 16 px); 1 em is de lettergrootte van het bovenliggende element. Met rem voor tekst krijgen mensen die in hun browser een groter standaardlettertype instellen overal grotere tekst.
Millimeters helpen bij het nabootsen van een gedrukt voorbeeld: meet de hoogte van een hoofdletter en de lettergrootte van de lopende tekst is ruwweg 1,4 keer zoveel, afhankelijk van het lettertype.
Veelgestelde vragen
Is 16 px hetzelfde als 12 pt?
De gangbare CSS- en drukwerkbenadering komt ongeveer overeen: 16 px is 12 pt bij 96 dpi, maar het scherm toont het niet fysiek identiek.
Waarvoor gebruik ik em en rem?
em is relatief aan de context; rem is relatief aan de root. rem maakt een consistente schaal in CSS vaak eenvoudiger.
Wat doet de basislettergrootte?
Die bepaalt hoe relatieve eenheden zoals em en procenten worden omgerekend.
Privacy
Deze tool draait volledig in je browser. Je bestanden en tekst worden op je eigen apparaat verwerkt en nooit naar onze servers geüpload.