REM to Percent
Convert rem values to percentages.
Convert REM (rem) to Percent (%). Results update as you type.
rem
Browser default is 16px
rem to % conversion table (base 16px)
| REM | Percent |
|---|---|
| 0.125rem | 12.5% |
| 0.25rem | 25% |
| 0.5rem | 50% |
| 0.625rem | 62.5% |
| 0.75rem | 75% |
| 0.875rem | 87.5% |
| 1rem | 100% |
| 1.125rem | 112.5% |
| 1.25rem | 125% |
| 1.5rem | 150% |
| 1.75rem | 175% |
| 2rem | 200% |
| 2.5rem | 250% |
| 3rem | 300% |
| 4rem | 400% |
| 5rem | 500% |
| 6rem | 600% |
REM to Percent Converter
Express a rem value as a font-size percentage. Enter the rem value, set the base font size (16px by default), and get the matching percentage. This converter assumes the root and the parent font size are the same, which is true for top-level text and for the html element itself.
Formula
percent = rem × root font size ÷ base font size × 100
With one shared base, the font size cancels out and the math becomes simple: multiply by 100.
| REM | Percent |
|---|---|
| 0.625rem | 62.5% |
| 0.875rem | 87.5% |
| 1rem | 100% |
| 1.125rem | 112.5% |
| 1.5rem | 150% |
Worked example: setting the root size
Suppose your design system wants a slightly larger reading size of 1.125rem relative to the browser default. On the root element you cannot use rem meaningfully, because rem is defined by the root itself. Converting gives html { font-size: 112.5%; }, which equals 18px when the browser default is 16px, yet still grows if the user raises their default text size.
When the parent is different
Percentages refer to the parent element, while rem always points to the root. If a component sets its text to 20px and a child needs 1rem (16px), the child's percentage is 16 ÷ 20 × 100 = 80%, not 100%. For such cases, first convert with REM to PX, then use PX to Percent with the parent size as the base.
Where this helps
- Writing
htmlorbodyfont sizes in resets and base styles - Porting a rem type scale into an HTML email template, where percentage sizes are a familiar convention
- Documenting a type scale in both notations for developers who prefer either one
Frequently Asked Questions
How do I convert rem to percent?
Multiply the rem value by the root font size to get pixels, then divide by the parent font size and multiply by 100. When the parent uses the root font size, this simplifies to rem × 100, so 1.25rem = 125%.
Is 1rem always 100%?
Only when the parent font size equals the root font size. Inside an element with larger or smaller text, a percentage refers to that parent, so the two values no longer match.
Why would I convert rem to percent?
Percentages are common in root declarations, CSS resets, and legacy or email stylesheets. Converting lets you express a rem-based type scale in those contexts.