A Deep Dive on Typescales
Any UI Design System is built on the three main pillars of Colours, Scales (Size and Spacing), and Typography.
There’s a reason why we called them The Essentials in our team’s design guide. These three interlinked but separate things, and the rules you set up around them will go on to define the building blocks for almost everything else in your UI from basic components to entire layouts.
But if someone asked me what’s the single most important thing any design has to nail, I’d say the same thing everytime — typesetting. (But I’m biased).
Some things to consider
So what makes for good typesetting? Well that’s a sticky question, one which everyone will have a different answer to. But here are some things to think about and consider, especially if you’re looking at typesetting in the context of a broader design system:
The requirements of your product
What types of information are you conveying?
A car dashboard, a blog, a data visualization platform and a mobile calendar app all display vastly different types and amounts of information, for different use cases.
Do you have to accommodate any existing work or requirements etc…?
Maybe you’re starting with a blank slate and have total creative control. But if you’re coming into an existing product, there will probably be things you have to work with or work around. Even in a net new product and design, there will probably be certain requirements you have to take into account. It’s crucial to understand from the outset what you can and can’t change and what your boundaries are.
Needs of your designers
If you’re a design team of one — you can go ahead and skip this section. But if you’re working with other designers who will also be using and building on the design system your team is building, this is something important to consider. Helping create consistency across your product, without restricting creativity is a difficult balance to strike. How strict or prescriptive you make the rules around typesetting in your product will have to come down to your team’s size, maturity and dynamic.
The limitations or requirements of the medium
Where and how is this content being consumed?
“The medium is the message”. First coined by media theorist and philosopher Marshall Mcluhan in 1964, the phrase has been drilled into pretty much every Comms Major ever since. To put it differently, the medium through which information is consumed directly impacts how the information is perceived and the message itself. Ergo our solutions and typography should be tailored to compliment the primary device our work will be seen on. The typesetting for a product viewed primarily on a 27 inch 4K monitor, a 15 inch 2009 Toshiba laptop screen, a smartphone, or a 6ft tall outdoor display will all be pretty different.
Great so now what
You might be thinking “Ok I’ve thought of all this and more — but how do I condense that down to a real, tangible typescale that I can actually start using in my work?” Great question — the bad news is that there is no silver bullet or a single, patented TheRightWay™, and you’ll never get it right the first time. The only way to determine what actually works is to test it, see it applied in your work, and then go back and tweak it. So you’ll have to iterate. The good news is that it’s not rocket science either, and the first step is the hardest. Once you’ve started and you’ve got something to work with, it becomes easier to dial things in. So here are three methods to help you get things rolling.
Modular Scales
Used by everyone from the ancient Greeks, to modern day designers in everything from art to architecture, modular scales are simple and elegant, with a long history of use within the typographic world.
A modular scale, like a musical scale, is a prearranged set of harmonious proportions. — Robert Bringhurst , The Elements of Typographic Style
What does this mean in practice? Simple… You pick a ratio. Common ones include
- Perfect Fifth (1.5)
- Augmented Fourth (1.414)
- Major Third (1.250)
- Or for extra designer brownie points The Golden Ratio (1.618)
And then you pick your base value which is also the first step in your scale–– in web design this is usually the size of your body text. Say 16px…. And that’s it you’re done.
The next step in your scale is always the value of the previous step, times your chosen ratio. Your line-height is your font-size time your ratio. Want to go the other direction and get a smaller font size? Simply take your base value and divide by your ratio instead. Sites like https://type-scale.com/ do a wonderful job of demoing this approach and letting you test out different modular scales in your browser. Or you can check out (and play with) the example below.
It’s simple, elegant, time-tested and sometimes it’s all you need. Devs usually love it because it ties in really nicely with em/rem values and using something like SASS, it’s dead simple to programatically generate. If you just need something quick and dirty you can copy and paste the function I wrote from the codepen above, or use any number of existing npm modules available to generate typescales using this method.
But like all methods, it’s not without its drawbacks. For one, if you’re using a vertical grid this will most likely not line up with it, which means this may or may not mesh well with the vertical rhythm of the rest of your design. (But don’t worry, if this is a concern the other two options got you covered).
Second, if you’re using more than one typeface in your design, this approach may be too rudimentary. Due to differences in things like the size of descenders and x-heights, a typescale may work well for one font, and it may even work perfectly well for another font independently; but start to visually fall apart if you try to introduce those 2 fonts into the same design, on a single modular typescale. Even if you’re only using a single family, you might still need to tweak the line-height from the default values. (For example I think the vertical spacing of the title in the above example is a bit loose).
Another potential downside is, in most cases you’ll very quickly end up with fractions in terms of pixel values. This is less of an issue for browsers, since you can just specify things in ems and modern browsers do a good job of interpreting these numbers and displaying them without any real aliasing. But this becomes much more challenging when working in say Sketch, where we still rely on px values for font sizing, and subpixel values are a pretty big no-no.
There’s an argument to be made that browsers and design programs render text differently enough that this is a crapshoot anyway, and you can always massage the numbers by rounding them manually. But if you need your designs to be pixel perfect, this is a limitation worth considering.
Golden Thread Scales
I actually wasn’t sure what to call this approach, but the idea came about when I was working on a side project, and I was trying to figure out a different way to drive my typescale. For one, my brain just doesn’t work in fractions and ratios, and I was getting tired of having to round numbers up and down, using modular scales.
I wanted a simple way to generate a typescale that would address these issues, while also tying my typescale into my baseline grid if my design had one. Here’s what I came up with.
Pick a number, generally between 3 to 7. This number will control the rate at which your typescale grows. The bigger the number the bigger the jumps between the steps in your typescale. If you have a baseline grid, use a number that also divides evenly into your grid. This number is now your “Golden Thread”.
Next pick your starting font size. Like with modular scales, this will be the base of your scale, and the font size everything else is based off of. Once again, if you want to end up with something that ties in nicely with an existing grid, pick a number that is also a multiple of your golden thread.
For the sake of demonstration I’m gonna say I have a 40px baseline grid. Both 4 and 5 divide evenly into that figure but to start I’m gonna go with 4 and see how things feel. And last but not least, I’m gonna start my scale at 12px.
And that’s it… That’s all you really need. Here’s how it works.
Font sizes
Base : 12 + (4 * 0) = 12px
Step 1: 12 + (4 * 1) = 16px
Step 2: 16 + (4 * 2) = 24px
Step 3: 24 + (4 * 3) = 36px
Step 4: 36 + (4 * 4) = 52px
Need something smaller than 12px? You can either start at a smaller number, or subtract your golden thread instead of adding it.
But wait, you’re missing line height I hear you saying! Easy… You can use the same system. Take the font sizes generated above as your starting values, and start multiplication of your golden number at 2, 3 or 4 instead of zero. For example:
Line heights
Base : 12 + (4 * 3) = 24px
Step 1: 16 + (4 * 4) = 32px
Step 2: 24 + (4 * 5) = 44px
Step 3: 36 + (4 * 6) = 60px
Step 4: 52 + (4 * 7) = 80px
So your scale ends up looking like this
.base {
font-size: 12px;
line-height: 24px;
}.step-1 {
font-size: 16px;
line-height: 32px;
}.step-2 {
font-size: 24px;
line-height: 44px;
}.step-3 {
font-size: 36px;
line-height: 60px;
}.step-4 {
font-size: 52px;
line-height: 80px;
}
Congrats — you now have a typescale and a vertical grid driven by a common value. No fractions, and a bit more flexibility with your line heights. Set up a few spacing vars in your SASS file that are based on your Golden Thread as well, and you’re on your way to the foundation of a design system with a nice built-in way to ensure a consistent vertical rhythm and alignment across your design.
As before, I put together a codepen demo to show this typescale in action. I also built a SASS function you can grab from the pen if you’re so inclined. I’m not aware of any node packages or SASS plugins that do this currently, but I may spin this into one if there’s a demand.
Line Height Based Scales
This approach is by far the most “hands on” and requires a certain bit of experience, or knowing “what looks good”. But there is still a logic to the madness, I promise.
With the previous two approaches, line height at each interval in your scale is defined based on the font size. But another approach is to start by setting your line heights first instead.
You can still use either of the above methods to get started. If my starting line height is 16px, and I’m using the Major Fifth, my scale would look something like this:
Modular Scale Driven Line Heights
Base : 16px
Step 1: 16px * 1.5 = 24px
Step 2: 24px * 1.5 = 36px
Step 3: 36px * 1.5 = 54px
Step 4: 54px * 1.5 = 81px
If I’m working on a baseline grid, I could increment my line height in .5x, 1x, 1.5x or 2x etc… increments of my baseline. For example:
20px Grid Driven Line Heights
Step 1: 20px * .5 = 10px
Step 2: 20px *1.5 = 30px
Step 3: 20px * 2 = 40px
Step 4: 20px * 2.5 = 50px
Step 5: 20px * 4 = 80px
(This has no real “base” since the other steps aren’t derived based on the value of any other step).
Now that you’ve created your basic line heights, you have free reign to tweak your font sizes any way you want till the leading, kerning and relative visual contrast of the individual steps feels right. Since your line-height is locked, the vertical rhythm of your content relative to the rest of your layout and components stays consistent, regardless of the changes you make to the presentation of the typeface itself.
This could be a good solution in situations where you have to create a typescale which needs to accommodate multiple typefaces, or even some existing fonts and sizes that you may be stuck with, that still need to be incorporated as part of a broader design system.
The downside is that while this gives you the most flexibility, it’s also the least “standardized” from a development perspective, which may or may not matter for your project. You know the drill — check out the pen if you want to see a basic implementation of a Line Height Based Typescale in action:
Wrap up
One last thing to note: While I separated these scales as individual approaches for the sake of semantics, there’s nothing to say you can’t combine these methods. You could use a Modular Scale of Augmented Fourth (1.414) with a base of 14px to derive your font sizes, but set your line heights on a baseline grid. Or use a Golden Thread Scale to generate your font sizes, but set your line-height at a fixed ratio of Perfect Fifths (1.5) for each step.
These scales, just like musical scales are meant to serve as a tool — to practice, to help us get started and give us a framework through which we can better understand progressions, what works and what doesn’t. They’re a means to an end but they aren’t the ends themselves. And if type scales in a sense are like musical scales, typography as a whole is not unlike Jazz — there is an underlying structure, but to make something great, you have to know how to improvise.
Shout out to some of my fellow designers and devs, Justin, Natalia, Philip and Matthew for helping me learn, work through ideas and keeping me honest on things. If you got your own approach to typescales — leave a comment, I’d love to hear more about it.
Lehel is a Product Designer at IBM based in Toronto, Canada. The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.
