What is Leading in Typography: Core Principles

Most text looks “off” not because of the font choice, but because of the space between lines. That space has a name: leading.

Understanding what is leading in typography helps you control readability, set up vertical rhythm, and make text blocks that actually feel comfortable to read. Whether you’re adjusting line height in CSS or setting baseline-to-baseline values in InDesign, leading affects every layout you touch.

This guide covers how leading works, where the term comes from, how it differs from line spacing and line height, and how to set it correctly for body text, headlines, and responsive screens. You’ll also learn how typeface properties like x-height and ascenders change what “good” leading looks like.

What Is Leading in Typography

Typography has a lot of moving parts. Some of them are obvious, like picking the right typeface or setting the correct font size. Others work quietly in the background, and leading is one of those.

Leading is the vertical distance between the baselines of two consecutive lines of text. It’s measured in points for print or pixels for screens.

The term comes from letterpress printing. Compositors in print shops physically placed thin strips of lead metal between rows of movable type to create space between lines. More lead meant more space. Less lead meant tighter text. The word is pronounced “ledding,” not “leeding,” because it literally refers to the metal.

Johannes Gutenberg’s movable type system, developed around 1450, used an alloy of lead, tin, and antimony. Those same materials stuck around for over 500 years in professional typesetting. And the terminology stuck too.

Today, nobody is handling strips of metal anymore. But the concept hasn’t changed. Whether you’re working in Adobe InDesign, Figma, or writing CSS, you’re still controlling the same thing: how much vertical room your text gets to breathe.

How Leading Is Measured

Leading is always calculated from one baseline to the next. The baseline is the invisible line where letters sit.

If you have 12pt type set on 14pt leading (written as 12/14), there are 2 extra points of space between the bottom of one line’s characters and the top of the next line’s characters. That extra space is the leading.

Most design software defaults to auto leading at 120% of the font size. InDesign, for instance, sets auto leading to exactly 120%. So a 10pt font gets 12pt leading by default.

That 120% number is a starting point, not a recommendation. It works fine for some typefaces and falls apart for others.

How Leading Differs from Line Height, Line Spacing, and Kerning

People mix these terms up constantly. They’re related but not the same, and knowing the differences matters when you’re trying to get text to look right.

Leading vs. Line Height

Leading is the traditional print term. It refers to the full baseline-to-baseline measurement.

Line height is what CSS uses. The line-height property works differently from print leading. It distributes extra space equally above and below each line of text, using what’s called the half-leading model.

Desktop browsers default to a line-height value of roughly 1.2, which matches that old 120% auto leading from print tools. The result looks similar, but the math underneath is different.

Leading vs. Line Spacing vs. Tracking vs. Kerning

Line spacing is a broader, less technical label that people use casually. It basically means the same thing as leading, just without the precision.

Tracking and kerning are horizontal adjustments. They have nothing to do with the vertical distance between lines. Confusing them with leading is a common mistake among people just getting into typography elements.

How Leading Affects Readability

Leading isn’t decorative. It directly controls whether people can comfortably read your text or whether their eyes lose track between lines.

What Happens When Leading Is Too Tight

Lines crash into each other visually. Ascenders from one line nearly touch descenders from the line above. Reading slows down because the eye can’t easily separate one line from the next.

Research from Butterick’s Practical Typography confirms that the optimal range for most body text falls between 120% and 145% of the point size. Drop below that range and readability degrades quickly.

A 2024 study published in MDPI’s Education journal tested how font and spacing changes affected reading speed in children (grades 3 through 5). Individual students showed significant differences in reading speed depending on spacing conditions, confirming that spacing isn’t a “nice to have” but a direct performance factor.

What Happens When Leading Is Too Loose

Go too far in the other direction and lines start to feel disconnected. The eye finishes one line and struggles to find the beginning of the next. The text block falls apart.

According to Justinmind’s UX research, spacing beyond 200% to 250% makes reading feel unnatural. The line-to-line connection breaks, and longer paragraphs become disorienting.

Accessibility and Leading

WCAG 2.1 Success Criterion 1.4.12 specifically addresses text spacing. It requires that web content must remain readable and functional when line height is set to at least 1.5 times the font size.

This isn’t a design suggestion. It’s a Level AA compliance requirement.

The British Dyslexia Association also recommends generous line spacing for readers with dyslexia. Studies on dyslexic children show that wider spacing can double reading accuracy and boost speed by over 20%.

How to Set Leading for Body Text vs. Display Text

There’s no single magic number. The right leading depends on what the text is doing on the page and how big it is.

Body Text Leading

