Percent to EM

Percent to EM Converter

Translate percentage font sizes into em values. Type 150 and you get 1.5em; paste a list of percentages from an old stylesheet into the bulk box to convert them all at once. The base font size field is available if you want to cross-check pixel sizes, but it does not change the percent-to-em ratio.

The conversion rule

For the font-size property, a percentage and an em unit reference the same thing: the inherited font size of the parent. That makes the conversion a simple division:

em = percent ÷ 100

Worked example: rewriting a component

Suppose a card component uses font-size: 112.5% for its title and font-size: 87.5% for its caption. Converted, those become 1.125em and 0.875em. The rendered size is identical: inside a 16px parent the title is 18px and the caption 14px. The benefit is consistency – em is also the natural unit for the card's padding and gap, so the whole component now scales with one number.

Where the two units differ

The one-to-one relationship only holds for font sizes. If you convert padding: 5% to 0.05em, you change its meaning: percentage padding is measured against the width of the containing block, whereas em padding follows the font size. Only convert percentages that sit on font-size or line-height-like properties that reference font size.

Why switch at all?

Em values read more naturally next to modern spacing scales, work in calc() without surprises, and match what most design-token tools output. If you prefer sizes that do not compound through nesting, go one step further with Percent to REM, or check the actual pixel output with EM to PX.