About the REM to Percent Converter
Sometimes a rem based design system has to be exported into a place that will not accept rem: an HTML email, a rich text field, a legacy CMS theme or a component embedded in a third party page. Percentages are widely tolerated in those settings, so converting the scale is the practical way out.
The tool multiplies each rem value by the root font size to get pixels, then expresses that as a percentage of the same root. With a 16 pixel root, 1rem is 100%, 1.125rem is 112.5% and 0.875rem is 87.5%. If your project root is not 16, enter the real value and the percentages shift to match.
Understand what you are giving up. Rem always looks at the document root, while a percentage looks at the immediate parent, so the two only agree when the element sits directly under the root or the ancestors are all at 100 percent. Inside a card that already sets 90%, a converted child will compound and come out smaller than the rem original. The safe method is to convert the values, then walk the nesting and correct any element whose ancestors are not at full size. The pixel view is on REM to PX.
How to use
- Paste the rem values, one per line.
- Set Base font size to your project root size.
- Copy the percentage values into the target template.
- Check nested elements, since percentages compound and rem does not.
Common questions
- What is 1.125rem in percent?
- 112.5%, assuming a 16 pixel root font size.
- Are rem and percent interchangeable?
- Only when the element inherits directly from the root at 100 percent. Percentages compound through ancestors, so nesting breaks the equivalence.
- Why convert away from rem at all?
- Email clients and some CMS editors strip or ignore rem, and percentages survive those pipelines more reliably.
- Does this work for spacing as well as text?
- For font-size yes. For width or padding a percentage refers to the containing block, so the conversion does not carry over.