Percent to REM Converter

Q: How do I convert percent (%) to rem?

Divide by 100 when the parent and root font sizes match: 150% ÷ 100 = 1.5rem. The tool does this for you and lets you change the reference size, because that reference is what makes the answer different from one project to the next.

Q: What root font size should I use?

Browsers default to 16px, so 16 is the right starting point unless your stylesheet sets a different size on the html element. If your CSS sets `html { font-size: 62.5% }` — a common trick to make 1rem equal 10px — set the root size to 10 here instead.

Q: Should I use px or a relative unit?

Use relative units (rem, em) for anything that should scale with the reader's font-size preference: type, spacing, and container widths. Pixels are fine for things that genuinely should not scale, such as hairline borders and some shadow offsets. The accessibility rule of thumb is that a user who sets a larger default font size in their browser should see your layout grow with it.

Q: Is my data sent anywhere?

No. The conversion is arithmetic done in your browser — nothing is uploaded, and the page works offline once loaded.

Q: Will swapping percent for rem change how my page looks?

At the top level, no. Deeper in the tree, possibly — and usually for the better. Percentages multiply through ancestors, so a nested value may have been rendering larger than its number implies. Converting to rem removes that compounding, which is normally the intent, but it does mean you should eyeball nested components after the swap.

Q: What root font size should I assume?

16px unless your stylesheet says otherwise, since that is the browser default. If your CSS sets html { font-size: 62.5% } then the root is 10px and every rem value in your file is ten times its pixel size — set the base here to 10 to see the numbers your project actually uses.

Convert percentage font sizes to rem, with the caveat about what each unit is measured against.

Value to convert (%)

Result (rem)

Root / parent font size

Browsers default to 16px. Use 10 if your CSS sets html { font-size: 62.5% }.

About this conversion

The same value at other root sizes

Root size	Result

Common conversions at 16 px

%	rem

What It Does

This is the conversion you run when modernising a stylesheet: percentages out, rem in. The number itself is a divide by 100, but the swap is not automatically safe. A percentage inherits through every ancestor, so a value deep in the tree may currently be rendering at a size the raw number does not suggest; rem ignores all of that and renders against the root. The tool gives you the rem equivalent and tells you exactly which assumption it made, so you know which values need checking in context before you commit them.

When to Use It

You are converting a design handed over in percent (%) into a stylesheet that uses rem for accessibility.
You inherited a codebase that mixes units and you need the rem equivalent of an existing % value.
You want to check what a % value becomes when the user changes their browser's default font size.
You are writing a design-token scale and need the same step expressed in both units.

Worked Examples

150

150% becomes 1.5rem — identical at the top level, and now immune to nesting.

62.5

62.5% is 0.625rem. As a root-element rule it is the 62.5% trick; anywhere else it is just 10px.

200

200% is 2rem. If this rule sat inside another enlarged element, the rem version will render smaller than the original — that is the compounding you are removing.

Features

Instant two-way conversion

Configurable root/parent font size

Full conversion table for common root sizes

Fractional-pixel rounding warning

Copy the value or the whole table

Works offline in your browser

No uploads or tracking

How to Use

1. Enter the percent (%) value you want to convert. 2. Set the root (or parent) font size the value should be measured against — 16px is the browser default. 3. Read the rem result, or copy the whole conversion table for the sizes you use.

Common Mistakes

Assuming the conversion is fixed. 100% is 1rem only when the parent element's font size matches the root's — the same % value converts differently depending on that size.
Confusing em with rem. `em` is relative to the *parent* element's font size and therefore compounds when nested; `rem` is always relative to the root element and does not.
Setting a px font size on the root element. That overrides the user's browser font-size preference, which defeats the accessibility reason for using relative units at all.
Rounding too early. Keep the fraction (1.375rem, not 1.4rem) — the browser resolves sub-pixel values fine and the rounding error compounds across a scale.

Frequently Asked Questions

How do I convert percent (%) to rem?

What root font size should I use?

Should I use px or a relative unit?

Is my data sent anywhere?

Will swapping percent for rem change how my page looks?

What root font size should I assume?

Related Tools

CSS Unit Converter EM to Point Converter

The conversion runs entirely in your browser. Nothing is uploaded and nothing is stored.