em, rem and px Converter (CSS Relative Units)

1.5em is not a length until you know the parent’s font size, and 1.5rem is not a length until you know the root’s — which the reader is entitled to change. This converts between em, rem, percentages and every absolute CSS unit, shows what your layout does for a reader who has set 20 or 24 px, and refuses ex and ch, which no formula can supply.

Last updated 24 Sep 2026

em, rem, %, px and the absolute CSS units

Relative units → px, with the context stated

What have you got?

How many?

Parent’s computed font size (px)What em resolves against. On an element inside a 20 px paragraph, 1em is 20 px — not 16.

Root font size (px)What rem resolves against: the computed font-size of the html element. The browser default is 16 px and the reader is entitled to change it, which is the whole accessibility argument.

For the compounding demonstration: nested em factor1.25em applied to an element inside an element inside an element multiplies, because each level’s em is the level above’s computed size. rem does not do this.

Not a circuit: a to-scale comparison. Each pair of bars is one reader. The left bar of each pair is your declaration written in rem, so its height is proportional to that reader's own root font size — 16, 18, 20 and 24 px, and the bar heights are in exactly that ratio. The right bar is the same declaration written in px, the same height for all four readers because it ignores them entirely. The gap between the two bars in the right-hand pair is the accessibility cost of sizing type in pixels, and it is a third of what that reader asked for.

24.0000pxExample

1.5rem, at the browser’s default 16 px root

Two contexts, then exact arithmetic

px = em × parent font size · px = rem × root font size · px = % ÷ 100 × parent font size (for font-size) · 1in = 96px · 1pt = 4/3 px · 1pc = 16px · 1mm = 96/25.4 px

parent font size: the computed font-size of the parent element, in px. This is what em resolves against inside the font-size property; in every other property em resolves against the element’s own computed font-size
root font size: the computed font-size of the html element. The browser default is 16px and the reader may have changed it. Setting html { font-size: 62.5% } to make 1rem equal 10px is a common trick and it throws that setting away
96: CSS pixels per CSS inch, by definition in the CSS Values and Units specification. Every absolute unit is derived from it, so 1pt = 96/72 = 4/3 px exactly, with no rounding anywhere
ex, ch, cap, ic: not convertible. They are font metrics — the used x-height, the advance of the “0” glyph, the cap height, the advance of 水 — and they change with every typeface. The spec’s 0.5em fallback for ex is what a browser does when the metric is missing, not what an ex equals

Worked example

1.5rem, at the browser's default 16 px root
rem multiplies the root font size, so 1.5 × 16 = 24 px
In CSS points that is 24 × 72/96 = 18 pt exactly, because a CSS inch is defined as 96 px
The same declaration for a reader who has set their default to 20 px renders at 30 px, and at 24 px it renders at 36 — it scales with them, which is the point of rem
Written as 24px instead it renders at 24 px for everybody, so the 24 px reader loses 12 px, a third of what they asked for
As an em it depends on the parent: 1.5em on this 16 px parent is also 24 px, but 1.5em inside a 20 px paragraph is 30

The absolute CSS units, all derived from one definition

Every figure computed from `1in = 96px`, which is the CSS Values and Units specification’s own definition. Three of these are exact ratios with no rounding at all: a point is 4/3 of a pixel, a pica is 16 pixels, an inch is 96. The millimetre ones are not exact because 25.4 does not divide 96.
Unit	In px	Per px	In mm	Note
px	1.000000	1.000000	0.264583	1/96 in by definition — the reference unit
pt	1.333333	0.750000	0.352778	1/72 in, so exactly 4/3 px
pc	16.000000	0.062500	4.233333	12 pt, so exactly 16 px
in	96.000000	0.010417	25.400000	exactly 96 px. Not a measurement of your screen
cm	37.795276	0.026458	10.000000	37.7953 px
mm	3.779528	0.264583	1.000000	3.7795 px
Q	0.944882	1.058333	0.250000	a quarter of a millimetre, 0.9449 px

What a multiplier renders at, by the reader’s root size

Read down a column and you have the accessibility argument in one table. A reader at 24 px gets 36 px headings from a 1.5rem declaration and 24 px from a “24px” one — the second ignores them entirely. Read across a row and you have a type scale. The 12 px row is there for completeness: nobody should be designing to it, but readers who have zoomed out do land there.
Root (px)	0.875rem	1rem	1.125rem	1.5rem	2rem	2.5rem
12	10.50	12.00	13.50	18.00	24.00	30.00
14	12.25	14.00	15.75	21.00	28.00	35.00
16	14.00	16.00	18.00	24.00	32.00	40.00
18	15.75	18.00	20.25	27.00	36.00	45.00
20	17.50	20.00	22.50	30.00	40.00	50.00
24	21.00	24.00	27.00	36.00	48.00	60.00
32	28.00	32.00	36.00	48.00	64.00	80.00

