Leading is the vertical distance between the baselines of consecutive lines of text, usually expressed in points or as a multiple of the type size. In typography, it is one of the three settings that most strongly decide readability, together with type size and line length.
The word comes from metal typesetting, where compositors inserted thin strips of lead between lines to open them up. Digital tools keep the name, while web design calls the same property line height. Pronounced like the metal, leading shapes both legibility and the overall gray value, or texture, of a text block.
How leading is measured and specified
Leading is measured baseline to baseline, so it includes the type size itself plus any extra space. Typographers write it as a fraction such as 10/12, meaning 10-point type on 12-point leading, which leaves 2 points of added space between lines.
Layout applications often apply automatic leading of about 120 percent of the type size. CSS uses a unitless line-height multiplier and distributes the extra space as half-leading above and below each line box, which is why text in a browser can appear to have uneven space at the top of a container.
| Notation | Example | Where it is used |
|---|---|---|
| Points, size over leading | 10/12 pt | Print typesetting and specifications |
| Percentage of type size | 120 percent | Layout and design applications |
| Unitless multiplier | 1.5 | CSS line height, inherited proportionally |
| Absolute pixels | 24 px for 16 px text | Screen layouts on a fixed grid |
| Negative or solid setting | 10/10 or tighter | Large display headlines |
A unitless value is generally the safest choice on the web, because it scales with the font size of each element instead of inheriting a fixed computed value.
Typical leading values for different text
Appropriate leading decreases as type size increases. Small text needs relatively generous spacing to guide the eye back to the next line, while large headlines look loose and disconnected with the same proportion.
| Text role | Typical leading | Reason |
|---|---|---|
| Body text on screen | 1.4 to 1.6 times size | Supports comfortable reading at length |
| Body text in print | About 1.2 to 1.45 times size | Higher resolution and fixed measure |
| Captions and small notes | 1.3 to 1.5 times size | Small size needs relatively more space |
| Subheadings | 1.15 to 1.3 times size | Keeps multi-line headings compact |
| Display headlines | 0.9 to 1.15 times size | Large lines look disconnected if loose |
| All-capital settings | Can be tighter than mixed case | No descenders compete for space |
Accessibility guidance reinforces the generous end of the body-text range. WCAG 2.1 success criterion 1.4.12 requires that content remain usable when users increase line height to at least 1.5 times the font size, so layouts must not break when leading grows.
Leading compared with related spacing settings
Leading controls vertical space between lines, whereas kerning and tracking control horizontal space between characters. Confusing these settings is a common source of poor typographic decisions.
| Setting | Direction | What it adjusts | Interaction with leading |
|---|---|---|---|
| Leading | Vertical | Distance between baselines | Reference setting |
| Tracking | Horizontal | Uniform space across a range of letters | Wider tracking often needs more leading |
| Kerning | Horizontal | Space between specific letter pairs | Little direct effect |
| Paragraph spacing | Vertical | Space between paragraphs | Should exceed the leading to mark paragraphs |
| Baseline grid | Vertical | Fixed rhythm for all lines on a page | Leading is set to the grid increment |
The x-height of a typeface also influences the right value. Faces with a large x-height look denser and usually need slightly more leading than faces with a small x-height at the same point size.
Choosing leading in practice
Choosing leading means balancing type size, line length and typeface rather than applying a single universal number. Longer lines require more leading because the eye travels farther back to find the start of the next line.
- Start with the measure: for lines of about 45 to 75 characters, begin near 1.4 to 1.5 and adjust visually.
- Increase for long lines: very wide columns benefit from extra leading to prevent doubling, where the eye rereads a line.
- Tighten headlines deliberately: check that ascenders and descenders in adjacent lines do not collide.
- Align to a baseline grid in multi-column print layouts so lines match across columns.
- Test with real content in the target language, because accents and tall scripts need more vertical room.
Common leading mistakes
Leading errors make text tiring, fragmented or cramped, often without readers knowing why.
- Leaving default auto leading on body text on screens, where 120 percent is usually too tight.
- Excessive leading that separates lines so far that paragraphs fall apart into stripes.
- Paragraph spacing smaller than leading, which hides paragraph breaks.
- Fixed pixel line heights that do not scale when users enlarge text.
- Equal leading for headlines and body text, which makes large headings look loose.
The idea in brief
Leading is the space between lines of text. Too little space and the lines feel crowded, so your eyes slip to the wrong line. Too much space and the paragraph falls apart into separate stripes.
Good leading works like well-spaced rungs on a ladder. You move from one line to the next without thinking about it. Most readers never notice good leading, but they feel tired when it is wrong.
A practical scenario
A designer reviews a long-form article page where readers complain that the text feels heavy. The body copy is set at 18 px with a line height of 1.2, inherited from a heading style, on a column about 90 characters wide.
The designer narrows the column to roughly 70 characters and raises the body line height to 1.6, while headlines keep a tighter 1.1. Paragraph spacing is set to 1.2 em so that breaks remain visible above the new leading, and the values are stored as unitless tokens in the design system.
After the change, the text block looks lighter and more even. Readers on phones and desktops can follow lines without losing their place, and the page continues to work when users override line height for accessibility.