For body copy (the long paragraphs people actually read), the sweet spot sits between 130% and 150% of the font size.

Butterick recommends starting at 120% and working up to 145%. Ebookpbook’s 2026 print book analysis narrows the range for trade books to 130% to 140%.

An 11pt font at 130% leading gives you 14.3pt of baseline-to-baseline space. A 12pt font at 135% gives you 16.2pt. These produce comfortable reading across hundreds of pages.

But you can’t just set a percentage and walk away. The typeface itself changes what “good” looks like.

Display Text Leading

Headlines and titles work differently. Large type already creates a lot of optical space between lines, so tighter leading is standard for display fonts.

A value of 1.0 to 1.2 times the font size is typical for headlines. Sometimes even less. Took me a while to get comfortable going that tight, but big text genuinely needs it to look cohesive.

Pimp my Type’s analysis confirms this: when you fit less text into one line (which is what happens with large type), you should decrease the line height. Values like 1.1 to 1.2 work well for headings, while body text needs 1.4 to 1.6.

Leading Recommendations by Font Size Range

Smaller text needs relatively more leading because the characters are already harder to distinguish. Larger text needs less because the letter shapes are clear on their own.

Leading in CSS

The CSS equivalent of leading is the line-height property. Same concept, different implementation.

How Line Height Works in CSS

Unlike traditional leading, CSS line-height uses the half-leading model. When you set line-height: 1.5 on a 16px font, the browser calculates 24px total line height. That leaves 8px of extra space, split into 4px above and 4px below the text.

This is different from print leading, where extra space only appears between lines, not above the first line or below the last.

Value Types and Why Unitless Is Best

You can set line-height in several ways:

• Unitless number (e.g., 1.5): Multiplies the element’s own font size. Inherits properly to child elements.
• Percentage (e.g., 150%): Calculates based on the element’s font size, but the computed pixel value is what gets inherited. This causes problems.
• Fixed value (e.g., 24px): Static. Doesn’t scale with font size changes. Almost never what you want.

MDN Web Docs and CSS-Tricks both recommend unitless values. Here’s why: if you set line-height: 150% on the body at 16px font size, the computed value is 24px. Every child element inherits that 24px, even a heading at 32px. The heading ends up with a line-height smaller than its font size. Text overlaps.

With line-height: 1.5 (unitless), each element multiplies its own font size by 1.5. The 32px heading gets 48px line-height. Problem solved.

Browser Defaults and WCAG

Most browsers default to a line-height of approximately 1.2. For body text, that’s too tight. WCAG 2.1 SC 1.4.12 requires that layouts don’t break when line height reaches at least 1.5 times the font size.

Kevin Powell’s CSS analysis puts it simply: most people keep this number way too small. Starting at 1.5 and adjusting from there gives better results than trying to work up from the browser default.

Leading in Print Design Software

Every major design tool handles leading slightly differently. The underlying concept is the same, but the controls, defaults, and level of precision vary.

Adobe InDesign

Auto leading in InDesign defaults to 120% of the font size. You can override this globally or per-paragraph.

InDesign gives you the most control of any print design tool. You can set leading at both the paragraph level and the character level. This means two lines in the same paragraph can have different leading values, which is occasionally useful for optical adjustments but can also create a mess if you’re not careful.

The leading value appears in the Character panel, measured in points. You can type exact values or use the arrow keys to nudge up and down.

Figma and Sketch

Figma calls it “line height” instead of leading, which matches CSS terminology more closely. You can set it as a percentage, a fixed pixel value, or leave it on Auto.

Figma’s Auto setting varies depending on the font spacing values built into the typeface file itself, so two different fonts at the same size can have different auto line heights. This catches people off guard.

Sketch works similarly but uses the label “Line” in its text inspector. Both tools lack InDesign’s paragraph-level vs. character-level distinction.

When to Use Fixed vs. Percentage-Based Leading

Fixed values (like 18pt) make sense when you’re building to a baseline grid and need every line of text to land on exact increments. Book designers and editorial layout professionals lean on this.

Percentage or auto values work better for web design and responsive layouts where font sizes shift across breakpoints. You don’t want to set 24px line-height and then watch it choke when the font scales up on larger screens.

Over 50 million websites use Google Fonts, according to Termageddon’s 2024 data. Each of those fonts has different built-in metrics, which means auto leading behaves unpredictably across typefaces. Always check visually. Don’t trust the numbers alone.

How Leading Interacts with Type Size, Typeface, and Measure

You can’t pick a leading value in isolation. It always depends on at least three other things: the typeface you’re using, how big the text is, and how wide the text column runs.

