Tt TotallyType

Line-Spacing

Line-spacing is the vertical distance between lines of text and plays a big part in the readability of text. When it comes to line-spacing there is no “one size fits all.”

The Core Rules of Line-Spacing

  1. At text sizes type is made more readable by a positive amount of line-spacing.

    When you decrease line-spacing, lines get closer to each other, making the block of text appear denser. If line-spacing is set too tight, it can cause ascenders and descenders to collide. Low amounts of leading can increase the pace of the reader or invoke a feeling of authority, cramped conditions, or claustrophobia — which can be desired when using type in an expressive manner.

    Increasing line-spacing can reduce the pace of reading by adding more white space — resulting in a lighter more open text block and relaxed feel. Too much line-spacing can cause continuity problems. The more line-spacing — the further the eyes of the reader must travel between lines of text and lines of type become independent graphic elements rather than blocks. This is especially true if the line-spacing is greater than the space between the paragraphs.

  2. Headlines, titles, large or display type may benefit from negative line-spacing.

  3. Typefaces with tall x-heights or thicker stokes, like a boldface, require more line-spacing to avoid heavy dark blocks of text.

    Typefaces with short x-heights have the appearance of using less space and therefore require less line-spacing.

    Because sans-serifs typically have thicker strokes than serifs, line-spacing will often need to be increased.

  4. Increase line-spacing as you increase measure or column width. The rule of thumb for measure is 45-75 characters per line for paragraph text; paragraphs set shorter or longer will require line-spacing adjustments.

    Use tighter line-spacing with a shorter measure.

    Increase line-spacing as you increase measure. The idea is to improve readability and flow by keeping each line distinct; preventing the reader's eyes from dropping to the line below or returning back to re-read the same line.

    Important: This demo is to show you how to set a baseline-space or baseline grid. You should not use different line-spacing across columns of text, in-fact, you should use the same or a multiple of your base line-spacing across all elements to establish vertical rhythm.

  5. Like measure, as point size increases line-spacing decreases proportionally. Body or running text benefits from additional line-spacing whereas headlines or short bursts of copy may benefit from less line-spacing. Headlines, especially when set in all-caps, may require negative line-spacing.

Global Tips

  • When setting type in multiple columns, line-spacing should align with the size of column gutters. The width of the gutter should be the same or a multiple of the line-spacing value to create rhythm.

    When setting type in multiple columns, line-spacing should align with the size of column gutters.

    The width of the gutter should be the same or a multiple of the line-spacing value to create rhythm.

    This prevents the reader from reading across the columns of text — but, if the gutter width is too large, columns will look disconnected.

    This space prevents the reader from reading across the columns of text — but, if the gutter width is too large, columns will look disconnected.

  • If you increase word-spacing — increase line-spacing.

  • Adjust for contrast.

    When using colors other than black text on a white background you may need to increase line-spacing. See reversed type to learn why.

These core rules tell us a lot about line-spacing, but we must also account for the characteristics and limitations of each medium…

Print: Leading

In print, line-spacing is called leading. The term leading dates back to the days of metal type; as opposed to being set solid, strips of lead of varying thickness were inserted between each line of type. Leading is the distance between two baselines measured in points — an absolute unit. The leading value includes the point size and the space between the lines.

  1. In print you typically want to use a font with a medium x-height for body text. This provides a balance between the upper and lower case letters and brightens the page.

  2. Avoid using heavy weight type in body text; ink can pool and distort text.

  3. Body text is typically set between 10-12pts. Print has a fixed dimension and therefore limited space; additionally, proximity must be accounted for.

  4. The rule-of-thumb in print is to set your leading at 120% of the font size. The common paragraph setting is 10-point type with 12-points of leading — written as 10/12 and spoken as “10 on 12.”

Screen: line-height

On screen, line-spacing is referred to as line-height, the CSS property used to set line-spacing in Web design. In the early days of word processing, companies copyrighted taxonomies and software creators used varying terminology, units, and methods to measure and accomplish the same thing. Line-spacing in CSS is the measure of the point size and the space above and below the line; this is why you can technically use line-height in CSS to vertically center something — although you shouldn't. Regardless of where the line-space is measured from, the actual space is the same height in both leading and line-spacing. Line-height, however, should be measured in relative units and never set absolute.

  1. On screen, a good place to start is to set your line-height at 150% of the point-size, however, once again, you must account for the characteristics and limitations of the medium.

  2. On screen, where you want a taller x-height, you need a larger line-height. A taller x-height gives letters more space to distinguish themselves and forces open the counters. Additionally, you want a more moderate stroke weight on screen — light can bleed into thin strokes causing them to disappear.

  3. Measure on screen is variable — especially in a responsive environment. Therefore, line-height should be set at a middle ground or alongside breaking points.

  4. Text on screen is typically set between 14–25px. The deciding factor for how large your text must be is proximity. We typically read from further away on screen as we do in print, requiring a larger text size. Due to the nature of back-lit environments, small text causes eyestrain and fatigue. Additionally, PPI plays an important role determining text size; more pixels means crisper text, therefore, you can use 14pt text on a hand-held high PPI display.

Back to Lessons Alignment