Using the Golden Ratio with Typography

2 minutes remaining

Design isn't my thing. I still have opinions, but when it comes down to details like spacing and typography, I'm just guessing. The lack of certainty keeps me second guessing myself, so I'm always looking for ways to justify my reasoning for why I like one thing more than another.

For the Imarc Boilerplate, we focused on consistency. Spacing between any two related elements is always the same (1.5 ems), and spacing between two unrelated elements should always be consistent (3 ems.) Hardly imaginative, but consistent. However, font sizes, line-heights, and most other metrics are based on what I found in similar projects or in practice. Popularity and convention are nice but are poor justification.

Poking around and looking at things like typographic scales and ideal text widths, I came across the golden ratio a number of times. The golden ratio, ~1.618, is supposed to be inherently aesthetically pleasing, occurring through history and nature. I had played around with using the golden ratio before, but found it was a little too big as a ratio (~1.618) to use for line-heights, for example:

Still, the golden ratio seemed like a great starting point. This got me thinking about typographical metrics. To define a few:

Font size is what we specify, but doesn't seem to correspond to any part of the text's actual height or width.
Whereas point size is roughly from the top of uppercase letters to the bottom of letters like 'y' or 'p'.
Cap height is the height of uppercase letters.
X-height is the height of lowercase letters like 'x' or 'o'.
Leading is the space in between lines.
And lastly, line height, is point size plus leading, but is normally expressed as a ratio to the font size.

The golden ratio is really meant to be between visual elements, and the font size isn't the actual size of the text. Here's Lato at 100px, at 2x magnification:

The truth is that all of the dimensions of 100px Lato are smaller than 100px. If I want the ratio between leading and point size to be golden, I need to adjust for the difference between font size and and point size. I did this and got a line height of 1.44. This is closer to what I was hoping for:

However, the more I looked at this, the more I was unsatisfied. Two things stood out:

I wanted to use the x-height instead, as that seemed like a better measurement of height of the text than point size.
I wanted more leading. In fact, I wanted to try making leading ~1.618 times the size of the text, instead of the other way around.

After these changes, I ended up with this:

This works out that, if you'd like the ratio of your x-height to leading to be golden when using Lato, you should use a line height of approximately 1.36. Here's the text again without highlighting:

And here's an overlay, showing the golden spiral overlaid on some 100px Lato at 4x:

This was enough to make me happy. Now I have a method for picking line heights that I can justify and do without fussing around or trying to decide which looks better.

I measured a few other popular fonts and shared the results below. I'm not suggesting that these line heights are always the best choice, but at least these numbers have some reasoning behind them.

Arial: 1.39
Georgia: 1.31
Helvetica: 1.39
Open Sans: 1.41
Times: 1.18
Trebuchet MS: 1.36
Ubuntu: 1.36
Verdana: 1.44