Online px to rem converter with custom root font-size and a common font-size quick table. A must-have for responsive layout work. Local computation.
TL;DR: px to rem both ways: custom root font-size and a common-sizes quick table.
For local tools, open DevTools → Network and search your input — it should not appear in requests.
Next steps
Usage Guide
Bidirectional px↔rem/em conversion with a configurable root font-size.
1. Convert
Set root size, enter px or rem, write results into tokens.
2. Practice
Document 16px vs 62.5% strategy and keep libraries aligned.
3. Pitfalls
em compounds with nesting; follow a media-query convention.
4. 62.5%
Convenient math can shrink third-party UIs that assume 16px.
5. Related
Cross-check with the general CSS unit converter when vw/pt appear.
6. Accept
Regress spacing/components after root changes.
FAQ
Rule of thumb: font sizes in rem (they follow the user's browser settings, which helps accessibility), borders in px (a 1px divider should not thicken with font size), spacing per team convention (rem scales globally, px stays pixel-exact). Agree on a root policy before converting — the convention matters more than the tool, which only guarantees the arithmetic.
16px by default — the browser's root font size. Change the base and every rem value recalculates against it; if your design uses a different base (20px, say), set it here and the cheat sheet updates in sync.
It makes 1rem ≈ 10px, which makes mental math easy, and many teams adopt it deliberately. The catch: third-party components that assume a 16px root will shrink. After pulling in an external UI library, regression-check navigation and form font sizes and reset locally where necessary.
em is relative to the parent element, not the root: nested em values compound level by level, so the same declaration resolves to a different size at each depth. Sort out which unit you are holding before typing it in — never feed em where you meant rem.
Both camps exist and the debate mixes compatibility with preference — standardize on your team's convention instead of shipping experiments straight to production. Fold the converted spacing into a token table as well, so pages never mix raw px and rem.
Related Tools
Related Articles
px, rem, em: What Each CSS Unit Actually Answers, and How to Convert Without Surprises
The boundary between px, rem, and em (root-relative vs parent-relative), the px-to-rem formula and size table, the 62.5% trick's hidden costs, the Safari media-query rem trap, and browser minimum font size — with an online converter.
Online Base64 to Image Converter: Decode Base64 Strings to Image Files
Learn how to convert Base64 encoded strings back to image files. Understand Base64 decoding principles, common image MIME types, and real-world Web development use cases.
Online XML/JSON Converter: Convert Between Data Formats
Learn how to convert between XML and JSON: @-prefixed attributes, CDATA, array folding, and line-level parse errors for API and legacy integrations.