Best calculation for leading in web design

Question

This is an area I always dislike when in the design process of a website. That being said I'm trying to be more efficient and I wanted to know when some use a sans serif or serif font how do you identify what the leading would be for each browser and design accordingly? Has anyone used or seen a calculation when using a 14px font height that will determine the leading?

Answer 1

Typography is rather subjective, so I'm not sure if there's an algorithm for determining a "correct" line-height based on the font-face, font-size, font-weight.

It's best practice to make all measurements relative to the font size (em) instead of a fixed value since users can change their default font size on their device. This allows the user to change the font size without messing up your layout.

The following would give a default leading of 17.5px:

body {
  font-size: 14px;
}
p {
  line-height: 1.25; /* The same as (14px times 1.25) for a value of 17.5px */
}

It also would automatically give a leading of 15px or 20px if the font were changed to 12px or 16px respectively.

Here are a couple resources on typography and vertical rhythm for web that I've found helpful:

Elements of Typographic Style Applied to the Web

Compose to a Vertical Rhythm

Answer 2

As thgaskell states, there is no 'formula' other than, in general:

The longer the line length, the more leading/line-spacing you should use.

Answer 3

Re. "Has anyone used or seen a calculation...": There won't be a good all-purposes one (see below). Probably the closest is: Adobe applications have a default leading / line height ratio of 1.2 units of leading per 1 unit of font size (16.8 for 14).

That's a generic catch-all that looks okay most places, but looks great nowhere except by chance.

It's probably based on nothing more than some Adobe engineer in the '80s saying "How about 1.2 as a default leading-to-font-size ratio, Bob? Looks okay to me" and Bob saying "Sure, go for it".

---

As for what to base a calculation on: see Alan G's excellent answer to Optimum line height in relation to font size.

Here's a heavily paraphrased summary of some of the things that influence ideal leading as a list, based on Alan G's answer plus my experiences:

• What type of text it is. Headings, labels, captions etc will have tighter leading than main body paragraph text - they're things that constitute a unit punctuating the flow of the page, whereas paragraphs are the main flow of the page.
• The width of the measure (text block) and the number of lines of paragraphs. The further the eye needs to move horizontally, and the fewer visual cues like nearby paragraph breaks, the more help the reader needs to land back on the right line, in the form of extra whitespace from wider leading.
• The intended tone. Wider leading, generally speaking, gives the text a lighter typographic colour and an airier, more approachable feel. Tighter leading, generally speaking, looks more dense and serious. There's much more to it than just this though - the overall tone and rhythm of the page is the result of the overall result of everything combined.
• Characteristics of the font. Generally speaking:
  • High x-height fonts are already more greedy in their use of vertical space, so will usually (not always) need more leading.
  • High ascender fonts tend to have inherently more room to breath, so it'll tend to be possible to squeeze the leading further if needed before it looks awful (not always).
  • Heavier fonts with thicker strokes have a darker typographic colour, so it's likely that there will be less room to squeeze leading before tight leading makes blocks of text set in these fonts look oppressive (not always)

Not that I - or I imagine, any designer - consciously mechanically thinks through any check list like this. These are just observations on what influences the feel of the text. The important thing is that it instinctively feels right and works.

Things like this can be a handy fallback or sanity check for cases where instincts are failing, though.