Percent to REM Converter
Convert between Percentage (%) and REM CSS units with customizable font sizes
Live Font Size Preview
Hello
Conversion Formula
How Percent and REM relate to each other
% → REM
rem = (% ÷ 100) × parent ÷ root
e.g. (100 ÷ 100) × 16 ÷ 16 = 1rem
REM → %
% = rem × (root ÷ parent) × 100
e.g. 1rem × (16 ÷ 16) × 100 = 100%
CSS Style Properties
Percent value
h1 {
font-size: 100%;
}REM value
h1 {
font-size: 0rem;
}Percent to REM Conversion Table
Based on root font size: 16px, parent font size: 16px
| Percent (%) | REM |
|---|---|
| 25% | 0.25rem |
| 50% | 0.5rem |
| 75% | 0.75rem |
| 100% | 1rem |
| 125% | 1.25rem |
| 150% | 1.5rem |
| 175% | 1.75rem |
| 200% | 2rem |
| 225% | 2.25rem |
| 250% | 2.5rem |
| 275% | 2.75rem |
| 300% | 3rem |
| 325% | 3.25rem |
| 350% | 3.5rem |
| 375% | 3.75rem |
| 400% | 4rem |
| 425% | 4.25rem |
| 450% | 4.5rem |
| 475% | 4.75rem |
| 500% | 5rem |
About Percent to REM Conversion
What is Percent (%)?
Percent (%) is a relative CSS 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 and useful for inheritance-based scaling.
What is REM?
REM (Root Em) is a relative CSS unit based on the font size of the root <html> element. Unlike EM and percent, REM
always references the root, making it consistent and predictable across deeply nested elements.
The Conversion Formula
rem = (% ÷ 100) × parentFontSize ÷ rootFontSize
With both root and parent at the default 16px: 100% = 1rem. If the parent is 20px and root is 16px, then 100% = 1.25rem.
When to Use Percent vs REM
- Percent: Use when sizing should be relative to the immediate parent container — good for inheritance chains.
- REM: Use for consistent sizing across your entire page, independent of nesting depth.
- REM is preferred for most typography; percent is common for widths and layout dimensions.
Common Conversions (root = 16px, parent = 16px)
25%
0.25rem
50%
0.5rem
75%
0.75rem
100%
1rem
125%
1.25rem
150%
1.5rem
175%
1.75rem
200%
2rem
How to Use the Percent to REM Converter
- 1
Enter your value
Type the percentage (or REM) value you want to convert into the "From Value" input field.
- 2
Select the unit direction
Choose % or rem in both dropdowns. Use the swap button to reverse direction instantly.
- 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
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
Check the live preview and table
The Live Font Size Preview shows how the result looks visually. The conversion table lists common percentage values for quick reference.
Tip: When both root and parent font sizes are 16px (the browser default), 100% always equals 1rem. Change the parent size to model how nested elements inherit differently.
Common Use Cases
Responsive Typography
- • Convert a designer's percentage font size spec to REM for consistent scaling
- • Verify that a heading at 150% matches 1.5rem of the root font
- • Calculate fluid type scale values across breakpoints
CSS Framework Migration
- • Migrate a legacy percentage-based font system to REM
- • Map percentage utility values to Tailwind's rem-based scale
- • Refactor Bootstrap's % font sizes to REM for better browser compatibility
Accessibility Improvements
- • Replace fixed percentage sizes with REM to respect user browser font preferences
- • Audit existing % font sizes and convert to accessible REM values
- • Ensure WCAG minimum font size requirements are met with REM-based values
Design Token Translation
- • Translate design tokens expressed in % to REM for developer handoff
- • Build a shared reference table for design system documentation
- • Reconcile mixed-unit codebases during a CSS refactor
Email & CMS Templates
- • Convert percentage font sizes from email templates to REM for modern web
- • CMS theme editors often show percentage inputs — convert to your coded REM values
- • Verify computed output before deploying a template change
Learning & Teaching CSS
- • Understand the relationship between % and REM for CSS fundamentals
- • Demonstrate how parent font size affects percentage-based sizing
- • Use the live preview to show students visual font size differences instantly
Frequently Asked Questions
What is the formula to convert percent to REM?
The formula is: rem = (% ÷ 100) × parentFontSize ÷ rootFontSize. With both sizes at the default 16px, 100% = 1rem. If the parent is 20px and root is 16px, then 100% = 1.25rem.
Why does 100% equal 1rem 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 100% of 16px (parent) divided by 16px (root) equals exactly 1rem.
When should I use percent instead of REM for font sizes?
Use percent when you intentionally want an element to scale relative to its direct parent — useful for nested components with their own rhythm. Use REM when you want consistent sizing regardless of where an element appears in the DOM.
Does changing the parent font size affect the conversion result?
Yes. Percent is always relative to the parent element's font size. If your parent has a font size of 20px instead of 16px, then 100% resolves to 20px — which equals 1.25rem with a 16px root. Use the Settings panel in this tool to model your specific context.
How do I convert REM back to percent?
Use the swap button in this tool, or apply the reverse formula: % = rem × (rootFontSize ÷ parentFontSize) × 100. For example, 1.5rem with both sizes at 16px equals 150%.
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.
What is the difference between percent and EM?
Both percent and EM are relative to the parent element's font size for the font-size property — 100% and 1em are equivalent. The difference appears in other properties: EM always references the element's own font size, while percent references the parent value for each respective property.
Can I use this converter for width and height, not just font sizes?
The math works the same, but note that for width/height, percent is relative to the parent's width — not its font size. You can still use this tool for the arithmetic, just make sure to set the "parent font size" field to the parent's actual pixel width for accurate results.