How to Create the Perfect Headline in a Hero Section

The hero section is one of the most familiar and used parts of a website. It's usually where you'll find the main brand image, along with a headline that clearly show what you'll find there. In this post, I'll share a few tips on how to make that headline pop. We'll look into things like character spacing, line height, font weight and style, typeface selection, and more.

1 - The Starting Design

I'll work on the wireframe I quickly put together, focusing on the "Payments infrastructure for the internet" headline. The design is fine, but it could use more appeal, especially in the hero section, which needs to be more captivating.

typeface: Roboto
font size: 80
font-weight: Regular
line height: auto
letter spacing: 0px

2 - Font Size

typeface: Roboto
font size: 120
line height: auto
letter spacing: 0px

We're using Roboto as the typeface, but let's focus on how the headline fits in the available space. There are lots of development-related things to consider, like whether the site will be responsive or if the text will be in em instead of px.

I can't dive into all that right now, so let's keep it simple and look at the image we have. I've bumped up the font size, keeping in mind the visual hierarchy of the page.

By visual hierarchy, I mean how this headline's font size relates to everything else on the page. A huge headline wouldn't work well if everything else is tiny, so if we make it a lot bigger, we'll need to adjust everything else accordingly.

3 - Font Weight

typeface: Roboto
font size: 80
font-weight: Bold
line height: auto
letter spacing: 0px

typeface: Roboto
font size: 120
font-weight: Black
line height: auto
letter spacing: 0px

typeface: Roboto
font size: 120
font-weight: Light
line height: auto
letter spacing: 0px

Here are two different graphic design options I suggest. One uses a bold font (actually black), and the other uses a light weight. Which do you prefer? I think the black is more fitting, but you can definitely create intriguing designs with regular or light weights, especially with certain font-family and font-size

4 - Letter Spacing

typeface: Roboto
font size: 80
font-weight: Regular
line height: auto
letter spacing: -8px (or use -em)

Here's what happens when you tweak character spacing.

With a big font size, you can use negative letter spacing to pull the letters closer. It's an intriguing effect, setting apart refined typography from regular text. I'll show you more examples using different font weights.

The smaller the headline, the less negative spacing you can use. Plus, depending on the typeface, you'll want to avoid characters overlapping.

More examples: Roboto 0px letter spacing VS Roboto -8px letter spacing, both 160px font-size.

typeface: Roboto
font size: 120
font-weight: Regular
line height: auto
letter spacing: -8px (or use -em instead)

typeface: Roboto
font size: 120
font-weight: Regular
line height: auto
letter spacing: -16px (too much)

Using too much negative letter-spacing can mess up typography, making it less attractive. But a little negative spacing can add a modern touch to a typeface. Normally, the default letter-spacing of 0px is based on a standard font-size.

This means that larger fonts need smaller letter-spacing. So, a big headline needs just a bit less letter-spacing. The trick is to find the right balance; you don’t need to go overboard—sometimes just a small reduction does the job.

5 - Line Height

typeface: Roboto
font size: 120
font-weight: Medium
line height: 132px
letter spacing: -8px

Just like letter spacing, line height really depends on the font size. If the font size is big and the typeface fits the style, you can play around with a smaller line height to bring the lines closer together.

The bigger the font, the more you can reduce the line height to almost squish the lines. But be careful—too much negative line height can make reading tough, so don’t overdo it. If you're dealing with a small font size, it's better to go for a higher line height instead.

6 - More Examples with different typefaces

As you can see, tweaking these parameters can really boost your hero's headline and make the website's first section pop. Check out some examples below where I've switched up the typeface a bit.

The typeface choice depends on the brand's style, which we can't change too much here. But hey, I write articles about the best typefaces on my website, so don't miss out on those!