Every relative unit, what it resolves against, and whether this page will convert it

The four “no” rows are the honest part. ex, ch, cap and ic are font metrics: they are read out of the font file that actually renders, so no calculator can give you a number without knowing the typeface, the weight and the fallback chain. The specification’s 0.5em for ex is what a browser assumes when it cannot read the metric — a fallback, not an equivalence. Anyone who tells you 1ex is 0.5em has quoted the error case.
Unit	Resolves against	Converted here?	Notes
em	the computed font-size of the element it is used on — and, in the font-size property itself, of the PARENT	yes	Compounds when nested. 1.25em three levels deep is 1.953 times the outer size
rem	the computed font-size of the root (html) element	yes	Does not compound. The usual default for type and spacing
%	for font-size, the parent’s font size; for width, the containing block’s WIDTH; for line-height, the element’s own font size	yes	The most dangerous unit on the list, because it means different things on different properties
ex	the used x-height of the first available font	no	Refused on this page. A font metric, not a length — and the spec’s own fallback is 0.5em when the metric is unavailable
ch	the advance measure of the “0” glyph in the font in use	no	Refused on this page, for the same reason. In a monospaced font it is the character cell; in a proportional one it is whatever that font’s zero happens to be
cap	the used cap-height of the first available font	no	Refused. Another font metric
ic	the advance measure of the CJK water ideograph 水	no	Refused. Font metric again, and only meaningful with a CJK font loaded
lh / rlh	the computed line-height of the element, or of the root	no	Not refused so much as circular: line-height is often itself specified in em or as a number, so there is nothing fixed to convert to
vw / vh / vmin / vmax	1% of the viewport width or height	no	Not on this page: they need a viewport size, which is the reader’s window and not a document property

Why nobody can tell you what 1.5em is

em and rem are multipliers, not lengths. 1.5em means one and a half times the font size in force, and 1.5rem means one and a half times the root’s. Neither has a pixel value until somebody supplies that context, which is exactly why a search engine’s unit widget cannot answer the question and why this page asks you for two numbers before it answers anything. With the browser default of 16 px, 1.5rem is 24 px; inside a 20 px paragraph, 1.5em is 30.

em compounds and rem does not, and that is the whole reason rem was added. Because em resolves against the element’s own computed font size, and because font-size inherits, a 1.25em rule applied at every level of a nested list multiplies: 1.25, 1.563, 1.953, 2.441. Four levels into a navigation menu the type is two and a half times the size you wrote, and nobody wrote that. rem resolves against the root every time, so it does not accumulate. There is one further trap inside em itself: in the font-size property, em resolves against the parent’s computed size, because the element’s own is what is being defined. In every other property it resolves against the element’s own. So font-size: 1.2em; padding: 1em gives padding of 1.2 parent-ems.

Percentages are worse, and the reason is that the referent changes with the property. On font-size, a percentage is of the parent’s font size, so 150% and 1.5em are the same declaration. On width, margin and padding it is a percentage of the containing block’s width — including padding-top and margin-bottom, which is why the aspect-ratio trick of padding-top: 56.25% works and why vertical percentage margins behave so strangely. On line-height it is of the element’s own font size. Three referents, one symbol, and no converter can disambiguate them without being told which property you are in.

The absolute units are absolute relative to a definition, not to the world. CSS fixes 1in at exactly 96px, and everything else follows: 1pt is 96/72 = 4/3 px exactly, 1pc is 16 px exactly, 1mm is 96/25.4 = 3.7795 px. On a printer those usually come out as real inches and millimetres. On a screen they do not, and they cannot: the browser has no idea how large your display is. What matters more is that absolute units ignore the reader’s font-size preference completely — a heading set in 24px stays 24px for a reader who has asked for 24px body text, and the heading stops being a heading.

ex and ch are refused here, deliberately. An ex is the used x-height of the first available font and a ch is the advance measure of that font’s “0” glyph. Both are read out of the font file that actually renders, so they change with the typeface, the weight, the variable-font axis setting and the fallback chain — Helvetica’s x-height is 0.523 em, Verdana’s 0.545 and Times New Roman’s 0.448 — a spread of twenty-two per cent between the last two — and in a proportional font a ch is not a character width at all. The CSS 2.0 specification itself asserted 0.58 for Verdana, which measurement does not support, and that is the clearest demonstration there is that an x-height is a number to be read out of a font and not one to be published. The current CSS specification says that where the x-height cannot be determined “a value of 0.5em must be assumed”, and that sentence is a browser’s error handling, not a conversion factor. Publishing “1ex = 0.5em” would be quoting the fallback as though it were the answer. cap and ic are refused on the same grounds. For the fixed typographic units these shadow — the four different points, picas, ciceros and twips — see the typographic units converter, and for the page a CSS inch prints onto, the paper size converter.

