REM to Percent Converter

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

Multiply by 100 when the parent and root font sizes match: 1.5rem × 100 = 150%. 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: Why is this conversion only approximate?

Because the two units answer to different elements. rem is anchored to the root, so it renders the same everywhere; a percentage is anchored to the parent, so it changes with nesting. They agree only when the parent happens to be at the root size. The conversion here gives you the number for that case and flags the assumption.

Q: Which one should I use in a component?

rem, in almost every case. A component should render the same size wherever it is dropped, and rem guarantees that. Reach for percentages or em only when you deliberately want a child to track its parent — for example, an icon that should always be 0.8 times the size of the text beside it.

Convert rem to percent, with a warning about the difference the two units measure against.

Value to convert (rem)

rem

Result (%)

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

The arithmetic here is simple — 1rem becomes 100% — but the two units are not interchangeable, and that is the point of this page. rem always measures against the root element, while a percentage measures against whatever the immediate parent happens to be. The conversion below assumes the parent and the root are the same size, which is true at the top of a document and stops being true the moment any ancestor sets its own font size. The tool says so on every result rather than leaving you to discover it in a nested component.

When to Use It

You are converting a design handed over in rem into a stylesheet that uses percent (%) for accessibility.
You inherited a codebase that mixes units and you need the % equivalent of an existing rem value.
You want to check what a rem 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

1.5

1.5rem converts to 150% — but only inside an element whose parent is at the root size.

1

1rem is 100% at the top level. Inside a 0.875em card, the same 100% renders smaller while 1rem does not move.

0.625

0.625rem is 62.5%, which is 10px on a default root.

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 rem 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 percent (%) result, or copy the whole conversion table for the sizes you use.

Common Mistakes

Assuming the conversion is fixed. 1rem is 100% only when the parent element's font size matches the root's — the same rem 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 rem to percent (%)?

What root font size should I use?

Should I use px or a relative unit?

Is my data sent anywhere?

Why is this conversion only approximate?

Which one should I use in a component?

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