Size me up

Today, we’re talking all about font sizes. We’re going to dig into how designers use systems to make their process easier, faster, and more cohesive and we can too! This is an introductory look at picking font sizes, but if you want to dig in deeper, you should check out this amazing resource by Erik Kennedy called, “Font Sizes in UI Design: The Complete Guide.”

This issue of Not A Designer is brought to you by Erik Kennedy of LearnUI, a REAL designer who used to be an engineer, has created design courses taken by thousands of students, and has his own newsletter, Design Hacks. Make sure to check out his stuff! 🤗

To determine where to place all of our elements and how far away from each other they should be spaced out, we used a scale.

But what about the size of our text? How do we determine that?

Your font size could be anything, and, having an unlimited number of options, it can be overwhelming to stare at a piece of copy and figure out how big to make it. And because our screens are usually filled with far more text than images, this becomes a super important decision.

One strategy is to just pick as you go. You’re working on the header? Pick a font size that “feels right.” You’re deciding on a paragraph? Pick a font size that “looks good.”

I’m personally not a fan of the pick-as-you-go option. I know that, in general, a safe paragraph font size is 16px or 18px, but beyond that, I have no idea how big things should be.

Instead, I want a system – something with a limited number of options that have already been decided for me ahead of time that I can just pick from. Picking from a set of, say, 10 font sizes is much easier than coming up with them on the fly.

To help us with that, we’re going to use what’s called a typographic scale.

But first let’s define what a scale is in this context.

What’s a scale, anyway?

A scale is essentially a set of predetermined sizes, in our case, font sizes, based on a single number.

To create that set, you first start with a base font size. Usually, that’s 16px since that’s the base font size for most browsers.

Then you pick what’s called a scale factor or scaling ratio. That’s a number that can technically be anything, but usually has a value between 1 and 2.

You take that scale factor and you multiply it by your base font size. The value you get is the next font size you can use for your text.

Then you multiply that font size by your scale factor again to generate the next font size you can use. Then you multiply that font size by your scale factor again to generate the next font size in your set. And you keep multiplying by your scale factor as many times as you like until you get a set of font sizes that cover your needs.

So how many font sizes do I need?

You can generate as many font sizes as you’d like by continuing to multiply by the scale factor and, to cover all your use cases in a user interface, you need quite a few. In general, you want font size options for your headings (usually six) and a set for your body (usually three).

If you think you might want some super large, funky text in your interface, you can create a set of display font sizes that are bigger than your six headings. And if you’ve got a lot of little labels and icons, you can create a set of font sizes just for your labels (usually three is enough).

How do I decide the number for my scale factor?

You can pick any number you’d like, but the good news is, you don’t have to! Luckily for us, there are popular typographic scales with their own scale factors that we can use.

There’s a great site called Modular Scale that lets you pick different scales and see the resulting font sizes. It’s created by Scott Kellum and Tim Brown. If you’re into music, you might appreciate some of their names.

The popular ones I came across include:

• Minor Second (scale factor: 1.067)

• Major Second (scale factor: 1.125)

• Minor Third (scale factor: 1.2)

• Major Third (scale factor: 1.25)

• Perfect Fourth (scale factor: 1.333)

• Augmented Fourth (scale factor: 1.414)

• Perfect Fifth (scale factor: 1.5)

• Golden Ratio (scale factor: 1.618)

The difference between these scale factors seem minuscule, but they actually do make a difference.

To illustrate, let’s look at Minor Second (scale factor of 1.067) vs. Minor Third (scale factor or 1.2). That’s a difference of just .133, not even half a decimal! What does that do to our font size options?

Let’s calculate them and see!

Here is the set of font sizes for Minor Second (1.067):

The smallest size is 13.17px and the largest is 30.6px.

Now let’s look at Minor Third (1.2):

Oh my goodness, look at that jump in size! For Minor Third, my font sizes start at 9.26px and end at a whopping 99.07px! Compared to Minor Second, going up one level is a major jump.

Just for fun, let’s look at the Golden Ratio, the one with our biggest scale factor (1.618):

We start at a value of 3.78px and by the time we’ve reached Heading 5, we’re already at over 100px! Sheesh!

So even though the differences in the scale factors are small and seem insignificant, they actually make a big impact on the font size choices you end up with. The smaller the scale, the smaller the incremental changes from one level to the next. The bigger, the more noticeable the differences will be.

Now for a design break!

Want to go in depth on your design skills with an experience designer? Check out Learn UI Design. It’s a complete video course in visual design. Learn to confidently create beautiful user interfaces for any site or app.

• 53 lessons

• dozens of assignments

• student community

Join thousands of students from around the world, including from top companies like Google, Meta, Apple, Stripe, and more.

I’m actually planning on taking the course myself, and no, I’m not getting it for free — paying full price. Join me!

So how do you pick which scale to use?

Picking the right typographic scale really comes down to what your interface needs. The higher the scale factor, the more dramatic the font size changes, which means if your interface comes with big, splashy headers, strong editorial, or creative flexibility, you might prefer the dramatic range of something like a Golden Ratio.