Frequently asked questions

What is 1.5em in px?

1.5 times the font size in force where you use it, and nothing more definite than that. On a 16 px parent it is 24 px; on a 20 px parent it is 30. In the font-size property specifically it multiplies the PARENT’s computed size; in every other property it multiplies the element’s own.

What is the difference between em and rem?

em resolves against the nearest font size — the element’s own, or the parent’s inside font-size — so it compounds through nesting. rem always resolves against the root element’s font size, so it does not. A 1.25em rule at four nesting levels gives 2.441 times the outer size; 1.25rem gives 1.25 times the root, every time.

Is 1rem always 16px?

Only if the root font size is 16 px, which is the browser default and not a guarantee. A reader who has set their default to 20 px makes 1rem 20 px, which is the whole point of the unit. It also changes if the page sets html { font-size: … } — and the popular 62.5% trick, which makes 1rem equal 10 px for easier arithmetic, throws the reader’s preference away unless it is written as a percentage of their size rather than a px value.

Why is 1pt exactly 4/3 px in CSS?

Because the CSS Values and Units specification defines 1in as exactly 96px and 1pt as 1/72in. 96 divided by 72 is 4/3, with no rounding. That makes 12pt exactly 16px, which is why print and web type scales line up so cleanly. Neither figure is a measurement of a screen.

What is 1ex in pixels?

Unanswerable without the font. An ex is the used x-height of the first available font, which is a number in the font file: Helvetica’s is 0.523 em, Verdana’s 0.545, Times New Roman’s 0.448, and a variable font’s moves with its axes. The CSS specification says browsers must assume 0.5em where the metric cannot be determined; that is fallback behaviour, and quoting it as “1ex = 0.5em” turns an error case into a false conversion. Same for ch, cap and ic.

Should I size type in px or rem?

rem, if the reader’s preference matters to you — and it should. A layout in px ignores a reader who has set their browser default to 20 or 24 px; the same layout in rem scales with them. Pixel values remain sensible for things that genuinely should not scale, such as a one-pixel border or a hairline rule.

Does a percentage always mean the same thing?

No, and this catches everybody. On font-size it is a percentage of the parent’s font size. On width, height, margin and padding it is a percentage of the containing block’s width — including the vertical ones, which is why padding-top: 56.25% makes a 16:9 box. On line-height it is a percentage of the element’s own font size, and unlike a unitless line-height the computed value is what inherits.

Related calculators

References

W3C, CSS Values and Units Module Level 4 (w3.org/TR/css-values-4/ and the editor’s draft at drafts.csswg.org, read 26 September 2026) — a public specification, quoted directly. It fixes 1in = 96px, 1pt = 1/72in, 1pc = 12pt and 1px = 1/96in; defines em as “the computed value of the font-size property of the element on which it is used”, and notes that in the font-size property itself it resolves against the size inherited from the parent; defines rem as “the computed value of the em unit on the root element”; and defines ex as the used x-height and ch as the advance measure of the “0” glyph — both font metrics, which is why this page refuses them. It also gives the fallbacks the spec mandates when those metrics are unavailable: “a value of 0.5em must be assumed” for ex.
Jukka Korpela, Test page for estimating the relative x-height (aspect ratio) of a font (jkorpela.fi/x-height.html, read 26 September 2026), which measures the ratio in the browser rather than asserting it: Arial 0.519, Helvetica 0.523, Verdana 0.545, Georgia 0.481, Times New Roman 0.448. It also records that “the CSS 2.0 specification claims that Verdana has aspect ratio of 0.58, contrary to other sources” — which is the clearest possible demonstration that an x-height is a font metric to be read, not a constant to be published.
Wikipedia, Point (typography) (read 26 September 2026), for the competing definitions and their dates: the Didot point of 1783 at 1/72 of a French inch, “approximately 0.375972 mm”; Berthold’s 1878 redefinition, “0.376065 mm”, with 798 points to 30 cm; the DIN nominal value of 0.375 mm; the American point of 1886 at 0.013837 in, on a Johnson pica of 0.166044 in; the TeX point of 1982 at 1/72.27 in = 0.35145980 mm; and the PostScript point of 1984 at 1/72 in.
National Institute of Standards and Technology, Refinement of Values for the Yard and the Pound, Federal Register notice of 1 July 1959, which fixed the international inch at exactly 25.4 mm and the avoirdupois pound at exactly 0.45359237 kg. Both exact values are used throughout this batch; every inch-to-millimetre figure here is therefore exact, not approximate.