Leading-first typography

Reversing the traditional approach to typographic scales.

Traditional typographic scales

The typographic scale is a proportion-based approach to selecting complementary font sizes. By producing a proportionally ascending series of sizes from a base size and a scale, a designer can ensure an underlying visual cohesiveness in a project’s typography.

This technique comes into conflict with another fundamental typographic strategy: baseline grids. When a series of font sizes are created that increase proportionally rather than linearly, the result doesn’t fit neatly into the linear progression of a baseline grid. This can tempt a typographer to distort the leading around their type, coercing it to fit into the baseline grid’s linear mold.

In short, instead of building the scale in relation to the baseline, it is usually built independently and squeezed to conform. All efforts to create harmonious relationships can be negated when the negative space of the leading is ignored.

What if that doesn’t have to be the case?

Leading-first typographic scales

Font size is a number that, visually, means little. 24 point Garamond and 24 point Avenir could hardly be less related. Leading, however, means the same regardless of anything else. Why calculate a scale from the size of your type when you instead build it from the space on the page? (Or screen, as the case may be.) Take care of leading, and font sizes will take care of themselves.

How it works: Build out a typographic scale from your leading. Let’s say the base is 18 points. Build that up into the space for each size of heading. Then calculate the font size backwards from the leading. You might divide each size of leading by 1.125 or 1.2 to determine the font size that should fill the space.

A thought-provoking aspect of this approach is winding up with non-integer font sizes. If that sounds odd at first, ask yourself: does it matter?

Closing thoughts

Ideally, a typographic system would incorporate scale, baselines, and leading as equals. Unfortunately, there is no one solution to this complex relationship. Although Leading-First doesn't work flawlessly in all scenarios, I’ve found this approach helpful in conceptualizing typographic relationships and working out solutions for an individual situations.

Resources

Related articles

Exploring responsive grid systems for complex but structured layouts.

2018
CSS UI patterns
HTML + CSS

Using the flag or media pattern for locking up graphics and text for comments, alerts, and more.

2018
CSS UI patterns
HTML + CSS

A hidden element within a link can stretch the link’s focus outline to the edge of the viewport — and beyond.

2017
Firefox
HTML + CSS