Pixels to REM Converter

The pixels-to-REM converter translates any CSS length value between the five units a frontend developer actually types into a stylesheet: pixels (px), root ems (rem), parent ems (em), points (pt) and percentage of root (%). Unlike a fixed-factor converter, this tool treats the root font size as an editable input, because that is the entire point of rem. A value of 1rem resolves to 16 px on the default browser root, 10 px on a site using the 62.5% trick, 14 px on a compact dashboard, and 18 to 20 px on a large-type accessibility site. The converter exposes all of those cases through a single field and five preset buttons, plus a dedicated panel for the parent font size so the difference between em (parent-relative) and rem (root-relative) is visible at a glance.

How to Use the Pixels to REM Converter

1. Set the Root font size field to whatever your :root (or html) font-size is. The default value of 16 px matches the browser default and the most common case in design systems.
2. Type into the Pixels (px) field or the Root ems (rem) field, the two stay in sync as you type, so it does not matter which one you edit.
3. Read the equivalent Points (pt) and Percentage of root (%) from the result panel. Points follow from the CSS reference pixel (1 in = 96 px = 72 pt); percent follows from the same root.
4. Open the em panel and set a Parent font size that differs from the root to see the difference between em and rem. With parent = 12 px and root = 16 px, the same 24 px is 2em against its parent but only 1.5rem against the root.
5. Use the Root-size presets to flip quickly between 10 px (62.5% trick), 14 px (compact), 16 px (default), 18 px (large type) and 20 px (extra large) and watch every output field update.
6. Copy any value from the Common px values table at the bottom, the table lists the twelve px values developers actually copy out (8, 10, 12, 14, 16, 18, 20, 24, 32, 40, 48, 64 px) with their rem equivalents at the current root.

The CSS Formulas

Every conversion the tool performs follows from the W3C CSS Values and Units Module Level 4 (font-relative lengths) and the W3C CSS Fonts Module (font-size property). All four identities below are exact under the spec; there is no rounding anywhere.

rem = px / rootFontSize, rem is a font-relative length unit that resolves against the font size of the root element. With a 16 px root, 16 px = 1 rem; with a 10 px root, 16 px = 1.6 rem.

px = rem × rootFontSize, the inverse of the above. Edit either field and the other updates.

em = px / parentFontSize, em is also font-relative, but it resolves against the immediate parent's font size, not the root. This is the source of the compounding effect that makes em brittle for layout but useful for nested components.

pt = px × (72 / 96), the absolute point is fixed by the CSS reference pixel: 1 CSS inch is defined as exactly 96 CSS pixels, and 1 CSS inch is exactly 72 points, so 1 px = 0.75 pt exactly. 16 px is therefore exactly 12 pt; 24 px is exactly 18 pt.

% = (px / rootFontSize) × 100, percent on a length resolves against the root font size for font-relative properties. 16 px at a 16 px root is 100%; 24 px at a 16 px root is 150%.

Why the reference pixel matters. CSS does not define 1 px as one device pixel; it defines 1 px as 1/96 of a CSS inch. That single anchor fixes every absolute length unit at exactly 96 px = 1 in = 2.54 cm = 25.4 mm = 72 pt = 6 pc. The converter's pt output uses this anchor directly, pt = px × 72/96 is exact, not an approximation.

Worked Examples

The five examples below cover the most common px-to-rem conversions a frontend developer types into a stylesheet. Each one shows the division step explicitly so you can reproduce the answer with a pocket calculator.

Example 1, Convert 16 px to rem at the browser default root.

16 px / 16 = 1 rem. With the default 16 px root, the identity 1rem = 16px holds exactly. Any px value divided by 16 yields the equivalent rem at the default root. This is the rule of thumb that lets developers "skip the converter", but only when the root is genuinely 16 px.

Example 2, Convert 24 px to rem at the default root.

