REM to Percent Converter

Convert between REM and Percentage (%) CSS units with customizable font sizes

Live Font Size Preview

Hello

Conversion Formula

How REM and Percent relate to each other

REM → %

% = rem × (root ÷ parent) × 100

e.g. 1rem × (16 ÷ 16) × 100 = 100%

% → REM

rem = (% ÷ 100) × parent ÷ root

e.g. (100 ÷ 100) × 16 ÷ 16 = 1rem

CSS Style Properties

REM value

h1 {
  font-size: 1rem;
}

Percent value

h1 {
  font-size: 0%;
}

REM to Percent Conversion Table

Based on root font size: 16px, parent font size: 16px

REMPercent (%)
0.25rem25%
0.5rem50%
0.75rem75%
1rem100%
1.25rem125%
1.5rem150%
1.75rem175%
2rem200%
2.25rem225%
2.5rem250%
2.75rem275%
3rem300%
3.25rem325%
3.5rem350%
3.75rem375%
4rem400%
4.25rem425%
4.5rem450%
4.75rem475%
5rem500%

About REM to Percent Conversion

What is REM?

REM (Root Em) is a relative CSS unit based on the font size of the root <html> element. Unlike EM, REM always references the root, making it consistent and predictable across deeply nested elements.

What is Percent (%)?

Percent (%) is a relative unit based on the parent element's corresponding property. For font-size, 100% equals the parent's font size. This makes it highly context-dependent.

The Conversion Formula

% = rem × (rootFontSize ÷ parentFontSize) × 100

With both root and parent at the default 16px: 1rem = 100%. If the parent is 20px and root is 16px, then 1rem = 80%.

When to Use REM vs Percent

  • REM: Use for consistent sizing across your entire page, independent of nesting.
  • Percent: Use when sizing should be relative to the immediate parent container.
  • REM is preferred for typography; percent is common for widths and layout dimensions.

Common Conversions (root = 16px, parent = 16px)

0.25rem

25%

0.5rem

50%

0.75rem

75%

1rem

100%

1.25rem

125%

1.5rem

150%

1.75rem

175%

2rem

200%

How to Use the REM to Percent Converter

  1. 1

    Enter your value

    Type the REM (or %) value you want to convert into the "From Value" input field.

  2. 2

    Select the unit direction

    Choose rem or % in both dropdowns. Use the swap button to reverse direction instantly.

  3. 3

    Adjust font sizes if needed

    Click Show Settings to change the root font size (html element) and parent font size. Both default to 16px.

  4. 4

    Read the result and copy

    The converted value appears instantly in the "To Value" field. Click the Copy button to copy it to your clipboard.

  5. 5

    Check the live preview and table

    The Live Font Size Preview shows you how the result looks visually. The conversion table below lists common REM values for quick reference.

Tip: When both root and parent font sizes are 16px (the browser default), 1rem always equals 100%. Change the parent size to model nested element inheritance.

Common Use Cases

Responsive Typography

  • • Convert a designer's percentage font size spec to REM for consistent scaling
  • • Verify that a heading at 2rem matches 200% of the body font
  • • Calculate fluid type scale values across breakpoints

CSS Framework Customisation

  • • Map Tailwind's rem-based utility classes to percentage equivalents
  • • Migrate a legacy percentage-based font system to REM
  • • Set custom font-size on the root and recalculate component sizes

Accessibility Adjustments

  • • Ensure font sizes respect user browser preferences by using REM instead of fixed px
  • • Audit whether percentage sizes will scale when the root is changed
  • • Convert WCAG-recommended minimum sizes to REM values

Cross-Unit Design Systems

  • • Translate design tokens expressed in % to REM for developers
  • • Build a shared reference table for your design system documentation
  • • Reconcile mixed-unit codebases during a CSS refactor

Email & CMS Templates

  • • Some email clients require percentage font sizes; convert from your REM design values
  • • CMS theme editors often accept percentage inputs — convert from your coded REM values
  • • Quickly check computed output before deploying a template change

Learning & Teaching CSS

  • • Understand the relationship between REM and % for CSS fundamentals
  • • Demonstrate how changing the root font size affects all REM-based elements
  • • Use the live preview to show students visual font size differences instantly

Frequently Asked Questions

What is the formula to convert REM to percent?

The formula is: % = rem × (rootFontSize ÷ parentFontSize) × 100. With both sizes at the default 16px, 1rem = 100%. If the parent is 20px and root is 16px, then 1rem = 80%.

Why does 1rem equal 100% by default?

By default, browsers set the root html font size to 16px, and when a parent element also has a 16px font size, the ratio is 1:1 — so 1rem resolves to 16px and 100% of the parent also resolves to 16px.

When should I use REM instead of percent for font sizes?

Use REM when you want consistent sizing regardless of where an element appears in the DOM. Use percent when you intentionally want an element to scale relative to its parent — useful for nested components with their own rhythm.

Does changing the root font size affect all REM values?

Yes. REM always references the root html element's font size. If you set html { font-size: 18px; }, then 1rem becomes 18px everywhere on the page, which is why REM is great for accessible, user-preference-respecting layouts.

How do I convert percent back to REM?

Use the swap button in this tool, or apply the reverse formula: rem = (% ÷ 100) × parentFontSize ÷ rootFontSize. For example, 150% with both sizes at 16px equals 1.5rem.

Is my data safe? Does this tool send data to a server?

No data leaves your browser. All calculations happen entirely client-side using JavaScript. Nothing you enter is uploaded or stored anywhere.

Can I use this tool for properties other than font-size?

Yes. While font-size is the most common use case, the REM-to-percent math applies to any CSS property. Note that for properties like width or padding, the percentage is relative to the parent's width, not its font size — so always verify the reference property in your specific context.

What is the difference between REM and EM?

EM is relative to the font size of the nearest parent element, which can compound when nested. REM always references the root element, so it stays predictable at any nesting depth. For most typography use cases, REM is recommended over EM.