CSS-enheter konverterare
Konvertera mellan px, rem, em och pt. Anpassa din bas-teckenstorlek.
Punkter (pt):12pt
Rotteckensotrlek på webbplatsens <html>-element (webbläsarstandard är 16px)
rem är relativt till rotteckensotrlek (<html>). Webbläsarstandarden är 16px, så 1rem = 16px om inget annat anges.
1pt = 1,333px vid 96 DPI (skärmupplösning). Punkter används främst i utskrifts-CSS och designverktyg.
Vanliga CSS-storlekar
| px | rem | pt | Typisk användning |
|---|---|---|---|
| 8 | 0.5 | 6 | Ikon / border-radius |
| 10 | 0.625 | 7.5 | Kod, liten text |
| 12 | 0.75 | 9 | Liten text / hjälptext |
| 14 | 0.875 | 10.5 | Brödtext (kompakt) |
| 16 | 1 | 12 | Standard brödtext |
| 18 | 1.125 | 13.5 | Brödtext (bekväm) |
| 20 | 1.25 | 15 | Stor text / underrubrik |
| 24 | 1.5 | 18 | H3 / stor rubrik |
| 32 | 2 | 24 | H2 / display-rubrik |
| 48 | 3 | 36 | H1 / hjälteöverskrift |
Vanliga frågor
px (pixlar) är en absolut enhet som alltid visas i samma storlek oavsett användarinställningar. rem (root em) är relativt till rotteckensotrlek (<html>) — med standard 16px: 1rem = 16px, 2rem = 32px. em är relativt till föräldraelementets teckensotrlek. rem föredras för skalbara layouter: om en användare ställer in webbläsarens teckenstorlek till 20px för tillgänglighet, skalas alla rem-värden proportionellt.
Dividera pixelvärdet med din rotteckensotrlek. Med standard 16px: rem = px ÷ 16. Till exempel: 24px ÷ 16 = 1,5rem, 32px ÷ 16 = 2rem. Många utvecklare sätter html { font-size: 62,5%; } för att 1rem = 10px, vilket förenklar beräkningarna.
Med standardbas på 16px: 16px = 1rem. Nyckelvärden: 8px = 0,5rem, 12px = 0,75rem, 24px = 1,5rem, 32px = 2rem, 48px = 3rem.
rem respekterar användarens webbläsar-teckenstorleksinställning, vilket är viktigt för tillgänglighet. Användare med synproblem kan öka basteckenstorleken i webbläsaren, och alla rem-värden skalas automatiskt. px ignorerar den inställningen.