When designers talk about leading, they’re not talking about mechanical pencils. They’re referring to the spacing between lines of text 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, it’s called line-height.
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 more difficult to read. The user can easily get distracted by neighboring text lines and lose focus of the line they’re reading.
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 each line of text visual clarity and less noise.
After spending all that time writing the perfect text for your website, don’t ignore how users will read it. A simple adjustment in leading will make a world of difference on the user’s reading experience.
Book
Affiliate
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
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.
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.
I use a range between 1.2 and 1.5 as well. 🙂
I almost always use 1.5 for paragraphs.
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.
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.
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
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.
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. 🙂
Is it pronounced ledding or leeding?
According to Oxford Dict., it’s “leeding.”
Yeah, I was a bit put-off by the “pun” in the very first sentence as well.
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.
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.