PX to REM Converter
Updated Free mock REST & WebSocket APIs
Type a pixel value to get rem, em, pt and percent — or type in any box and the others update. Set your root font size if it isn't the browser default of 16px, and convert a whole CSS snippet at once.
24px = 1.5rem = 18pt (at 16px root)
Common values at 16px
| px | rem | pt | Tailwind |
|---|---|---|---|
| 1px | 0.0625rem | 0.75pt | — |
| 2px | 0.125rem | 1.5pt | — |
| 4px | 0.25rem | 3pt | p-1 |
| 6px | 0.375rem | 4.5pt | — |
| 8px | 0.5rem | 6pt | p-2 |
| 10px | 0.625rem | 7.5pt | — |
| 12px | 0.75rem | 9pt | p-3 |
| 13px | 0.8125rem | 9.75pt | — |
| 14px | 0.875rem | 10.5pt | — |
| 15px | 0.9375rem | 11.25pt | — |
| 16px | 1rem | 12pt | p-4 |
| 18px | 1.125rem | 13.5pt | — |
| 20px | 1.25rem | 15pt | p-5 |
| 22px | 1.375rem | 16.5pt | — |
| 24px | 1.5rem | 18pt | p-6 |
| 28px | 1.75rem | 21pt | p-7 |
| 32px | 2rem | 24pt | p-8 |
| 36px | 2.25rem | 27pt | p-9 |
| 40px | 2.5rem | 30pt | p-10 |
| 44px | 2.75rem | 33pt | p-11 |
| 48px | 3rem | 36pt | p-12 |
| 56px | 3.5rem | 42pt | p-14 |
| 64px | 4rem | 48pt | p-16 |
| 72px | 4.5rem | 54pt | p-18 |
| 80px | 5rem | 60pt | p-20 |
| 96px | 6rem | 72pt | p-24 |
| 128px | 8rem | 96pt | p-32 |
🔒 Calculated instantly in your browser.
How to convert px to rem
- Check the root font size — 16px unless your CSS sets html { font-size }.
- Type a value in px (or any other unit); all the other units update instantly.
- Use the table for common sizes, or paste CSS below to rewrite every px value as rem.
The formula
rem = px ÷ root font size. With the default 16px root: 24px ÷ 16 = 1.5rem, 14px ÷ 16 = 0.875rem. The other way round, px = rem × 16.
| px | rem (16px root) | rem (10px root) | pt |
|---|---|---|---|
| 10px | 0.625rem | 1rem | 7.5pt |
| 12px | 0.75rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1.4rem | 10.5pt |
| 16px | 1rem | 1.6rem | 12pt |
| 18px | 1.125rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | 2rem | 15pt |
| 24px | 1.5rem | 2.4rem | 18pt |
| 32px | 2rem | 3.2rem | 24pt |
| 48px | 3rem | 4.8rem | 36pt |
rem vs em vs px
- px is fixed. It ignores the user's browser font-size setting.
- rem is relative to the root (
html) font size, so everything scales together when a user picks a larger default font — the main accessibility reason to use rem for font sizes and spacing. - em is relative to the parent's font size and compounds when nested (1.2em inside 1.2em = 1.44× the root). Handy for padding that should scale with a component's own text.
- pt is a print unit: 1pt = 1/72 inch and 1px = 1/96 inch in CSS, so 12pt = 16px.
The 62.5% trick
Setting html { font-size: 62.5%; } makes 1rem = 10px (62.5% of 16px), so 14px is simply 1.4rem. It still respects user settings, because it's a percentage. Set the root size above to 10 to convert for such projects.
Related tools
Embed this tool on your site
Browse all embeddable tools →Free for blogs, HR, payroll and contractor sites: copy one snippet — the widget sizes itself and matches your colors.
Get the embed code
Frequently asked questions
How many px is 1rem?
16px by default, because browsers use a 16px root font size. If your CSS changes the html font-size, 1rem equals that size instead.
Should I use rem or px for media queries?
Use em (or rem) — em-based media queries respond to the user's font-size setting in every browser. 48em = 768px at the default size.
Do I need rem for borders?
No. 1px hairline borders are usually kept in px so they stay crisp; the snippet converter leaves 0 and 1px values alone.
How do I convert rem to px?
Multiply by the root font size: 1.5rem × 16 = 24px. Type into the rem box above, or use the rem to px converter.
Your business here? Sponsor this tool from $16/week. See placements