Convert em to rem at any parent font size

Both units measure length in font sizes, but each takes the font size from a different place. An em is the font-size of the element you use it on, and inside the font-size property itself it is the size inherited from the parent[1]. A rem is the font-size of the html element, the root of the whole document, so it means the same thing everywhere in your stylesheet[1].

Rem is the newer of the two. The W3C guide to CSS units says CSS has had it since 2013, to make rules that depend only on the default font size easier to write[2]. The guide shows it with an h1 set to 3em: to line its left margin up with a paragraph, the old style sheet needed 0.333em, while the new one simply says 1rem. That is exactly the sum this converter does for you.

The html element usually starts at 16px in browsers, but readers can change that in their settings[3]. If you need pixels rather than rem, use the em to px converter or the rem to px converter.

The formula has two steps: rem = em × parent font size ÷ html font size. The multiplication turns em into pixels, and the division turns those pixels into rem.

Take a heading with font-size: 1.5em inside a block whose text is 20px. That gives 1.5 × 20 = 30px, and 30 ÷ 16 = 1.875rem. When the parent is 16px, like the html element, the two steps cancel out and 1.5em is simply 1.5rem.

What goes into the Parent font-size field depends on the property. In font-size, em follows the parent. In padding, margin or width it follows the element's own font-size[1], so that is the number to enter. A 32px h1 with margin-bottom: 0.5em therefore has a 16px gap, which is 1rem, and you would type 32 in the field.

The Base font-size field is the html element. If your stylesheet starts with html { font-size: 62.5% }, type 62.5% and the converter works out 10px from it. On that base, 1.5em inside a 16px parent comes to 2.4rem.

The em is older than the web by several centuries. In metal type, the point size, and with it the em, was the height of the metal body the letter rises from, so one em in 16-point type is 16 points[4]. The name comes from the em quad, a blank piece of type used for spacing, and the em space in digital fonts is still one em wide[4].

You may have read that an em is the width of a capital M. Wikipedia lists that as an obsolete alternative definition, and in many typefaces the M does not fill the em square at all[4]. In CSS the M plays no part, and 1em is simply the current font-size.

Rem stands for root em, the em of the document's root element[2]. That root is the html element, so a rem is an em measured from one fixed font size.