Typography

Line Height

Line height is the vertical gap between one line of text and the line below it, controlling how comfortably you can read through several lines.

Line height is the vertical spacing between lines. Too tight and the lines cram together and feel stuffy; too loose and they no longer read as one paragraph, so the flow breaks. Body text usually feels comfortable with a generous value.

line-height 1.5 · Just right

line-height1.5

Definition

Line height is the vertical gap between the characters on one line and the characters on the line below it. It's usually written as a multiple of the font size, so a line height of 1.5 means each line takes up 1.5 times the font size. Technically that value includes the height of the text itself, so it helps to picture the extra space as padding split above and below each line. When this value is too tight, the lines crowd together and the text feels dense and cramped. When it's too loose, the lines drift so far apart that a single paragraph stops reading as one block. In short, line height controls how comfortably you can move through several lines of text.

Why does it matter?

When someone reads a long passage, their eyes finish one line and then have to snap back precisely to the start of the next one. With the right line height that jump flows naturally, but when the spacing is too tight the eye confuses one line with the one above it, so the reader rereads a line or skips one entirely. Too loose, and the gaps pull the paragraph apart so it's hard to tell where one block ends. A well-judged line height gives the text room to breathe while still binding a paragraph into a single unit. This matters most in body copy that people read for a while: nailing the line height alone can noticeably improve perceived readability and raise the odds that someone reads all the way to the end. The more text a screen holds, the bigger this effect gets, so on any page with long passages, line height is a great value to check first.

Common mistakes

Using the same line height for body text and headings. A generous line height that suits multi-line body copy will make a one- or two-line heading look overly stretched, so the heading drifts apart and loses the cohesion it needs to read as a single unit.
Keeping the line height tight when a line is very long. The longer a line gets, the harder it is to find the next one, and a cramped line height on top of that makes the eye lose its place so often that reading quickly becomes exhausting.
Adding several blank lines between paragraphs to fake more line height. Spacing between lines belongs to line height, while spacing between paragraphs should be handled with separate margins, which keeps the structure clean.

Practical tips

Body text feels comfortable somewhere around 1.5 to 1.7, while headings want something tighter, roughly 1.1 to 1.3. Large text already has plenty of presence, so pulling its lines closer keeps it reading as one block.
The longer a line is, the more line height it wants. Line length and line height move together, so when body copy stretches out on a wide screen, nudging the line height up a little makes it much easier to read.
Set line height as a unitless multiple rather than a fixed px value. The ratio then holds as the font size changes, so both large and small text get balanced spacing automatically and you never have to retune the line height every time you resize.

Ask your AI

Body and headings share one line-height

In the CSS/JSX below, find every line-height and reset it by role. Give multi-line body copy something between 1.5 and 1.7, and pull large one- or two-line headings tighter, around 1.1 to 1.3, so a heading holds together as a single block instead of drifting apart. Set every value as a unitless multiple, and handle the gap between paragraphs with margin rather than line-height. Give me a table of the old and new values with the reasoning.

line-height is hardcoded in px

In the code below, find every line-height set as a fixed px value like line-height: 24px, and convert each one to the nearest unitless multiple by dividing by that element's font-size (e.g. 24px / 16px → 1.5). Keep body copy within 1.5 to 1.7 and headings within 1.1 to 1.3, and leave every value unitless so the ratio holds when the font size changes. Return a mapping table of old px → multiple alongside the updated code.

Long lines on wide screens keep losing my place

This body text runs very long per line at [screen/container width — e.g. full-width desktop at 900px]. Since longer lines make the start of the next line harder to find, check whether the current line-height is too tight for that line length and raise the body line-height toward the top of the 1.5–1.7 range (say 1.65–1.7). If each line itself is simply too long, also propose narrowing it with a max-width to shorten the line. Tell me the adjusted line-height and line width together with your reasoning.