Percent to REM
Convert percentages to rem values.
Convert Percent (%) to REM (rem). Results update as you type.
%
Browser default is 16px
% to rem conversion table (base 16px)
| Percent | REM |
|---|---|
| 25% | 0.25rem |
| 50% | 0.5rem |
| 62.5% | 0.625rem |
| 75% | 0.75rem |
| 87.5% | 0.875rem |
| 100% | 1rem |
| 112.5% | 1.125rem |
| 125% | 1.25rem |
| 150% | 1.5rem |
| 175% | 1.75rem |
| 200% | 2rem |
| 250% | 2.5rem |
| 300% | 3rem |
Percent to REM Converter
Move percentage-based font sizes to root-relative rem units. Enter 137.5 to get 1.375rem, or paste every percentage from a theme into the bulk box. The converter assumes the element's parent font size equals the base you enter; when that is the root size (typically 16px), the conversion is a clean division by 100.
Percent vs. rem
A percentage font size is relative to the parent element, while rem is relative to the root (html) element. At the top level of a page those are the same, so:
rem = percent ÷ 100 (parent = root)
If the parent has a different size, convert through pixels: rem = percent × parent ÷ 100 ÷ root.
| Percent | REM (parent = root) |
|---|---|
| 75% | 0.75rem |
| 100% | 1rem |
| 137.5% | 1.375rem |
| 175% | 1.75rem |
| 225% | 2.25rem |
Worked example: flattening nested percentages
A legacy blog sets .post { font-size: 112.5%; } and inside it .post blockquote { font-size: 125%; }. Rendered sizes: the post is 112.5% × 16 = 18px, and the quote is 125% × 18 = 22.5px. Converting each percentage naively to rem would give 1.125rem and 1.25rem – but 1.25rem is only 20px, so the quote would shrink. The correct rem value for the quote is 22.5 ÷ 16 = 1.40625rem. Set the base to 18 and convert 125% to pixels first, then divide by the root, to avoid this trap.
Migration checklist
- Convert top-level percentages directly (value ÷ 100).
- For nested rules, compute the rendered pixel size first.
- Keep the root declaration itself, such as
html { font-size: 100%; }, as a percentage so user preferences still apply.
Related tools: REM to PX to double-check rendered sizes and Percent to PX for the intermediate step.
Frequently Asked Questions
How do I convert percent to rem?
When the parent font size equals the root font size, divide the percentage by 100: 125% = 1.25rem. If the parent differs from the root, first convert to pixels (percent × parent ÷ 100) and then divide by the root size.
What is 62.5% in rem?
62.5% is 0.625rem when applied relative to a 16px root, which is 10px. When 62.5% is set on the html element itself, it changes the root so that 1rem equals 10px.
Why replace percentage font sizes with rem?
Percentages compound through nested elements, so the same value can render at different sizes. rem always refers to the root font size, giving predictable results while still honoring the user's browser text size.