<?xml version="1.0" encoding="utf-8"?>

CSS em (em)

CSS em (em) Bad Practice
CSS em (em) Best Practice

Em is a relative length unit equal to the speci­fied font size. It was originally a typographic measurement based on the current typeface's capital letter M.[1] A measurement of 1em is defined by the font-size of the element. In the example, we have a parent element purple with the declaration font-size: 16px;, and its child yellow with font-size: 1.5em;, which means that the child element's font size will be 24px.

Keep in mind that em units multiply upon themselves when applied to the font-size property. For example, if we create a child element inside yellow and set its font-size to 1.5em, the actual font size will be 16 x 1.5 x 1.5 = 36px.

Em allows speci­fying a variety of typo­gra­phic para­me­ters like spacing, kerning or tracking, so they're propor­tional to the font size used.

Improve your UX & Product skills with interactive courses that actually work