But let’s say, instead, you're designing the interface of a medical dashboard and it’s got tons of little displays, buttons, icons, and labels. You’ve got a lot of information that needs to stand out and font size is one of the tools in your tool belt. So you don't need big, dramatic changes – you need a nice selection of relatively small font sizes for all that information you need to display.

So when deciding on the scale, think about the kind of content you're displaying and what range would be the most appropriate.

If you feel like you have an “average” interface with some range but maybe not too much, a safe scale to go with is Major Second.

I picked that scale by watching this really great video of a designer, Tim Hoon Lee, who studied 45 top design systems of popular products and places including AirTable, Figma, Shopify, Uber, and Material Design. He wanted to understand what they had in common and extract insights and patterns from some of the most widely used ones.

One of the things he looked at was which typographic scale these systems used. Number one on the list was Major Second, with 75% of his selected design systems using it. It has a scale factor of 1.125. So if you’re not sure where to start, this seems to be a safe choice.

If we start with a base font size of 16px, let’s see what our set of font sizes would be for Major Second. To give us a nice range for our interface, we’ll go a few sizes lower than our base for our labels and add a few display font sizes too.

Here’s what we get:

This gives us a nicely balanced set of font sizes with enough of a difference between font sizes without there being a huge leap between them.

Now, I don’t know about you, but something about these values make me a bit … uncomfortable. All those decimals. While there might be some beautiful harmonies happening by using some simple but sleek math to come up with font sizes, decimal font sizes feel very awkward and unintuitive.

That’s not a problem specific to Major Second – all eight of those scales will give you decimal font size values. So what do you do?

I did some research to find out.

I checked out a few popular design systems from designsystems.com to see what they did with their decimals and I saw that they didn’t have any at all! There wasn’t a decimal insight!

I was confused – there’s so much information out there about all these typographic scales and how they give you these beautifully harmonious values with just the right font sizes – were these design systems just not using them?

I reached out to a designer friend to get to the bottom of this.

It turns out that theory and real world application are two different things, and the world is not as rigid as these scales. Rather than the guide being the definitive source for all font sizes, they’re often used as a starting point that you then tweak and perfect.

The easiest way to tweak it is to simply round all the numbers to the nearest whole number. That would certainly make me feel better. Then we have values that feel more natural and are easier to remember and reference, too.

In fact, that’s exactly how designer Priyanka Godbole picked her font sizes for her company, an electronic health record company. Her process was beautifully described in this great article featured in Figma’s design systems blog.

Her process was to round off in a particular way. Because her design system used a 4pt grid system, she rounded off to the nearest multiple of 4 so that it would be easier to work with. So the grid system you’re using might be another helpful consideration when dealing with those decimal values.

In the real world, these typographic scales are meant to give you a starting point, not be the destination. Depending on your comfort level, your expertise, and your own opinions, you can always switch things up and pick your own final values.

That’s pretty much what Tailwind did.

Instead of using a scale, they used their years of design and front end experience to pick a set of font values that seems to work well across different projects and interfaces and comes in a nice range. And because they picked their own numbers, they don’t have to deal with strange decimal values.

I’ve recreated the Tailwind scale here, categorizing it into the different types of text we might use.

Compared to the mathematical Major Second scale, you’ll notice that Tailwind’s set of font sizes has fewer options.

Because we used our scale factor to go as high (or low) as we want, our Major Second scale allows us to create as many font sizes as we want. We stopped at 14, but could’ve kept going. Tailwind is limited to just 11. Depending on how many styles you think your content needs, you might want more options than what Tailwind gives you.

Applying it to my personal site

Looking at my personal site, I don’t have a ton of information that needs to be laid out. My site is a bit lighter and more fun, so I’m going to go for a little more ‘drama’ in my scale, but not too much!

I want a noticeable jump between my text styles, so I’m going to go with our Minor Third guide. But I don’t like all those decimals, so I’m going to round everything off by multiples of four as well. That gives me numbers that I feel comfortable working in.

The only exception is in my Label 1. I’m going to pick 14px for that one since I’m limited by how small I can make my font sizes to remain readable and accessible. Just because a scale gives you a value of 6px, for example, doesn’t mean you should actually use it in your interface. You gotta think about accessibility as well!

Here’s what that gets me:

I’ve got my scale, now what?

Having a scale is a great starting point, but you still have to try things out, use your judgment, and see what makes sense. Let’s try applying my scale to the hero of my personal site.

My personal site has two pieces of text: the heading and the subheading.

The heading is going to be the biggest text on the page, so I’m tempted to use the Heading 1 value. But 68px seems pretty big. Let’s try it and see.

And then for my subheading, I want some nice contrast between that and the heading, so I’m going to try a Heading 4 and see how that feels. For my typeface, I’m going to keep it simple and stick with Inter for now.

Here’s my wireframe with those sizes:

That’s actually pretty good! It’s not so big that it needs a bunch of line breaks – the heading fits on one line and the subheading fits on two lines, which is what I want.

I was expecting to need a few iterations to pick the right font, but having that scale ahead of time and putting a little thought into the kind of content I’m working with made it super easy. Done in one go!

So how do you plan to approach font sizes in your next project? Reply and let me know! And make sure to let me know what you think of this issue :)

Happy designing!

Saron