How to pick a font (or is it a typeface?)

I don’t know about you, but I get super overwhelmed when it comes to fonts.

It feels like everything is either Inter or some wacky, bold display font that I’m too scared to use in my own projects.

There’s an ever-growing variety of fonts to pick from and I don’t know what I’m supposed to care about. After a while, all the options in Google Web Font start to look the same.

Luckily, there are some basic principles we can apply to picking a font that doesn’t require us to have good taste, or any taste at all.

So how do you pick? What elements of a font should we care about?

First, it’s important to think about where we’ll use this font. Text is everywhere in our products, but there are three categories that stand out.

The first is headers. This is where we can have some fun. Because headers are generally bigger and used sparingly, we don’t have to worry as much about readability. We can get away with something interesting and funky.

The second is in a body of text. This might be something like an article or documentation. When we’re asking users to consume a large amount of text in one go, readability becomes more important.

The third is in our UI elements. This might include our buttons, icons, navigation, labels, and other secondary information. These tend to be the smallest elements in our apps, so it’s really important to make sure they are readable. When we talk about a font being good for screens, we’re usually referring to this category.

Our products generally include more of the second and third category than the first, so we’re going to focus our exploration of fonts on those two.

But first, let’s start with some basic definitions. We’ve been calling them “fonts” so far, but what about typefaces? And how do these relate to the property “font-family” in CSS?

Let’s break it down.

Font vs. Typeface vs. Font-family

When you go to Google Web Fonts and pick “Inter,” you’re actually selecting a typeface. That typeface dictates the way the characters look, but within that typeface are different styles, like different weights and whether the text is italicized or not. “Font” refers to the individual style. So while “Inter” is the typeface, “Inter 400 italics” is the font.

But in CSS, we don’t have a property for typeface or font – what we have is “font-family.” That property allows us to list the different typefaces our application can use. Although it’s called a “font-family,” it doesn’t actually specify a particular font, only the typeface. Other properties like “font-weight” help us choose a particular style of the typeface.

“Look how tall I am!” The importance of the x-height

There’s a lot that goes into a typeface. Check out this breakdown of the anatomy of a typeface, courtesy of AE2S Communications.

That’s a lot of pieces!

Don’t worry, you don’t have to know them all to pick a good font. But there is one that’s pretty important: x-height (can you spot it in the graphic above?). That’s what today’s issue will focus on.

The x-height of a typeface tells you how tall the lowercase letters are compared to the capital letters (the height of the capital letters is called the cap height). It comes from measuring how tall the lowercase “x” is for that particular typeface, hence the name “x-height.”

The x-height is super important for app-building purposes. The larger the x-height, the easier it is to read the text in smaller sizes.

Let’s look at an example.

Let’s compare Futura, a sans serif typeface with a relatively small x-height, to Inter, a typeface with a relatively large x-height.

This visualization shows how x-heights compare, but it’s a pretty contrived example.

Does going from a 59% to a 75% x-height actually make a difference in the context of your app?

Let’s find out. Let’s look at the screen of a mobile app and compare the two typefaces. Here are two versions of the design for The StoryGraph app, one for each typeface.

The tricky part here is accounting for the different font weights. I’ve tried to make them as comparable as possible, but because they come with a different set of styles, some of the text might feel heavier in Futura than in Inter.

But overall, which do you think is more readable? Did the x-heights make a difference to you?

I find that at the smaller sizes, having a slightly heavier weight can increase readability, but where the font weights are the same, the bigger x-height helped me a bunch.

So what are some good x-height typefaces to use for your app? 

There’s a really great video from designer and entrepreneur Mizko called “The Only 8 Fonts UI Designers Need.” While any list like this is pretty subjective, he focuses on elements like uniqueness, x-height, and screen readability to make his recommendations, and they’re pretty solid (although I will note that the correct x-height for Inter is 75%, not 69%).

I picked my favorite three typefaces and implemented them in our mobile app to see how they would look:

All three typefaces are solid choices and you really can’t go wrong with any of them.

Time for a reading break shout out!

If you’re still unsure of what typeface to pick, you can always pick the system defaults. For Apple, that’s the typeface San Francisco (often titled simple “SF”), and for Android, it’s the typeface Roboto. They’re familiar to your users, something they’re already used to seeing, which makes them a safe pick.

Let’s see how those would look:

If you’re not feeling any of these typefaces and want to go with something different, that’s ok too! Whatever you pick, make sure that it’s readable in those tiny sizes and pick a large enough x-height.

But what exactly is a large enough x-height?

The answer to that was harder to find than I expected. Tons of resources tell you to pick a larger x-height, but they don’t actually quantify it.

But from measuring the x-heights myself of the fonts that are considered optimal for a screen, a safe number seems to be 70% or higher.

There are a few other things to consider that can help us narrow down typeface choices, but we’ll get into those in a future issue. For now, let’s focus on those big, juicy x-heights to help keep our interfaces nice and readable.

Happy designing!

Saron