The line height calculator converts the line height (px) written in a design mockup into a CSS line-height value. Enter the font size and line height and it instantly returns three formats: a unitless ratio, a percentage, and an em value.
line-height: 1.5line-height: 150%line-height: 1.5emA unitless value passes the ratio itself down to child elements, so the line height is recalculated against each child's own font size. With em or %, the already-computed pixel value is inherited instead — a classic source of bugs where line spacing looks wrong on children with a different font size. Unless you have a specific reason not to, writing it unitless, as in line-height: 1.5, is the safe choice.
Figma's text panel shows line height in px or %. When it is shown in px, enter it here together with the font size to get the CSS value. When it is set to Auto, the font's built-in default (roughly 1.2 times the font size) is used — so if you need an exact reproduction, ask the designer for an explicit line height value.
A unitless value passes the ratio itself down to child elements, where it is recalculated against each child's font size. With em or %, the computed pixel value is inherited, which can lead to misaligned line spacing.
Divide the line height (px) by the font size (px). A 16px font with a 24px line height gives line-height: 1.5.
Body text reads best between 1.5 and 1.7, and the WCAG accessibility guidelines also recommend at least 1.5 times the font size. Headings work better with a tighter 1.1 – 1.3.
Auto line height is roughly 1.2 times the font size. For an exact value, check the px value in Figma instead of Auto, then use this calculator to get the ratio to apply.