CSS Enheder Konverter
Konverter mellem px, rem, em og pt. Indstil din basis-skriftstørrelse.
Point (pt):12pt
Rodskriftstørrelse på dit websteds <html>-element (browserstandard er 16px)
rem er relativt til rodskriftstørrelsen (<html>). Browserstandarden er 16px, så 1rem = 16px medmindre andet er angivet.
1pt = 1,333px ved 96 DPI (skærmopløsning). Point bruges primært i print-CSS og designværktøjer.
Almindelige CSS-størrelser
| px | rem | pt | Typisk brug |
|---|---|---|---|
| 8 | 0.5 | 6 | Ikon / border-radius |
| 10 | 0.625 | 7.5 | Kode, lille tekst |
| 12 | 0.75 | 9 | Lille 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 / undertitel |
| 24 | 1.5 | 18 | H3 / stor overskrift |
| 32 | 2 | 24 | H2 / displayoverskrift |
| 48 | 3 | 36 | H1 / helteopskrift |
Ofte stillede spørgsmål
px (pixels) er en absolut enhed, der altid vises i samme størrelse uanset brugerindstillinger. rem (root em) er relativt til rodskriftstørrelsen (<html>) — med standard 16px: 1rem = 16px, 2rem = 32px. em er relativt til forælderelementets skriftstørrelse. rem anbefales til skalerbare layouts, da det respekterer brugerens skriftindstillinger i browseren.
Divider pixelværdien med din rodskriftstørrelse. Med standard 16px: rem = px ÷ 16. Fx: 24px ÷ 16 = 1,5rem, 32px ÷ 16 = 2rem, 14px ÷ 16 = 0,875rem. Mange udviklere sætter html { font-size: 62,5%; } for at gøre 1rem = 10px, hvilket gør regnestykket nemmere.
Med standard basis-skriftstørrelse på 16px: 16px = 1rem. Vigtige ankerpunkter: 8px = 0,5rem, 12px = 0,75rem, 24px = 1,5rem, 32px = 2rem, 48px = 3rem. Hvis dit websted bruger en anden basis (fx 10px), skal du genberegne — det er derfor, denne konverter har en indstilling for basis-skriftstørrelse.
rem respekterer brugerens skriftstørrelsespræference i browseren, hvilket er vigtigt for tilgængelighed. Brugere med synsproblemer kan øge basis-skriftstørrelsen i browseren, og alle rem-baserede størrelser skaleres automatisk. px ignorerer denne indstilling. rem gør også responsivt design nemmere: justér rodskriftstørrelsen med en media query, og alle rem-elementer skaleres proportionalt.