Get one of those wrong and even a “correct” leading number produces bad results.

Typefaces with Tall vs. Short X-Heights

A 2024 study by Cooreman and Beier at the Royal Danish Academy confirmed that x-height is a significant factor in letter recognition speed and legibility.

Fonts like Helvetica and Roboto have tall x-heights. Their lowercase letters fill more vertical space, which means there’s less optical breathing room between lines. These typefaces need more leading to compensate.

Garamond and Times New Roman have shorter x-heights. Their lowercase letters sit lower relative to the cap height, which leaves more built-in vertical space. You can get away with tighter leading on these.

Procreator’s typographic analysis uses a multiplier of 1.68 times the font size as a reference point for Helvetica-style typefaces. That’s notably higher than the standard 1.2 to 1.5 range most people default to.

Serif vs. Sans-Serif Considerations

Serif fonts often need slightly less leading than sans-serif fonts. The serifs themselves create horizontal stress that guides the eye along each line, so readers can tolerate tighter vertical spacing without getting lost.

Sans-serif designs lack that horizontal anchoring. The eye has fewer visual cues, so wider leading helps the reader track smoothly from one line to the next.

Robert Bringhurst’s The Elements of Typographic Style recommends more leading for typefaces with a vertical axis or no serifs. That’s not a random preference. It’s about compensating for what the letterforms don’t provide on their own.

Line Length and Leading

Longer lines need more leading. Shorter lines need less. Your mileage may vary, but this is one of the oldest rules in typesetting and it still holds.

The Baymard Institute’s UX research recommends body text line lengths of 50 to 75 characters. When columns push beyond that range, the reader’s eye struggles to find the start of the next line. Extra leading helps bridge that gap.

Pimp my Type’s analysis puts it bluntly: when lines get long and leading stays tight, readers lose orientation after about ten lines. You feel the urge to highlight text with your cursor or use a ruler. That’s a layout failure, not a reading failure.

Common Leading Mistakes

Most leading problems come from the same handful of mistakes. They show up in both professional design work and quick mockups, and they’re all fixable.

Relying on Software Defaults

InDesign’s auto leading is 120%. Figma’s auto setting varies per typeface. Browsers default to roughly 1.2.

None of these are recommendations. They’re just starting points. Creative Bloq lists accepting default leading without adjustment as one of the top eight typography mistakes designers make.

Every typeface, every font size, every column width changes what “good” leading looks like. If you haven’t manually adjusted it, you haven’t actually set it.

One Leading Value for Everything

A single line-height across your entire stylesheet is a recipe for problems. What works for 16px body copy does not work for a 48px headline or an 11px caption.

Your typographic hierarchy needs different leading at each level. Headlines tight. Body text comfortable. Small text generous. That’s three different values at minimum.

Ignoring Mixed Typefaces and Weights

Bold text takes up more visual weight. When you mix regular and bold within the same paragraph, the bold sections can feel cramped even though the leading hasn’t changed. The optical density shifted, but the spacing didn’t.

Same goes for pairing fonts within a layout. Two different typefaces at the same point size can have completely different x-heights. Garamond at 12pt looks smaller than Georgia at 12pt. Setting them both to the same leading creates an uneven texture.

Not Testing Across Devices

GoodFirms’ 2025 survey found that 73.1% of web designers cite non-responsive design as a primary reason visitors leave a site.

Leading that looks perfect on a 27-inch monitor can feel suffocating on a phone screen held at arm’s length. Responsive layouts need variable fonts or media queries that adjust line-height at different breakpoints. A static value doesn’t cut it.

Leading in Typographic Hierarchy and Vertical Rhythm

Leading isn’t just about individual paragraphs. It’s the foundation for how all text elements relate to each other vertically across a page or screen.

What Is Vertical Rhythm

Vertical rhythm means keeping consistent vertical spacing across your entire layout. The baseline of every text element, and ideally every design element, falls on a predictable grid system.

The concept works the same way rhythm in design works horizontally. You pick a base unit, then build every spacing value as a multiple of that unit.

Zell Liew’s vertical rhythm guide breaks it down to two rules: set vertical white space between elements to a multiple of your base line-height, and set all text line-heights to a multiple of that same value.

How Leading Creates a Baseline Grid

Google’s Material Design system popularized the 4px and 8px baseline grid approach. You pick a base unit (like 8px), then make sure all line-heights, margins, and paddings are multiples of that unit.

If your body text has a 24px line-height, that becomes your rhythm unit. Headings might use 48px (2x). Sub-headings might use 36px (1.5x, though that breaks the grid for purists). Margins between paragraphs align to 24px or 48px.

