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 rightDefinition
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.