PX to REM Converter Widget

Add a px to rem converter to your CSS tutorial or design-system docs. Readers set the root font size, convert a single value either way, and get a reference table of common pixel sizes in rem.

Design Converter Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/px-rem-converter" title="PX to REM Converter by A2Z Tools" width="100%" height="730" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

A rem is a multiple of the root element's font size, which browsers set to 16px unless the user or the stylesheet changes it. The widget divides or multiplies by the root size you enter and trims the result to four decimal places. It also shows the same number as em, which is relative to the parent element instead of the root.

Method

  • rem = px / root font size
  • px = rem x root font size
  • em uses the parent element's font size in the same formula
  • rem results trimmed to 4 decimal places, pixel results to 3

Worked examples

A heading size at the browser default

Inputs: 24 px, root 16 px

Result: 1.5rem

24 / 16 = 1.5. If a reader raises the browser's default text size to 20 px, the heading becomes 30 px.

The 62.5% root trick

Inputs: 24 px, root 10 px (html { font-size: 62.5% })

Result: 2.4rem

62.5% of 16 px is 10 px, so every rem value is the pixel value divided by ten.

Back from a design token

Inputs: 1.125 rem, root 16 px

Result: 18px

1.125 x 16 = 18, a common body-text size in type scales.

Limitations

  • It assumes the root size you type. Browsers default to 16 px, but a reader's own font setting or your html { font-size } rule changes the real value.
  • The em row is only right when the parent's font size equals the root size; nested em values compound and are not modelled.
  • Viewport units (vw, vh), percentages, pt and ch are not converted.
  • Browsers may round the final rendered size to device pixels, which a four-decimal rem value cannot predict.

Where publishers use it

  • CSS and accessibility tutorials explaining relative units
  • Design-system documentation that publishes a type scale in rem
  • Front-end teams converting a pixel-based design handoff
  • WordPress theme docs where users set font sizes

Questions

Why use rem instead of px?

rem sizes scale when a reader increases the browser's default font size, which helps accessibility; px sizes do not follow that setting.

What root size should I use?

16px unless your stylesheet sets html { font-size } to something else. Some projects use 62.5% (10px) to make the maths easier.

What is the difference between rem and em?

rem is relative to the root html element; em is relative to the current element's parent, so nested em values compound.

How many decimals are shown?

Up to four for rem (0.0625rem = 1px at 16px) and three for pixels.

Sources

  1. CSS Values and Units Module Level 4 - font-relative lengths (em, rem) - W3C . 1rem = the computed font-size of the root element; 1em = the element's own font-size (its parent's for the font-size property)

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools PX to REM Converter
https://a2z.tools/embed/px-rem-converter

Related widgets

More Design widgets →

Preview

CustomizeGet code