Increase Text Leading for Easy Reading

by on 09/30/10 at 11:45 pm

When designers talk about leading, the chances are they aren’t talking about mechanical pencils. What they are really talking about is the spacing between text lines, measured from baseline to baseline. The baseline of a line of text is where the center of the letters sit. The leading is the amount of vertical space from the baseline of one line of text to the baseline of the next line of text. In CSS terms, another name for leading is line-height.

Increase Text Leading for Easy Reading

The average leading for single spaced text is around 15 points. Unfortunately, this default leading size is not legible enough. When you use a small leading size, it makes your text difficult for users to read. If your website publishes articles, it’s important to pay attention to the leading of your text, otherwise users could struggle to read your articles.

A good guideline to follow is to set the leading to your type size plus 6-8 points. For example, if your type size is 12 points, the ideal leading for your text would be 18-20 points. Larger leading sizes create more whitespace around each text line, giving the text more visual clarity and making it easier for users to read.

After spending all that time writing the text for your article or website, why make it difficult for users to read? A simple adjustment in leading will make a world of difference on your text, and your users’ reading experience.


Increase Text Leading for Easy Reading Increase Text Leading for Easy Reading

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

13 Responses to “Increase Text Leading for Easy Reading”

  1. luke

    Oct 1st, 2010

    Hi Anthony, I’ve enjoyed the last couple articles of yours I’ve found via Hacker News.

    Just a question regarding using type size + 6 points to define leading. The metric for leading is sometimes defined as the type size * 1.5. In this case 12 point type would give 18 point leading, but 24-point type would give 36-point leading – any comments on that? And any views on increasing leading as line-length increases?

    Luke

    • anthony

      Oct 1st, 2010

      Luke, good question. I’m not sure where the “type size X 1.5″ rule comes from, but I wouldn’t follow it because when you apply it to a font size of 24 points, 36 point leading is way too much.

      A better rule that works most of the time with any font size is your “type size + 6-8 points”. With a 24 point font, that gives you a 30 point leading, which now makes the text look tighter and cleaner. No matter what size your text is the type size + 6-8 point leading rule will almost always work.

  2. Jordan

    Oct 2nd, 2010

    Leading really depends on the typeface, point size and column width. Generally, wider columns demand greater spacing; however, too much leading can make reading difficult as well. You can usually find something usable between 1.2 and 1.5 times the point size of the typeface.

    As the point size of the type increases, you need less leading, and therefore, the 6pt number you came up with works better than you might expect until you get to really small sizes (7pt on 13pt for instance — more an issue for print than the web)

    So you’re both kind of correct…

    The only true rule is that you make sure that your leading is optically greater than your horizontal letterspacing and less than the padding of its containing area. And use your eyes.

  3. Leon

    Oct 3rd, 2010

    Is this print advice? I believe we use pixels on screens.

    Lots of variants affect your leading: typeface, measure, device etc. And it’s better expressed as a multiplier of the pixel size, rather than an addition.

    • anthony

      Oct 3rd, 2010

      Expressing it as a multiplier doesn’t work for all sizes, as Luke already pointed out. I believe a better and more flexible rule would be typesize + 6-8 points. I have experimented with this rule with multiple typefaces and I think this is a better guideline to follow.

      • Jorge

        Dec 8th, 2014

        I agree with anthony. The x1.5 rule doesn’t work for leading calculation. Either print or screen, I use the 6-8 points but i adjust visually. There are more variables at play like type style, structure and other elements around copy. Trust your eyes

    • stephband

      Oct 4th, 2010

      Is this screen advice? I believe we use em or % on the web.

      Using em or % means you really can express leading as a multiplier, and your font-size becomes independent from screen resolution.

      • Josh L

        Oct 6th, 2010

        If you specify line-height (CSS’s name for leading) as a number with no units, it is a multiplier of that element’s font-size. :)

  4. Rich

    Oct 6th, 2010

    Is it pronounced ledding or leeding?

    • Irene

      Oct 10th, 2010

      According to Oxford Dict., it’s “leeding.”

      Yeah, I was a bit put-off by the “pun” in the very first sentence as well.

  5. Mike H

    Oct 10th, 2010

    Surprising? I thought everyone knew that leading is one of the basics. Not to say that there aren’t lots and lots of hard-to-read pages on the web.

  6. Dathan N.

    Oct 11th, 2010

    Josh is correct, we’re not talking print, so it’s not called leading, it’s called line-height, that is what web desigers know it by.

Leave a Comment