Design beautiful websites to sell your product — Headlines

Last week, we discussed how colors impact your conversion rate and why less is better.

Now, let’s focus on the most important part of your landing page — headlines.

Rule #2: Emphasise your headline

People don’t read text.

At least, not until you get their attention. Your headline must be remarkable if you want people to read your copy. Let’s redesign it.

Make it big

The default font size is 16px. Headlines should be bigger (of course, Marc). But how big?

The sweet spot is somewhere between 36px and 60px. It depends on the typeface you use.

Your first headline (<h1> in the hero section) is usually bigger than the secondary ones (<h2>). 

Once you set a system, use the same for the entire landing page. Here’s mine:

• 60px for <h1>

• 48px for <h2>

Make it bold

The default font weight is 400. Headlines’ font weight should be big too.

The sweet spot is between 700 (bold) and 900 (black). It depends on the typeface you use.

Pick a font weight and keep it all across your website.

Make it tight 

Headlines should be compact to be read easily.

1. Reduce the letter spacing by -0.4px

2. Reduce the line height to 1

But make it light

Headlines must be short or your visitors will never read them. Use 70 characters max.

If your headline is larger than 1000px, break the line. Find a semantic breakpoint, not a visual one.

Avoid using more than 2 lines.

Make it pop

Use the most contrasted color towards your Base (yep, the Base Content one).

Avoid dropping another color. It breaks the reading flow. And conflicts with your main Call-To-Action.

If you need to highlight a word, use visual clues.

Use responsibly

There’s nothing easier to understand than a website section with:

• 1 headline 

• 1 paragraph 

• 1 image

• 1 button

Write one headline per section of your landing page. Not 0, not 2, just 1.

Make it responsive

All rules above work on mobile devices, except for the font size.

Make your headlines a bit smaller than on desktop — 32px to 40px is the sweet spot.