Px to Em Converter

Convert CSS sizes between px, em, pt and % from a base size.

Uses 16 px default base and keeps px, em, pt and % in sync.

Updated August 20, 2026

CreatorFrank Zhao

Loading calculator…

Introduction / Overview

The Px to Em Converter translates the same physical size between the four CSS font-size units you meet every day: $\mathrm{px}$ , $\mathrm{em}$ , $\mathrm{pt}$ and $\%$ . Set a base size once — the calculator defaults to $16\,\mathrm{px}$ , the browser default — then type a value in any one field. The other three update instantly and stay in sync no matter which field you edit next.

Who it is for

Front-end developers, designers, and anyone handing off typography between Figma and code who needs to answer “what is 24 pt in em when the base is 16 px?” without mental math.

What makes it reliable

Every conversion follows the definitions from the live calculator: $\mathrm{em}=\mathrm{px}/\mathrm{base}$ , $\mathrm{pt}=0.75\,\mathrm{px}$ and $100\%=1\,\mathrm{em}$ . Values are kept at full precision internally and only rounded for display, so editing any field re-derives the others consistently.

The four units at a glance

px — absolute screen dots. Sharp but not relative to the user's default size.
em — multiples of the base size. $1\,\mathrm{em}=\mathrm{base}$ and scales with the parent.
pt — print points ( $1\,\mathrm{pt}=0.75\,\mathrm{px}$ ). Useful only for print stylesheets.
% — the same idea as em, just on a 0–100+ scale: $100\%=1\,\mathrm{em}$ .

How to Use (Quick Start)

You never need to fill all five boxes. Change any one value — the converter recalculates the rest automatically. The two worked examples below match the live calculator exactly.

Confirm the base size

The top field shows $16\,\mathrm{px}$ by default. Leave it if your design uses the browser default, or change it to your root font size (e.g. 10 px, 18 px, 20 px).

Enter a value in any unit

Type $24\,\mathrm{pt}$ into the “Is the same as (pt)” field, or $2\,\mathrm{px}$ into “Object's size” — any of the four convertible fields works. Values must be positive; negative or zero triggers a “Please ensure a positive value.” warning.

Read all four equivalents

The other fields fill immediately. Now try editing a different field — for example change the percent value — and watch the calculator re-derive the former input instead of stacking extra results.

Worked example A — the guide's reference (matches the calculator)

Convert $24\,\mathrm{pt}$ with a base of $16\,\mathrm{px}$ . This is the same path the original Omni example uses.

\mathrm{px}= \tfrac{4}{3}\times\mathrm{pt}

=

\tfrac{4}{3}\times 24

=

32\,\mathrm{px}

\mathrm{em}= \mathrm{px}/\mathrm{base}

=

32/16

=

2\,\mathrm{em}

\% = \mathrm{em}\times100

=

2\times100

=

200\%

\quad\text{and}\quad \mathrm{pt}=0.75\times32=24\,\mathrm{pt}\ \checkmark

So $24\,\mathrm{pt}=32\,\mathrm{px}=2\,\mathrm{em}=200\%$ at a 16 px base — exactly what you see in the live form.

Worked example B — small value (user question answered)

Base stays $16\,\mathrm{px}$ , enter $2\,\mathrm{px}$ in “Object's size”.

\mathrm{em}=2/16

=

0.125\,\mathrm{em}

\quad;\quad \mathrm{pt}=0.75\times2

=

1.5\,\mathrm{pt}

\quad;\quad \%=0.125\times100

=

12.5\%

The percent box therefore shows 12.5 with a trailing %, i.e. 12.5 % — not 1250 %. The display value is already on the 0–100+ scale ( $100\%=1\,\mathrm{em}$ ), and you can verify it backwards: $12.5\times16/100=2\,\mathrm{px}$ .

How to read the form: fields you typed stay white; fields the system filled for you are tinted blue. Blue means “derived from your inputs.” Editing a blue field promotes it to an input and re-derives its former source — the value may change, which is expected.

Calculation Method

All five boxes belong to one connected system. Three compact relations tie them together, so any single value you change determines the others. No rounding is baked into the logic — rounding only touches what you see.

\mathrm{em}=\frac{\mathrm{px}}{\mathrm{base_{px}}}\qquad \mathrm{px}=\mathrm{base_{px}}\times\mathrm{em}

\mathrm{pt}=0.75\times\mathrm{px}\qquad \mathrm{px}=\frac{4}{3}\,\mathrm{pt}

\%=\mathrm{em}\times100=\frac{\mathrm{px}}{\mathrm{base_{px}}}\times100

Each equality works in every direction; pick any one of the four size fields as the input.

Variables

$\mathrm{base_{px}}$ — reference font size, default 16 px
$\mathrm{px},\ \mathrm{em},\ \mathrm{pt},\ \%$ — four views of the same length

Assumptions

$1\,\mathrm{pt}=1/72\,\mathrm{in}=0.75\,\mathrm{px}$ at 96 dpi screen assumption (CSS reference pixel).
$1\,\mathrm{em}=100\%$ exactly; therefore $0.125\,\mathrm{em}=12.5\%$ not 1250 %.

