How to Create the Perfect Headline in a Hero Section

How to Create the Perfect Headline in a Hero Section

How to Create the Perfect Headline in a Hero Section

One of the most popular website sections is the hero section. It features the main brand image and a key headline. Here are tips to enhance the headline: character spacing, line height, font style, typeface selection, and more.

One of the most popular website sections is the hero section. It features the main brand image and a key headline. Here are tips to enhance the headline: character spacing, line height, font style, typeface selection, and more.

One of the most popular website sections is the hero section. It features the main brand image and a key headline. Here are tips to enhance the headline: character spacing, line height, font style, typeface selection, and more.

Riccardo Marconato

Mar 4, 2024

Design

Riccardo Marconato

Mar 4, 2024

Design

Riccardo Marconato

Mar 4, 2024

Design

One of the most well-known and utilized sections of a website is the hero section. It's where you typically find the main image representing the brand visually, accompanied by a headline - a prominently sized title. In this post, I want to share some tips on enhancing the headline. We'll explore character spacing, line height, font weight and style, typeface selection, and more.

1 - The Starting Design

I will work on this wireframe I quickly created, focusing on the "Payments infrastructure for the internet" headline. While the design is correct, it lacks 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

The typeface used is Roboto as mentioned earlier, but we'll leave it at that for now. What I want to focus on is how the headline is distributed within the available space. There are many development-related aspects to consider here, such as whether the site will be responsive, if the text will be in em rather than px, and so forth.

I can't discuss these aspects in this post, so let's simplify things and work with the image in front of us. I've increased the font size, taking into account the visual hierarchy with the rest of the page.

When I refer to visual hierarchy, I mean the font size of this headline in relation to the entire page. It's not ideal to have a huge headline if everything else is small, so if we enlarge it significantly, we'll need to recalculate everything else.

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 approaches I suggest. One involves using a bold font weight (actually black) and the other a light weight.

Which one do you prefer? I would say the black is more suitable, but intriguing designs can also be created with the regular / light weights, especially with certain typefaces.

4 - Letter Spacing

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

This is what happens when adjusting character spacing. With a large font size, we can apply negative letter spacing to bring letters closer together. The effect is quite intriguing, distinguishing between refined typography and standard text. I'll show you more examples with different font weights.

The smaller the headline, the less negative spacing we can use. Additionally, depending on the typeface, we need to avoid characters overlapping in the typeface.

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 excessively high negative letter-spacing can distort typography, making it less appealing. However, a touch of negative spacing can breathe modernity into a typeface. Logically, the default letter-spacing of 0px is relative to a standard font-size measure. This implies that for larger font sizes, a smaller letter-spacing is needed. Therefore, a headline with a huge font-size requires a slight decrease in letter spacing. The key is to strike a balance; extreme measures are unnecessary, sometimes a slight reduction in letter spacing is sufficient.

5 - Line Height

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

Just like letter spacing, line height depends greatly on the font size. If the font size is large and the typeface allows it stylistically, we can experiment with a smaller line height to bring the lines closer together.

The larger the font size, the more we can reduce the line height to almost compress the lines. However, be cautious as excessive negative line height makes reading difficult, so it's best not to overdo this parameter. In cases of a small font size, opt for a higher line height instead.

6 - More Examples with different typefaces

As you can see, by working on these parameters, you can significantly enhance your hero's headline, making the website's first section much more captivating. Below are some examples where I've used a different typeface. The choice of typeface, of course, depends on the brand's style, which we can't change much here. However, I write various articles about the best typefaces on my website; don't miss them.

ABOUT THE AUTHOR

Riccardo Marconato

Creative Designer specializing in Product Design and Design Systems. Over 10 years of experience, multiple awards, and international project contributions.

ABOUT THE AUTHOR

Riccardo Marconato

Creative Designer specializing in Product Design and Design Systems. Over 10 years of experience, multiple awards, and international project contributions.

ABOUT THE AUTHOR

Riccardo Marconato

Creative Designer specializing in Product Design and Design Systems. Over 10 years of experience, multiple awards, and international project contributions.

Read more about

Design