Friends!
When young designers are introduced to typography the first thing they learn about are the typefaces: identifying serifs from sans, learning about the history behind which of them came first, etc. Shortly afterwards they probably start learning about grids, layout, and then – typographic scales.
If you’re unfamiliar with that term “a scale” is often a group of font-sizes that are used to help designers make an interface consistent and help them limit their options from a billion different sizes.
So for example, at Gusto our scale looks like this:
I designed it specifically to cover as many different use cases as possible. In fact our scale is actually a group of font-sizes and line-heights so let’s say that you select size #5 – that’s a font-size of 18px and a line-height of 26px.
Anyway, the reason why I built it in this way is so that designers have a series of lego pieces to pick from. And so this is just one less decision they have to make when they’re designing an interface or component. It makes our interface of hundreds of pages look more consistent and reliable and it reduces the amount of code we have to write.
In short, a scale is really a system – one that limits choice to save time – and so of course I am FULLY on board with typographic scales. How do you make such a scale though? How do you pick all these font-sizes from the dizzying array of infinite numbers at your disposal? And what makes a great relationship between these choices?
Well, there’s a lot of tools out there such as Modular Scale that can help us. This particular website is by Tim Brown, friend of the show and Head of Typography at Adobe, and through this website you can pick from a number of ratios and see how the system updates before your eyes:
Using something like this to help you pick these ratios are a helpful start and can save us all a ton of time. However, I would always recommend adjusting them based on what you learn when you start applying these sizes for your book/website/app. Perhaps the largest font-size in the scale is just a smidgen too big; in that case I’d just notch it down despite it being mathematically “incorrect.” Purity be damned.
And I guess this is where the problems with scales come in – or rather my disagreement with the rest of the design community at large – as there’s always a certain degree of mathematical fetishism here that I’ve never really understood. There’s all sorts of books and classes, videos and blog posts devoted to the ideal ratio – the perfect set of numbers; whether it be the major second or perfect fifth, the minor third or augmented fourth.
In an old post on the matter, Tim wrote about working with scales in order to make typography more meaningful:
A modular scale is a sequence of numbers that relate to one another in a meaningful way. Using the golden ratio, for example, we can produce values for a modular scale by multiplying by 1.618 to arrive at the next highest number, or dividing by 1.618 to arrive at the next number down.
By using culturally relevant, historically pleasing ratios to create modular scales and basing the measurements in our compositions on values from those scales, we can achieve a visual harmony not found in layouts that use arbitrary, conventional, or easily divisible numbers.
But I’ve never really found this to be the case. I’ve sometimes used scales as a sort of building block but I’ve yet to see any significantly beautiful layouts or typesetting that are dependent entirely on these ratios. As I mentioned, I’ve often found that these numbers need to be tweaked slightly in order to solve the problems I’ve been working on. And even though Robert Bringhurst happened to call a typographic scale a series of “harmonious proportions” – well – I sort of just don’t see it I guess.
Folks will endlessly discuss which ratio is the most mathematically beautiful and I would recommend that we step around them and let them enjoy their ratios – whilst we can focus our attention elsewhere.
Until next time,
✌️ Robin