3 rules for picking your heading's typeface

When I’m designing a hero section (that first section that users see right below the navbar and logo), I always struggle to pick a typeface for the heading. The heading in this context is that main line of copy that usually describes the product or declares its value proposition.

In the Stripe example below, the heading is the line that reads, “Financial infrastructure for the internet.”

It’s often the first thing that users see on the page, usually conveys an important message, and can set the overall tone for the page. It’s a good idea to put some thought into that typeface and see if you can find a way to make that heading stand out just a bit, complimenting the message and helping the product make a good impression.

So, to find a great typeface, I google something like “fun fonts for headings.”

What I end up with are typefaces that are gorgeous, but usually have too much going on. They’re great for something more graphical, like an artist’s website or a movie poster, but not for my SaaS app.

What I really want are fonts with just a touch of personality, but that still fit into the more straightforward aesthetic of my product site.

So I did a bunch of research and found six typefaces that work really well for the kind of products I’m usually building websites for – primarily, SaaS products.

If you don’t like the typefaces I picked, that’s totally fine! Picking a typeface, especially for a heading, is as much about personal taste as it is anything else. But if you’re browsing typefaces on your own, there are a few things you should consider to create a great design for your users.

Let’s go through the three rules I used to come up with my typeface choices.

Ensure readability

When styling the heading, your font size is going to be pretty big. That means you have some flexibility in how readable your typeface needs to be.

Remember how in an earlier issue we talked about the importance of picking a typeface with a large x-height (the height of the lowercase letters compared to the capital letters) so that it’s readable in small font sizes like buttons and labels? You don’t have to worry about x-height much for headings. You have more freedom.

But not too much freedom.

Although you can get away with smaller x-heights, headings for SaaS products still have quite a few words, making readability an important consideration.

Take this example from Tailwind, where they use Inter for the heading (Pro tip: to find the typeface on any website, check out the WhatFont? browser extension :).

That heading is pretty wordy! Even at a bigger size, the heading still has to be readable, and the funkier the font, the harder it is to read.

Let me show you what I mean.

One of my favorite typefaces that I came across was called Nineties (this site’s a little sketchy, but if you ignore the pop up and click the “download” button near the bottom next to nineties-font.zip, you’ll be fine).

It looks like this:

It’s got a retro vibe, it’s super round, and a little off, but in a fun way.

Sounds great! But how does it look when we use it in our heading?

Yikes, that’s pretty tough to read. I really have to work to make out those words!

We need something much more pragmatic.

A better place for something as fun as Nineties is one where we only need to read one or two words, like in a logo. Now if we wanted to give the Tailwind logo a funky update, this typeface would be a great option.

Here’s what that might look like (check the logo on the top left):

Since it’s just one word, using a funky typeface is just fine. It still feels readable and gives the product some personality.

It can be hard to look at a typeface and put it in the context of your app, so when in doubt, download the typeface and see for yourself! But if you’re trying to eyeball it, look out for “decorative,” “handwritten”, or “display” typefaces. Those are usually better for one or two words, not a full heading.

Avoid condensed fonts

I love condensed fonts. There’s something about the sleek, long strokes that feels bold and regal. They work really well for social media posts when you’re often working with narrow widths, but they usually look awkward in headings.

That’s because when it comes to designing SaaS apps, we’re usually designing our headings in terms of desktop, and that tight narrow typeface in the sprawling width of a browser just looks awkward.

Let me show you what I mean.

Here’s the Tailwind site again as is.

And here’s how it looks in one of my favorite condensed fonts, Bebas Neue.

The entire width of the heading shrunk considerably, leaving a ton of awkward space and a general feel of compression.

To offset this, I might be tempted to make my line length longer so I can get rid of all the spacing.

Let’s see what that does:

Now we have a new problem: too many words in one line! With all those words jam-packed into that first line, my readability goes down and the heading ends up looking overwhelming.

So as a general rule of thumb, I tend to avoid condensed fonts for headings.

Distinct from your subheading

While we don’t want our heading typeface to be too funky, we do want it to be distinct from the subheading, the second line of copy right below my heading.

