OmniCalc

PX to REM

Web & Dev

Convert pixels to REM units

CSS design systems increasingly favor rem over px for typography and spacing because rem scales with the user's font-size preferences, while px stays fixed regardless of accessibility settings. But converting a Figma spec of "24px" into a usable rem value in your stylesheet means doing division against the root font size every single time — tedious when you're translating dozens of design tokens.

Our px to rem converter does this instantly. Enter a pixel value and the root font size (16px by default, matching the browser default), and it returns the exact rem value to use in your CSS. It also converts the other direction — rem back to px — so you can verify what a rem value renders as on screen.

Whether you're implementing a design system, auditing an existing codebase for accessibility, or just tired of doing division in your head, this tool removes the friction from working in relative units.

Why PX to REM Matters

Rem units are central to two things every front-end developer cares about: responsive design and accessibility. When a user increases their browser's default font size (common among users with low vision), elements sized in rem scale proportionally, while elements sized in px do not budge. A layout built entirely in px can become unusable for accessibility-dependent users, which is why WCAG guidance and most modern design systems (Tailwind, Material Design, Bootstrap 5) default to rem for typography, spacing, and even media query breakpoints.

Rem is also the backbone of scalable design systems. Changing the root font-size on the html element (a technique used for fluid typography) instantly rescales every rem-based measurement across the entire site, which is far more maintainable than hunting down hundreds of hardcoded px values. Developers converting Figma or Sketch specs (which output px) into production CSS need fast, accurate px-to-rem conversion to keep spacing and type scales consistent with the design file while keeping the codebase accessible and scalable.

The PX to REM Formula, Explained

rem = px ÷ root font size

Where: rem = the equivalent value in root em units, px = the pixel value from your design spec, root font size = the font-size set on the html element, which defaults to 16px in every major browser unless overridden.

The reverse conversion is just as simple: px = rem × root font size. This is why 16px is the most common design-to-rem reference: 16px ÷ 16 = 1rem, 8px ÷ 16 = 0.5rem, and 24px ÷ 16 = 1.5rem. If a project overrides the root font-size (a common technique is setting html { font-size: 62.5%; } to make 1rem = 10px for easier mental math), the calculator lets you plug in that custom base instead of 16.

Note the difference between rem and em: em is relative to the font-size of the *parent* element, so it compounds unpredictably when nested. Rem is always relative to the single root element, making it predictable regardless of nesting depth — which is why rem is generally preferred for consistent spacing and type scales, while em is reserved for values that should genuinely scale with a local component's font size (like padding relative to button text).

How to Use the PX to REM: Step by Step

  1. Enter the pixel value

    Input the px measurement from your design file or existing CSS — for example, a font-size of 18px or a margin of 24px.

  2. Set the root font size

    Leave it at 16px (the browser default) unless your project overrides html { font-size } — check your global CSS or Tailwind config if unsure.

  3. Read the rem value

    The calculator returns the exact rem equivalent to paste into your stylesheet, e.g. font-size: 1.125rem.

  4. Convert rem back to px (optional)

    Enter a rem value to see its pixel equivalent — useful for verifying how a value from a component library will actually render.

PX to REM Examples: Real-World Scenarios

1

Converting a Figma Type Scale to CSS

A designer hands off a heading spec of 24px font-size with a 32px line-height, and the project uses the default 16px root font size.

Font size:24px
Line height:32px
Root font size:16px

Calculation

font-size: 24 ÷ 16 = 1.5rem | line-height: 32 ÷ 16 = 2rem

Result

CSS output: font-size: 1.5rem; line-height: 2rem; — both values now scale correctly if a user changes their browser's default font size.

2

A Custom 10px Root for Easier Mental Math

A team sets html { font-size: 62.5%; }, which turns the effective root font size into 10px (since 62.5% of the default 16px is 10px). A designer specifies 14px body text.

Font size:14px
Root font size:10px

Calculation

14 ÷ 10 = 1.4rem

Result

font-size: 1.4rem; — with this base, every rem value is simply the px value divided by 10, which many teams find faster to convert mentally.

3

Reverse Conversion: Verifying a Component Library Value

A component library sets padding: 0.875rem, and a developer wants to know the pixel equivalent for a pixel-perfect QA comparison against a 16px root.

Rem value:0.875rem
Root font size:16px

Calculation

0.875 × 16 = 14

Result

The padding renders as 14px on a standard browser — confirmed against the design spec.

Common Mistakes to Avoid

  • Assuming the root font size is always 16px — some projects override html { font-size } globally (common with the 62.5% trick), which silently changes every rem calculation across the app. Always check the actual computed root value with dev tools before converting.
  • Using rem for values that should scale locally with a component, like icon padding relative to adjacent text — em is often the better choice there since it inherits from the parent's font size rather than the document root.
  • Forgetting that browser zoom and OS-level accessibility settings (like iOS Dynamic Type or Windows text scaling) both interact with rem-based layouts differently than px — test your layout at 200% browser zoom to catch rem-related overflow issues before shipping.

Tips & Tricks

  • Tailwind CSS's default spacing scale is rem-based with a 16px root (e.g., p-4 = 1rem = 16px), so this converter is useful for translating arbitrary px design specs into the nearest Tailwind utility class.
  • For CSS custom properties, define your root font size as a variable (:root { --font-base: 16px; }) so design-to-rem conversions stay consistent even if the base ever changes.

Converting px to rem is simple arithmetic, but doing it correctly and consistently across a design system matters for accessibility and maintainability. Use this calculator whenever you're translating a design spec into production CSS, and pair it with the Hex to RGB and RGB to Hex converters for the rest of your CSS token pipeline.

PX to REM — Frequently Asked Questions

Related Calculators

Hex to RGB Converter

convert your CSS color values alongside your unit conversions

RGB to Hex Converter

convert RGB colors back to hex codes

Aspect Ratio Calculator

calculate responsive image and video dimensions

Screen Resolution Calculator

check pixel density for your responsive breakpoints

Base64 Encoder/Decoder

encode assets for your CSS or HTML

Authoritative References

MDN Web Docs — CSS Values and Units

developer.mozilla.org — Authoritative reference on rem, em, and px unit behavior

W3C — CSS Values and Units Module

w3.org — Official specification defining relative and absolute length units

External links open in a new tab. OmniCalc.us is not affiliated with these organisations.

Related Calculators

Hex to RGB

Web & Dev

RGB to Hex

Web & Dev

Aspect Ratio

Web & Dev

Screen Resolution

Web & Dev

Download Time

Web & Dev

File Size

Web & Dev