Percent to EM Converter

Convert between Percentage (%) and EM CSS units with customizable parent font size

Live Font Size Preview

Hello

Conversion Formula

How Percent and EM relate to each other

% → EM

em = % ÷ 100

e.g. 100 ÷ 100 = 1em

EM → %

% = em × 100

e.g. 1 × 100 = 100%

Note: Both units reference the parent element's font size, so the conversion ratio is always 1:100 regardless of context.

CSS Style Properties

Percent value

h1 {
  font-size: 100%;
}

EM value

h1 {
  font-size: 0em;
}

Percent to EM Conversion Table

Parent font size: 16px

Percent (%)EMPixels (px)
25%0.25em4px
50%0.5em8px
75%0.75em12px
100%1em16px
125%1.25em20px
150%1.5em24px
175%1.75em28px
200%2em32px
225%2.25em36px
250%2.5em40px
275%2.75em44px
300%3em48px
325%3.25em52px
350%3.5em56px
375%3.75em60px
400%4em64px
425%4.25em68px
450%4.5em72px
475%4.75em76px
500%5em80px

About Percent to EM Conversion

What is Percent (%)?

Percent (%) is a relative CSS unit. For font-size, it is relative to the parent element's font size. 100% means "the same as the parent", 50% means half, and 200% means double.

What is EM?

EM is a relative CSS unit that, for font-size, is also relative to the parent element's font size. 1em = the parent's font size. Unlike REM, EM compounds when nested — a child at 1.5em inside a parent at 1.5em results in 2.25× the root size.

The Conversion Formula

em = % ÷ 100

Because both EM and percent reference the same thing (the parent font size), the conversion is a simple divide-by-100. 150% = 1.5em, always — no matter what the parent font size is.

When to Use Percent vs EM

  • Percent: More readable for designers and non-developers; common in older CSS and CMS themes.
  • EM: Preferred in modern CSS and component libraries; can also be used for spacing and layout.
  • For font-size they are interchangeable — 100% = 1em. Choose EM for consistency with other CSS properties.

Common Conversions

25%

0.25em

50%

0.5em

75%

0.75em

100%

1em

125%

1.25em

150%

1.5em

175%

1.75em

200%

2em

How to Use the Percent to EM Converter

  1. 1

    Enter your value

    Type the percentage (or EM) value you want to convert into the "From Value" input field.

  2. 2

    Select the unit direction

    Choose % or em in both dropdowns. Use the swap button to reverse direction instantly.

  3. 3

    Adjust the parent font size if needed

    Click Show Settings to set the parent font size. This affects the pixel column in the reference table and the live preview.

  4. 4

    Read the result and copy

    The converted value appears instantly in the "To Value" field. Click Copy to copy it to your clipboard.

  5. 5

    Check the live preview and table

    The Live Font Size Preview shows how the result looks visually. The table below lists common percent values with their EM and pixel equivalents.

Tip: Since 1em always equals 100% for font-size, the conversion is always a simple divide or multiply by 100. You don't need to know the parent font size to get the EM value — only to see the pixel equivalent.

Common Use Cases

Legacy CSS Modernisation

  • • Convert old percentage-based font sizes to modern EM values
  • • Migrate Bootstrap or Foundation percentage typography to EM
  • • Clean up CMS-generated stylesheets that use percent font sizes

Component-Level Typography

  • • Set consistent EM font sizes within self-contained UI components
  • • Convert a designer's percentage spec to EM for implementation
  • • Verify that nested components scale correctly with EM inheritance

Email Template Development

  • • Many email clients handle EM better than REM — convert from % specs
  • • Translate percentage font sizes from design mockups to EM in HTML email
  • • Verify readable font sizes across different email client base sizes

Design System Documentation

  • • Document type scales in both % and EM for cross-team clarity
  • • Generate a reference table for the design system style guide
  • • Align designer (percent) and developer (em) mental models

Accessibility Auditing

  • • Replace fixed px font sizes with EM for user-scalable text
  • • Convert WCAG-recommended minimum sizes to EM equivalents
  • • Audit components for font sizes that may be too small at 100%

Learning & Teaching CSS

  • • Illustrate the equivalence of 100% and 1em for CSS beginners
  • • Demonstrate how EM compounds in nested elements vs percent
  • • Use the live preview to visualise font size changes interactively

Frequently Asked Questions

What is the formula to convert percent to EM?

Simply divide by 100: em = % ÷ 100. Because both units reference the parent element's font size, the ratio is always constant — 150% = 1.5em, regardless of what the parent font size actually is.

Are percent and EM the same thing for font-size?

Yes, for the font-size property they are equivalent — both are relative to the parent element's font size. 1em = 100%, 1.5em = 150%, and so on. They differ for other CSS properties, where EM references the element's own font size.

How does EM compounding work in nested elements?

If you set a parent to font-size: 1.5em and a child to font-size: 1.5em, the child computes to 1.5 × 1.5 = 2.25× the ancestor's size. This compounding is why REM is often preferred for consistency.

When should I use EM instead of REM?

Use EM when you want an element to scale proportionally with its immediate parent — useful for self-contained components like buttons or badges where spacing and font size should all scale together. Use REM for global typography that should stay consistent regardless of nesting.

Do I need to know the parent font size to convert % to EM?

No — the EM value itself does not depend on the parent font size. The conversion is always em = % ÷ 100. You only need the parent size if you want to know the resulting pixel value.

How do I convert EM back to percent?

Multiply by 100: % = em × 100. Use the swap button in this tool to reverse the direction instantly.

Is my data safe? Does this tool send data to a server?

No data leaves your browser. All calculations happen entirely client-side using JavaScript. Nothing you enter is uploaded or stored anywhere.

What is the difference between EM and REM?

EM is relative to the nearest parent element's font size and can compound when nested. REM (Root EM) always references the root html element's font size, making it predictable at any nesting depth.