About the EM to Percent Converter
For the font-size property, em and percent are two spellings of the same idea: both multiply the inherited font size of the parent element. That means 1.25em and 125% render at exactly the same size, and this converter simply moves the decimal point two places for you across a whole list of values.
Teams still argue about which spelling to ship. Percent reads a little more clearly to designers reviewing a stylesheet, while em keeps the numbers short and lines up with the way spacing is written elsewhere in the file. Some legacy email clients also handled percent more reliably. Whichever side you land on, converting a component in one pass is quicker than editing each declaration by hand.
The important caveat is that the equivalence holds for font-size only. On width, padding or margin, a percentage refers to the containing block dimension while an em still refers to the element font size, so swapping them there changes the layout. The base font size field only affects the reference table and the pixel context shown with it, since the em to percent ratio itself is a fixed factor of 100. To see what these values render at in pixels, try EM to PX.
How to use
- Paste the em values from your stylesheet, one per line.
- Leave the base font size at 16 unless your root differs.
- Read the percent equivalents on the right.
- Copy them straight back into the font-size declarations.
Common questions
- Is 1.25em the same as 125%?
- For font-size, yes. Both scale the parent font size by the same factor.
- Can I use this for padding values?
- No. Percentage padding is measured against the width of the containing block, so the numbers are not interchangeable there.
- Does the base font size change the answer?
- Not for this pair. The ratio is always 100, so the field only affects the pixel context shown in the table.
- Why do nested elements shrink unexpectedly?
- Em compounds, so 0.9em inside 0.9em gives 0.81 of the grandparent size. Rem avoids the compounding entirely.