PX to REM Converter
Note: Converting font sizes to rem is what lets a reader's browser font setting reach your page — px silently ignores it. Converting a 1px border is the opposite of useful: it renders as a fuzzy 1.25px edge for no benefit.
This is not a style preference. It is the mechanism by which a browser-level accessibility setting reaches your page, and px silently disables it. Roughly one reader in twenty has changed that setting.
What rem does not mean is that every value should be converted. Borders are the clearest case: a 1px border is meant to be a hairline, and scaling it with the font size gives a fuzzy 1.25px edge that renders inconsistently. Shadow offsets and blurs are usually the same. The rule that holds up is to use rem for anything that should scale with reading size — font sizes, padding around text, line heights, max-widths of text columns — and px for anything that is a physical detail of the rendering.
em is the third option and it compounds, which is its strength and its trap. An em is relative to the current element's font size, so padding in em scales with that element's own text, which is exactly right for a button. Nest two elements that both set a font size in em and the multiplication runs away — the classic nested-list problem.
The 62.5% trick, setting the root to 10px so 1rem is 10px, still works but overrides the user's setting at the root and then restores it on body. It saves arithmetic and costs clarity.
Frequently Asked Questions
Should I convert everything to rem?
No. Use rem for anything that should grow with reading size — font sizes, padding around text, line heights, text column widths. Keep px for physical rendering details: 1px borders, small shadow offsets, hairline rules. A scaled border just renders fuzzily.
What is the difference between rem and em?
rem is relative to the root font size and is therefore stable everywhere. em is relative to the current element's font size, so it compounds through nesting. em is right for padding inside a component that should scale with its own text; rem is right for almost everything else.
Is the 62.5% trick a good idea?
It works — setting html to 62.5% makes 1rem equal 10px and the arithmetic trivial. The cost is that you have overridden the user's chosen size at the root and are restoring it on body, so any component that forgets to opt back in renders at 10px. It is a real trade, not a free win.
Does using px hurt accessibility?
For font sizes, yes, and concretely: it disables the browser's own text size setting, which is how many people with low vision read comfortably. Browser zoom still works on px, but that scales the whole layout rather than just the text, which is a different and worse experience.
Should media queries use rem?
Yes, and it is an underrated detail. A breakpoint in rem responds to the user's font size, so someone reading at 24px gets the simpler layout sooner — which is usually what they need, since their text takes more room.