24 px / 16 = 1.5 rem. The most common rem value in any design system, because 24 px is the typical "body large" or "h3 heading" size. At 16 px root: 1.5 rem. At 14 px root (compact): 24 / 14 = 1.7143 rem. At 10 px root (62.5% trick): 24 / 10 = 2.4 rem. The rem value changes with the root; the px value does not.

Example 3, Convert 10 px to rem at the default root.

10 px / 16 = 0.625 rem. This is the canonical "small body" size, below 1 rem, the result has a long decimal. The 62.5% trick was invented precisely to make this number prettier: at a 10 px root, 10 px = 1 rem exactly, so 11 px = 1.1 rem, 12 px = 1.2 rem, and so on. The trade-off is discussed in the "62.5% trick" section below.

Example 4, Convert 24 px to rem at a 10 px root (62.5% trick).

24 px / 10 = 2.4 rem. The px value is unchanged but the rem is now larger than 1.5 because the root is smaller. A reader using a default browser setting sees the same 24 px regardless of whether the stylesheet wrote 1.5rem or 2.4rem, the root only affects how rem is computed, not what px values render.

Example 5, Convert 2.5 rem back to px at the default root.

2.5 rem × 16 = 40 px. The inverse direction is just as important, given a rem value from a designer's spec or a framework token, multiply by the root to recover the px value. At a 14 px root, 2.5 rem × 14 = 35 px, the same rem produces a different px at a different root.

Example 6, em vs rem when parent differs from root (the entire point of the tool).

Take a 24 px child element inside a parent whose font-size is 12 px, with the root at 16 px. Against its parent, 24 px / 12 px = 2em. Against the root, 24 px / 16 px = 1.5rem. The same 24 px renders as 2em in em-syntax and 1.5rem in rem-syntax, two different numbers for two different things. If you change the parent to 16 px, the em value drops to 1.5em (matching rem) but the rem value stays put. If you change the root to 10 px, the rem jumps to 2.4rem but the em value is unaffected.

Where the Conversion Shows Up