Internally the percent value is stored as a fraction ( $2.0$ for 200 %), but the field you see is already on the 0–100 scale thanks to a $\times 100$ display conversion. That is why the equation $\mathrm{px}= \mathrm{percent}\times\mathrm{base}/100$ from the original data model holds while the box still shows 200 for 2 em.

Why editing a derived field can move the previous input

The base field starts as a default (weaker) rather than a hard user lock. If you enter $32\,\mathrm{px}$ you get $2\,\mathrm{em}$ . If you then change that 2 em to $1\,\mathrm{em}$ , the system may re-derive the base instead of px to keep $\mathrm{px}=\mathrm{base}\times\mathrm{em}$ true. The three values stay consistent; the one that moves is the weakest anchor.

Real-World Examples

From design comp to CSS — 10 px base system

Your root is 10 px for easy mental math (62.5 % trick). The comp says 24 px.

\mathrm{base}=10

\ \Rightarrow\

\mathrm{em}=24/10=2.4

\ \Rightarrow\

240\%

\ ;\ \mathrm{pt}=0.75\times24=18

Write $font-size: 2.4em$ or $240\%$ — both equal 24 px at this base. If you later change the root to 16 px, the same 2.4 em becomes 38.4 px, so use the converter again.

Scaling with percent for a responsive hero

The hero heading should be 150 % of the body size on mobile, body base is 18 px.

\mathrm{base}=18,\ \%=150

\ \Rightarrow\

\mathrm{em}=1.5

\ \Rightarrow\

\mathrm{px}=27

\ \Rightarrow\

\mathrm{pt}\approx20.25

Set $150\%$ in the percent box, read $27\,\mathrm{px}$ as the pixel fallback for older email clients that ignore em.

Need the reverse for images or print? Enter the physical size you know — for example Pixels to Inches Converter helps when you jump from pixels to real-world inches via PPI, while this page stays within CSS typography units.

Tips & Best Practices

Start with the base

Change the base first, then enter the value you actually have. The base is the only field with a default, so editing it re-derives everything relative to it.

Prefer em / % for responsive type

Use $\mathrm{em}$ or $\%$ for headings and components that should track the user's default size. Reserve $\mathrm{px}$ for hairlines and $\mathrm{pt}$ only inside $@media\ print$ .

Mind the cascade

Nested $\mathrm{em}$ multiplies. If a card is $0.875\,\mathrm{em}$ inside a $1.25\,\mathrm{em}$ section, the real size is $0.875\times1.25=1.09375\,\mathrm{em}$ of the root. Convert at the root base, then reason about nesting separately.

Avoid rounding drift

A few re-entries of rounded values can drift by 0.1 px. Copy the precise value you see (the calculator keeps full precision internally) when you paste into CSS, and do the final rounding once.

Limitations & Disclaimers

•Pure unit math only — the converter does not account for browser zoom, device pixel ratio, or parent element scaling beyond the single base you provide.
• $\mathrm{pt}$ uses the CSS reference $1\,\mathrm{pt}=0.75\,\mathrm{px}$ at 96 dpi. Actual printed size depends on printer and OS settings.
•All fields require positive numbers; zero or negative inputs show an inline error and do not produce conversions.
•Display is rounded for readability, but the underlying value stays at full precision for the next edit.

Frequently Asked Questions

Is 12.5 % or 1250 % correct for 2 px at 16 px base?

$12.5\%$ is correct. $0.125\,\mathrm{em}$ equals $12.5\%$ because $100\%=1\,\mathrm{em}$ . The box already shows the value on the percent scale, so $2/16=0.125 \rightarrow 12.5\%$ . Check backwards: $12.5\times16/100=2\,\mathrm{px}$ .

When should I use em, %, px, or pt?

Use relative units for anything that should respond to the user's default size:

$\mathrm{em}$ / $\%$ — body text, headings, paddings that scale.
$\mathrm{px}$ — borders, 1 px lines, pixel-perfect icons.
$\mathrm{pt}$ — only print stylesheets.

Can I type in the percent field and get back px?

Yes — the system is fully bidirectional. Enter $150\%$ with base $16$ and you get $24\,\mathrm{px}$ ( $150\times16/100$ ), $1.5\,\mathrm{em}$ and $18\,\mathrm{pt}$ instantly. Any of the four size fields can be the starting point.

Why does changing a blue field move another value?

Blue means “derived.” Editing it promotes it to a new input. To keep $\mathrm{px}=\mathrm{base}\times\mathrm{em}$ true, the weakest previous input (often the default base of 16) is re-derived. The numbers stay consistent — the source simply shifts to the field you just edited.

Related Calculators

Scale Calculator

Calculate scale factors and convert scaled or real dimensions for length, area, and volume.

Try Now

Roman Numeral Converter

Convert an Arabic number up to 3,999,999 into Roman numerals or read a Roman numeral back into a number. Both directions run in your browser.

Try Now

Percentage Calculator

Solve common percentage problems: X% of Y, X is what percent of Y, and percent increase/decrease

Try Now

Fraction to Percent Calculator

Convert fractions to percentages and vice versa instantly

Try Now

Grams to Tablespoons Converter

Convert grams to tablespoons for any ingredient instantly. Perfect for cooking and baking with support for multiple ingredients.

Try Now

Decimal to Percent Converter

Convert decimal numbers to percentages with real-time bidirectional conversion

Try Now