About the Percent to EM Converter
Older stylesheets and CMS themes are full of percentage font sizes, a habit that dates back to browsers that scaled pixel text badly. Modernising that code usually means moving to em or rem, and the first step is arithmetic: divide each percentage by 100. This tool does it for a whole column at once so a legacy file can be updated without a calculator.
The conversion is exact because both units multiply the same inherited value. A heading at 150% becomes 1.5em, body copy at 87.5% becomes 0.875em, and 62.5% becomes 0.625em. Nothing about the rendered output changes, which makes this a safe refactor to ship on its own before touching layout.
Where you should pause is nesting. Percentage and em both compound, so a list at 90% inside a sidebar at 90% renders at 81 percent of the page size, and a deeper nest keeps shrinking. If that has been causing trouble in the codebase, converting to rem instead breaks the chain because rem always looks at the root element. Run the values through Percent to REM in that case, then check each component in the browser, since rem ignores the parent and the sizes will shift.
How to use
- Paste the percentage values, one per line, with or without the percent sign.
- Adjust Base font size only if you want pixel context in the table.
- Read the em equivalents.
- Replace the percentage declarations in your stylesheet.
Common questions
- What is 125% in em?
- 1.25em. Divide any percentage by 100 to get the em value.
- Will the rendered text size change after the swap?
- No. For font-size the two units behave identically, so the page looks the same.
- Should I move to rem instead?
- Rem is worth considering if compounding across nested components has been a problem, but it is not a drop in replacement because sizes will change.
- Can I paste values with a percent sign attached?
- Yes. A trailing percent sign is ignored and the number in front of it is converted.