About the Percent to REM Converter
Percentage font sizes chain through every ancestor, which is fine in a flat document and painful in a component library where the same card can appear at three nesting depths. Rem cuts the chain by measuring against the root element only. Moving a stylesheet from one to the other starts with this conversion.
The tool treats the percentage as a proportion of the root font size you enter. At the default root of 16 pixels, 100% maps to 1rem, 112.5% to 1.125rem and 87.5% to 0.875rem. If your project applies the 62.5% root trick to make one rem equal 10 pixels, put 10 in the field and the arithmetic follows.
Do plan a visual check afterwards. Because percentages compounded and rem does not, a value nested two levels deep may render noticeably larger once converted, and that is the intended behaviour rather than a bug. The usual approach is to convert the base scale first, look at each component in the browser, then tune the outliers by hand. Anything that genuinely should track its parent, such as an icon sized to match adjacent text, is better left as em, which Percent to EM handles.
How to use
- Paste each percentage font size on its own line.
- Enter your project root font size in Base font size.
- Copy the rem values into the stylesheet.
- Reload the page and check the nested components look right.
Common questions
- What is 87.5% in rem?
- 0.875rem with a 16 pixel root font size.
- Why did some text change size after converting?
- Percentages compound through ancestors and rem does not, so deeply nested elements resolve against the root instead of their parent.
- What if my root font size is 10 pixels?
- Enter 10 in the base field. Then 100% becomes 1rem but the rendered size is 10 pixels rather than 16.
- Is rem better than percent for accessibility?
- Both respond to the browser font size setting. Rem is simply easier to reason about because nesting has no effect on it.