CSS-enheter konverter
Konverter mellom px, rem, em og pt. Tilpass din basis-skriftstørrelse.
Punkt (pt):12pt
Rotskriftstørrelse på nettstedets <html>-element (nettleserstandard er 16px)
rem er relativt til rotfont-størrelsen (<html>). Nettleserstandarden er 16px, så 1rem = 16px med mindre annet er angitt.
1pt = 1,333px ved 96 DPI (skjermoppløsning). Punkter brukes hovedsakelig i utskrifts-CSS og designverktøy.
Vanlige CSS-størrelser
| px | rem | pt | Typisk bruk |
|---|---|---|---|
| 8 | 0.5 | 6 | Ikon / border-radius |
| 10 | 0.625 | 7.5 | Kode, liten tekst |
| 12 | 0.75 | 9 | Liten tekst / hint |
| 14 | 0.875 | 10.5 | Brødtekst (kompakt) |
| 16 | 1 | 12 | Standard brødtekst |
| 18 | 1.125 | 13.5 | Brødtekst (komfortabel) |
| 20 | 1.25 | 15 | Stor tekst / undertittel |
| 24 | 1.5 | 18 | H3 / stor overskrift |
| 32 | 2 | 24 | H2 / display-overskrift |
| 48 | 3 | 36 | H1 / hoved-overskrift |
Ofte stilte sporsmal
px (piksler) er en absolutt enhet som alltid vises i samme størrelse uavhengig av brukerinnstillinger. rem (root em) er relativt til rotskriftstørrelsen (<html>) — med standard 16px: 1rem = 16px, 2rem = 32px. em er relativt til overordnet elements skriftstørrelse. rem anbefales for skalerbare oppsett da det respekterer brukerens nettleserinnstillinger.
Del pikselverdi med rotskriftstørrelsen. Med standard 16px: rem = px ÷ 16. For eksempel: 24px ÷ 16 = 1,5rem, 32px ÷ 16 = 2rem. Mange utviklere setter html { font-size: 62,5%; } slik at 1rem = 10px, noe som forenkler beregningen.
Med standard basestørrelse på 16px: 16px = 1rem. Nøkkelankerverdier: 8px = 0,5rem, 12px = 0,75rem, 24px = 1,5rem, 32px = 2rem, 48px = 3rem.
rem respekterer brukerens nettleser-skriftstørrelsesinnstilling, noe som er viktig for tilgjengelighet. Brukere med synsvansker kan øke basis-skriftstørrelsen i nettleseren, og alle rem-verdier skaleres automatisk. px ignorerer denne innstillingen.