What PX to REM Converter does
rem is the unit that respects the reader. A size in px is fixed no matter what someone has set as their browser's default text size, while a size in rem scales with it — which matters a great deal to anyone who has increased that setting because they need larger text. This converter moves in both directions at whatever root font size you are working with, and includes a table of the values a real type scale uses, so you can look up 1.125rem rather than recalculating it every time.
How to get your result
- 1
Choose the direction — px to rem, or rem back to px.
- 2
Enter the value you want to convert.
- 3
Set the root font size, which is 16px unless your stylesheet changes it.
- 4
Copy the converted value, or use the table for the standard steps in a type scale.
Why rem is the accessible default
Browsers let people change their default font size, and a meaningful number do — because of low vision, because of a high-resolution display, or simply out of preference. That setting changes what 1rem resolves to, so a rem-based layout grows with the reader. A px-based layout ignores the setting completely, and text stays exactly as small as the designer made it. Note that this is a different mechanism from page zoom, which scales everything including px values; the font-size preference is the one px silently defeats, and it is the one people with low vision are most likely to have set. The practical rule that follows is to use rem for anything tied to reading — font sizes, the padding and margins around text, gaps, and media query breakpoints — and reserve px for things that genuinely should not scale, such as a 1px border or a precise shadow offset, where scaling produces blurry sub-pixel edges without helping anyone.
rem, em, and the 62.5% trick
The difference between rem and em is what they are relative to, and it decides which one to reach for. rem is always relative to the root element, so 1rem means the same thing anywhere in the document. em is relative to the font size of the element it is used on, which makes it compound through nesting: a list styled at 0.9em inside another 0.9em list computes to 0.81em, and a third level shrinks again. That compounding is a bug when it is unexpected and a feature when it is not — em is genuinely the right choice for something that should scale with its own element, such as button padding that tracks the button's text size. As for html { font-size: 62.5% }, which makes 1rem equal 10px and the arithmetic trivial: it works, but it does so by overriding the reader's chosen default, which discards the main reason to use rem in the first place. Leave the root alone and convert the numbers instead.
Where this helps
Converting a design handoff to CSS
Design tools work in pixels, so translating a spec into rem is the first step in building an accessible stylesheet.
Building a type scale
Expressing every heading size in rem keeps the whole scale proportional to the reader's base size.
Converting breakpoints
em and rem breakpoints trigger earlier for readers with larger text, giving them the simpler layout sooner.
Auditing an existing stylesheet
Working out what an existing px value would be in rem is the practical first step in migrating a codebase.
Practical notes
- Use rem for font sizes, spacing and breakpoints; keep px for hairline borders and precise shadow offsets.
- Avoid the 62.5% root trick — it overrides the reader's font-size preference, which is the thing rem exists to respect.
- Reach for em when a value should scale with the element's own text, such as padding inside a button.