The result is a layout where everything lines up. Two columns of text placed side by side will have their baselines matching across the page. That’s the visible payoff of a well-maintained vertical rhythm.

Practical Setup in CSS

Start with your body text. Set a base font size (typically 16px) and a line-height of 1.5 (which gives you 24px). That 24px becomes your spacing unit.

Then scale everything from there:

• Paragraph margins: 24px (1 unit)
• H2 line-height: 48px (2 units) with 48px margin-top
• H3 line-height: 36px or 24px, depending on font size

Designmodo’s responsive vertical rhythm guide confirms this approach scales well across breakpoints. You recalculate your base unit at each media query, and all other values follow.

Delayed Gratification magazine is a well-known example of strict baseline alignment in editorial layouts. Every text element sits on the grid. But for most digital products, a “soft grid” approach (where all values are multiples of 4 or 8, but baselines don’t have to be pixel-perfect) delivers 90% of the visual benefit with far less debugging.

The connection between leading, visual hierarchy, and alignment is what separates competent layouts from polished ones. Getting the type size and scale and proportion right matters, but if your vertical spacing is inconsistent, the whole thing falls apart when you zoom out.

FAQ on What Is Leading In Typography

What does leading mean in typography?

Leading is the vertical distance between baselines of consecutive lines of text. The term comes from thin lead strips that print shop compositors placed between rows of metal type to add space.

How is leading pronounced?

It’s pronounced “ledding,” rhyming with “bedding.” The pronunciation references the lead metal used in letterpress printing. It’s not “leeding” like the verb “to lead.”

What is the difference between leading and line height?

Leading is the traditional print term for baseline-to-baseline distance. Line height is the CSS equivalent, but it distributes extra space equally above and below text using the half-leading model.

What is the ideal leading for body text?

For body copy, aim for 120% to 145% of the font size. A 16px font typically works well with a line-height between 1.4 and 1.5. Adjust based on typeface and column width.

How does leading differ from kerning and tracking?

Leading controls vertical spacing between lines. Kerning adjusts the horizontal gap between two specific characters. Tracking changes horizontal spacing uniformly across an entire word or line.

Why does leading affect readability?

Too-tight leading causes lines to visually collide, slowing reading speed. Too-loose leading breaks the connection between lines. Proper spacing lets the eye track smoothly from one line to the next.

What leading value should I use for headlines?

Headlines need tighter leading than body text. A value of 1.0 to 1.2 times the font size works for most display text. Large type already creates plenty of optical space between lines.

How do I set leading in CSS?

Use the line-height property. A unitless value like 1.5 is recommended because it multiplies each element’s own font size. Avoid fixed pixel values or percentages, as they inherit poorly.

Does the typeface change what leading I should use?

Yes. Fonts with tall x-heights (like Helvetica or Roboto) need more generous leading. Fonts with shorter x-heights (like Garamond) have more built-in vertical space and can handle tighter values.

What does WCAG say about leading?

WCAG 2.1 Success Criterion 1.4.12 requires that web layouts remain functional when line height reaches at least 1.5 times the font size. This is a Level AA accessibility requirement, not optional guidance.

Conclusion

Leading in typography is one of those details that nobody notices when it’s right and everybody feels when it’s wrong. The difference between a layout that reads well and one that pushes people away often comes down to a few points of baseline-to-baseline spacing.

Whether you’re adjusting auto leading in Adobe InDesign, setting unitless line-height values in CSS, or tightening display text for a poster, the principles stay the same. Match your leading to the typeface’s x-height, the column width, and the reading context.

Test on real screens. Check both tight and loose settings side by side. Build your vertical rhythm from a consistent base unit.

Small adjustments here produce big results in text legibility and overall typographic quality. Get the spacing right and everything else in your layout starts falling into place.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu is a seasoned designer who has been designing websites since 2008.

Renowned for his expertise in logo design and visual branding, Bogdan has developed a multitude of logos for various clients.

His skills extend to creating posters, vector illustrations, business cards, and brochures. Additionally, Bogdan's UI kits were featured on marketplaces like Visual Hierarchy and UI8.

He also wrote in the past years on sites like Design Your Way, WebDesignerDepot, WPDean, Designmodo, Speckyboy, Slider Revolution, and more.

Latest posts by Bogdan Sandu (see all)

• The Dualshockers Logo History, Colors, Font, And Meaning - 4 August 2026
• Elegant Cormorant Garamond Font Pairing Inspiration - 3 August 2026
• Pantone to RAL Converter - 2 August 2026