When the two typefaces are too similar, it creates a different kind of awkwardness – your user will detect that something is different, but because the two typefaces aren’t different enough, it will end up just feeling off.

For example, here’s what the Tailwind site would look like if I used two sans serif typefaces with similar x-heights: Inter and Roboto.

Best case scenario, the users can’t tell the difference, in which case there was no point in using two different fonts. Worst case scenario, it looks awkward.

If you pick a unique typeface for the heading, it should be done with purpose.

A few things to consider when trying to create that distinction are:

1. X-height: Is one typeface’s lowercase letters significantly shorter than the other one?

2. Body or character width: Is one typeface’s letters more narrow than the other one?

3. Shapes of bowls, loops, and shoulders (these are the curves of the letters like an “h”, “p”, or “g”): How does one typeface’s curves compare to the other? Is one significantly rounder?

Looking at these specific typographical elements can be a good starting point for identifying differences between typefaces and making sure they’re different enough.

Pro tip: An easy way to create that distinction between the heading and subheading is to pick a sans serif for one and a serif for the other.

Six Great Typefaces

So now that we’ve covered how to pick a typeface for your heading, let’s see examples of six great typefaces you can use.

For these examples, we’re going to use GitHub’s landing page to experiment.

Here’s the original, where they use a great sans serif font called Mona Sans for their heading:

As we look at these typefaces, think about, not only whether you like the look, but how the look impacts the website overall. What impression are you left with? Knowing what GitHub is, does it fit? What vibe does it give this brand and, more specifically, the message of the heading?

Let’s begin.

League Spartan

Our first typeface is League Spartan, a typeface with a much smaller x-height, giving it a slightly different, more playful aesthetic.

For me, this means it gives GitHub a younger, more playful vibe. I like this vibe, it makes enterprise software look a bit more grounded and relatable.

It also offers a different interpretation to the word “build.” In the original typeface, I imagine building as something big and challenging. With this font, my idea of building turns to something more fun and less serious. A different impression indeed.

Rubik

This next one’s called Rubik and is a thick, slightly rounded typeface. It gives me stationery, thick-marker vibes.

When thinking about what I could build here, the images that come to mind are more woodworking and manual – I’m about to build with my bare hands, which is pretty cool! I could be building a labor of love or a fun hobby project. DIY is the impression I’m left with.

What about you?

Roboto Slab

To switch things up, let’s check out Roboto Slab, a slab serif font that looks like an old-school typewriter.

This feels more professional, but also reminds me of publishing. When thinking about what I could use GitHub to build in this context, I’m thinking of sleek websites and rich content. It feels more media and less apps to me.

What do you think?

Lora

For a more classical look, check out the very elegant Lora. Chic, sophisticated, but still very readable.

This feels similar to Roboto Slab in giving me that publishing look, but it also leans a bit more physical goods and products. I can see myself building a jewelry or fashion site with this tool.

Anek Bangla

A subtly fun typeface is Anek Bangla. On the surface, it looks like a heavy sans serif font with a decent x-height. But if you look at the curve in the b and the d (called the bowl) and the curve in the f (the hook), they’re just a little quirky. There’s that touch of personality that we were looking for.

As far as what I’m building with it, this feels the most open ended and creative. It makes the tool feel like I could build anything I can think of, the limits are my own imagination, which is great! The quirky curves might lean a bit more artistic, but definitely feel boundless to me.

How do you feel looking at this heading?

Nunito

And finally we have the smooth, round edges of Nunito, helping it stand out, but not too much.

I don’t know about you, but I think this one fits really nicely with the space theme of the landing page. There’s a nice contrast between the sharp edges of science and technology and the soft, roundness of the letters. It’s a great reminder that we can be both hardcore builders and still have fun and engage in play at the same time.

What to take away from this issue:

When you’re picking a typeface for your heading, make sure to pick one that’s the right balance of fun and readability. You can do that by:

• Avoiding typefaces that are so funky that they’re unreadable past a few words (when in doubt, download and try it out!)

• Steering clear of condensed typefaces

• Making sure your heading typeface and subheading typefaces are either exactly the same or distinct enough from each other. To be safe, try a sans serif and serif combo.

That’s what I got for today, hope this was helpful 🙂

Happy designing!

Saron