px naar rem omrekenen: px, rem, pt, em, mm
Laatst bijgewerkt:
rem gaat uit van deze grootte, en hier doen em en % dat ook. In CSS volgen die twee het bovenliggende element, dus ze zijn alleen gelijk aan rem als geen bovenliggend element de lettergrootte wijzigt.
1 px = 0,0625 remAlle resultaten
Snelle tabel: Pixel → Root-em
| Waarde (px) | Resultaat (rem) |
|---|---|
| 1 px | 0,0625 rem |
| 8 px | 0,5 rem |
| 10 px | 0,625 rem |
| 12 px | 0,75 rem |
| 14 px | 0,875 rem |
| 16 px | 1 rem |
| 18 px | 1,125 rem |
| 20 px | 1,25 rem |
| 24 px | 1,5 rem |
| 32 px | 2 rem |
| 48 px | 3 rem |
| 64 px | 4 rem |
Over px, rem en pt
CSS legt 1 inch vast op 96 px, dus 1 pt, dat is 1/72 inch, is gelijk aan 1,333 px en 1 mm is gelijk aan 3,78 px. rem en em zijn relatief: 1 rem is de lettergrootte van het root-element, 16 px in alle grote browsers tenzij de bezoeker die wijzigt, dus 24 px is 1,5 rem. Stelt een stylesheet een andere rootgrootte in, voer die dan als basis in boven de velden. em volgt de lettergrootte van het bovenliggende element en is dus alleen gelijk aan rem waar geen bovenliggend element die wijzigt.
Gangbare tekst- en elementgroottes
Bij de standaardbasis van 16 px. CSS legt 1 inch vast op 96 px, dus de kolommen pt en mm gelden bij elke basis; alleen de kolom rem verandert mee.
| Grootte | rem | pt | mm |
|---|---|---|---|
| Tekst van 10 pt (voetnoten) | 0,8333 | 10 | 3,528 |
| Standaardtekstgrootte van een browser | 1 | 12 | 4,233 |
| Tekst van 12 pt in een tekstverwerker | 1 | 12 | 4,233 |
| Standaard h2-kop | 1,5 | 18 | 6,35 |
| Kleinste doelgrootte in WCAG 2.2 (2.5.8) | 1,5 | 18 | 6,35 |
| Standaard h1-kop | 2 | 24 | 8,467 |
| 1 centimeter | 2,362 | 28,35 | 10 |
| 1 inch | 6 | 72 | 25,4 |
Geschiedenis van het punt en de pixel
Letters werden al in punten gemeten lang voor er schermen waren: lettergieters hadden één eenheid nodig om letters te gieten die netjes op één lijn staan. Computers legden het punt vast op 1/72 inch.
- Pierre-Simon Fournier publiceerde een tabel van lettergroottes gemeten in typografische punten: de schaal verdeelde de inch in 12 lijnen en elke lijn in 6 punten.
- De vereniging van lettergieters van de Verenigde Staten voerde een puntensysteem in voor letterkegels, waarin een nonpareille 6 punten is en een pica 12.
- Adobe introduceerde PostScript, waarvan de lengte-eenheid op de pagina 1/72 inch is: in de woorden van Adobe ongeveer hetzelfde als het punt dat in de drukkerij wordt gebruikt.
- CSS 2.1 werd een W3C-aanbeveling. Die legt 1 inch vast op 96 px en 72 pt, dus 1 px is 0,75 pt, en baseert de pixel op één punt van een scherm van 96 dpi, bekeken op armlengte.
Bronnen: