PX to REM Converter
Convert pixel sizes to rem, or back, against whatever root font size your site uses, with a reference table for the sizes you reach for most.
# Root font size 16px
12px = 0.75rem
14px = 0.875rem
16px = 1rem
18px = 1.125rem
24px = 1.5rem
32px = 2rem
48px = 3rem
1px = 0.0625rem
2px = 0.125rem
4px = 0.25rem
8px = 0.5rem
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
28px = 1.75rem
32px = 2rem
40px = 2.5rem
48px = 3rem
56px = 3.5rem
64px = 4rem
80px = 5rem
96px = 6remOutput is valid and updates as you type.
Fix the highlighted fields to update the output.
Convert pixel sizes to rem against the root font size your site actually uses, and keep the table of the sizes you reach for.
How to use
- Type the sizes, separated by spaces or commas. A unit can be written out; without one the direction decides.
- Set the root font size. 16 is the browser default; if your CSS sets
html { font-size: 62.5% }it is 10. - Switch direction to go from rem back to pixels.
- Keep the reference table on. It converts the sizes most designs use at the same root, which is usually what you came for.
Example
At a 16 pixel root:
12px = 0.75rem
14px = 0.875rem
16px = 1rem
24px = 1.5rem
32px = 2remAt a 10 pixel root the same 24 pixels is 2.4rem, which is the entire reason this conversion has to know your root size.
Pitfalls
- rem is relative to the root element, not the parent. That is the difference from em, and the reason rem does not compound when you nest things.
- A user who sets their browser text size larger changes the root. Sizing type in rem is what lets that setting work; sizing it in pixels overrides the user.
html { font-size: 62.5% }makes 1rem equal 10 pixels and the arithmetic easy, at the cost of breaking any library that assumes 16 and of shrinking text for a user who has chosen a larger default.- Never set
html { font-size: 16px }. It looks harmless and it ignores the user’s own text size preference entirely. - Borders, shadows and hairlines are usually better in pixels. Scaling a one pixel border with the text makes it blurry rather than larger.
- Media query lengths in rem are measured against the initial root, not your root: a query at
40remis 640 pixels whateverhtmlsays later. - Rounding matters less than it looks. 0.875rem and 0.88rem differ by a twentieth of a pixel at a 16 pixel root; use whatever your team reads more easily.
- Sub-pixel sizes are fine. Browsers lay out in fractions and only round when painting.
Compatibility
rem is supported by every browser in use, since 2011. The conversion here is arithmetic, not a browser feature, so it holds anywhere. The tool runs entirely in your browser.
Frequently asked questions
Which should I use, px or rem?
rem for type and spacing that should scale with the user’s text size; px for borders and anything that should stay one device pixel.
Is the 62.5% trick a good idea?
It makes the numbers easy and it fights the user’s own setting. Most teams that adopt it eventually regret the second part.
Why does my rem size look wrong?
Something has changed the root font size, or you are thinking of em. Check the
html element in devtools.What about em?
em is relative to the element’s own font size, so nested values multiply. The unit converter covers it with the parent size stated.
Should I round?
To a length you can read. The visual difference between three and four decimals is nothing.