Typography scale. Every design system ships with a type scale expressed in rem (Material's typography tokens, Tailwind's text-base, Polaris's font-size tokens). The converter lets you translate a px-based design spec into rem-based CSS without losing your place in the arithmetic.

Spacing scale. Padding, margin, and gap values follow the same pattern: rem-based design systems express them in rem so they scale with the user's font preference. The px-to-rem conversion is the same formula as for font-size.

Component dimensions. Buttons, inputs, cards, dialogs, anywhere a height or width is set. Using rem here means the component scales with the user's accessibility setting rather than locking to a single px dimension.

Breakpoints. Modern browsers scale px breakpoints the same way they scale rem breakpoints under zoom, so the choice between @media (min-width: 768px) and @media (min-width: 48rem) is mostly stylistic for new code. Older codebases may still use em breakpoints.

Email and PDF. Outside the browser, pt is the standard length unit. Converting a px design to pt (or vice versa) for an email template or a PDF export follows the same pt = px × 0.75 rule the converter uses.

Common Mistakes

Treating 1rem as always 16 px. It is only 16 px if the root font size is 16 px (or unset, which inherits the browser default). On any site that has changed the root, the 62.5% trick (10 px), compact dashboards (14 px), large-type accessibility sites (18 to 20 px), 1 rem resolves to something else. A 1.5rem font-size renders as 24 px at the 16 px root, 21 px at the 14 px root, 15 px at the 10 px root, and 30 px at the 20 px root. The px value the designer wrote is preserved at the right root; everywhere else it is wrong by the ratio of the roots.

Confusing em with rem. Both are font-relative, but rem always resolves against the root and em against the parent. The typical pattern in modern CSS is: rem for layout (so the layout scales as one piece), em for components that should scale with their container. A button text sized in 1em will scale with the button's font-size; a button text sized in 1rem will scale with the page's font-size, not the button's.

Mixing px and rem in the same property. font-size: 1.25rem; line-height: 18px breaks the proportionality, the line-height no longer scales with the font-size. Set both in rem (or both in em with the same parent), or use the unitless line-height that the CSS spec recommends for typography: line-height: 1.5.

Forgetting the em compounding problem. em inherits from the parent, and the parent inherits from its parent, and so on up the tree. A child with font-size: 1.2em inside a parent with font-size: 1.2em inside a grandparent with font-size: 1.2em resolves to 1.728 of the root, almost double what was probably intended. rem sidesteps this entirely because it always resolves against the root, never against the parent.

Setting media-query breakpoints in em and expecting browser-zoom scaling. The original advice was to use em so the breakpoints would scale with the user's text-zoom setting. Modern Chrome, Firefox and Safari scale all length units (px and rem alike) under zoom, so this advice no longer buys anything in current browsers, pick whichever unit matches the rest of your stylesheet.

Why rem Matters for Accessibility

Every mainstream browser exposes a setting, typically labelled "minimum font size," "default font size," or "text size", that lets a user scale the root font size up or down. Users with low vision routinely set this to 20, 24, or even 32 px. When your layout is sized in px, your text will still grow when the user changes the browser default, but your containers, paddings, gaps, breakpoints, and component heights will not, so text starts to overflow cards, buttons grow taller than their hit areas, and grids break in unpredictable ways. When your layout is sized in rem, every dimension scales together with the user's preferred base font size, and the layout stays proportional. That single property, layout scales with the user's accessibility setting, is the primary reason modern design systems ship with rem as the default length unit.

The W3C Web Content Accessibility Guidelines (WCAG) 2.x do not mandate rem, but they do require that text can be resized up to 200% without loss of content or functionality. Building in rem is the path of least resistance to that criterion.

The 62.5% Root-Font Trick and Its Trade-offs

A widely used shortcut sets the root font size to 62.5% of the browser default so that 1rem = 10px. With that root, mental arithmetic becomes trivial: 1.6 rem = 16 px, 2.4 rem = 24 px, 0.8 rem = 8 px. The trade-off is that the user-set browser default font size no longer maps 1:1 to the spec's mental model, a user who sets their browser default to 20 px sees your 1rem resolve to 12.5 px, not 16 px, which means every "px-equivalent" your CSS claims is wrong for that user. The CSS itself is not wrong; the developer's mental model of what each rem number "means in pixels" is wrong for that user.

If you use this trick, declare your values in rem (not in px-claimed-as-rem) and consider a media query that overrides the root for users who have set a larger minimum: @media (min-resolution: ...) is the wrong tool, but @media (prefers-reduced-motion) is unrelated; the relevant pattern is to read the user's prefers-color-scheme and other accessibility preferences and adjust the root accordingly. Some teams simply remove the 62.5% override entirely and accept the awkward 0.625rem numbers in exchange for accessibility correctness.

When to Use Px

px is still the right unit for borders, hairline dividers, box-shadows, icon strokes, and any dimension that should not scale with the user's font size. A 1px border is a 1px border at any text size; a 0.5px shadow is a hairline; a 2px icon stroke stays a 2px icon stroke. Using rem for these would produce a card border that grew to 2 px at a 32 px root, which is rarely what you want.

Media-query breakpoints are a special case. The conventional advice for years was to write breakpoints in em so they would scale with the user's zoom level; modern browsers handle zoom uniformly across length units, so px and em breakpoints behave identically in current Chrome, Firefox, and Safari. Pick whichever unit your stylesheet uses elsewhere.

Frequently Asked Questions

What is the difference between rem and em in CSS?

rem (root em) resolves against the font size of the root element, which is usually the <html> element. em resolves against the font size of the parent element. The two are equal only when the parent and the root happen to have the same font size, which is true at the top of the document and false everywhere else. Use rem for layout (so the layout scales as one piece) and em for components that should scale with their own container.

Why does my layout break when I change the browser font size?

If your layout is sized in px, your containers, paddings, and gaps do not scale with the user's browser default, only the text does. Switch the layout dimensions to rem and they will scale together. The single change from px to rem on margin, padding, gap, width, and height is the most common accessibility fix in CSS audits.

Should I use the 62.5% root-font trick?

It makes the px-to-rem arithmetic prettier (1rem = 10px) but it makes the rem-to-actual-px mapping inconsistent for users who have changed their browser default. If you do use it, declare every value in rem and never claim that 1.6rem = 16px, because for a user with a 20 px browser default, 1.6rem = 12.5px, and the CSS will faithfully render that. If accessibility matters more than arithmetic convenience, skip the trick.

Is 1rem always 16 pixels?

Only when the root font size is 16 px (or unset, in which case it inherits the browser default of 16 px). On any site that has set html { font-size: 10px } (the 62.5% trick), html { font-size: 14px } (compact dashboard), or html { font-size: 20px } (large type), 1rem resolves to that root. The px value is not a property of rem; it is a property of the root font size.

Should I use em or rem for font-size?

Use rem for the typography scale (so the whole scale scales with the user's accessibility setting as one piece) and em for components that should scale with their own context, a button label sized in 1em will inherit the button's font-size, which is often what you want. Avoid em for top-level layout dimensions because the compounding effect (parent em × parent em × …) makes the resolved size unpredictable.

What unit should I use for media query breakpoints?

In modern browsers, any length unit works the same under zoom. Use whichever matches the rest of your stylesheet, if everything else is in rem, use rem breakpoints (@media (min-width: 48rem)); if everything else is in px, use px breakpoints (@media (min-width: 768px)). Older advice to use em was tied to browser-zoom behaviour that no longer exists in current Chrome, Firefox, or Safari.

Can I trust that 1px = 0.75pt?

Yes, that relationship is exact under the W3C CSS reference pixel. 1 CSS inch = 96 CSS pixels and 1 CSS inch = 72 points, so 1 px = 72/96 = 0.75 pt exactly. 16 px is exactly 12 pt; 24 px is exactly 18 pt; 8 px is exactly 6 pt. The converter uses this identity directly for the pt output.

How do I convert rem to px at a non-default root?

Multiply. px = rem × rootFontSize. With a 14 px root, 2.5rem = 35 px; with a 20 px root, 2.5rem = 50 px. The same rem produces a different px at a different root, which is the entire point of the converter, there is no single "px equivalent" for a rem value without knowing the root.

can the Pixels to REM Converter be used for professional or commercial purposes?

yes, the Pixels to REM Converter provides mathematically correct results that are suitable for professional, commercial, and educational use. For the Pixels to REM Converter, For the Pixels to REM Converter, For high-stakes applications (medical, legal, financial), verify results with a domain expert. For the Pixels to REM Converter, the Pixels to REM Converter formulas used are well-established and validated against reference standards.

For the Pixels to REM Converter, How often are the underlying formulas updated?

For the Pixels to REM Converter, the Pixels to REM Converter formulas are based on established scientific, mathematical, or industry-standard references and rarely require updates. when standards change, the Pixels to REM Converter is updated to reflect the current authoritative source. For the Pixels to REM Converter, For the Pixels to REM Converter, Each calculator's references section lists the specific sources used.

References

• W3C CSS Values and Units Module Level 4, Absolute lengths: in, cm, mm, pc, pt, px, q; font-relative lengths: em, rem, ex, ch, lh, rlh, vw, vh, vmin, vmax. Defines the CSS reference pixel (1 in = 96 px = 72 pt exactly), the em and rem units, and the percentage semantics on font-size. The canonical W3C reference for every length unit this converter supports.
• W3C CSS Fonts Module Level 4, font-size property, font-size keywords (small, medium, large, …), and the root element's font-size as the rem base. Defines what "the root font size" means in rem resolution and the relationship between absolute-size keywords and computed px/rem values.
• W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, Length units (em, ex, px); the historical W3C reference for the same definitions; superseded on a few details by CSS Values and Units Module Level 4 but still authoritative for the px/em/rem definitions.