UX Movement Newsletter

UX Movement Newsletter

Share this post

UX Movement Newsletter
UX Movement Newsletter
The Optimal Design for a Landing Page Hero

The Optimal Design for a Landing Page Hero

Increase User Engagement

Jun 22, 2022
∙ Paid
22

Share this post

UX Movement Newsletter
UX Movement Newsletter
The Optimal Design for a Landing Page Hero
2
Share

Imagine a user visiting your landing page and glossing over everything on it. Users often do this when the hero section doesn’t have an optimal design.

The hero section is the large area above the fold that informs users about your website. You need to display the text, images, buttons, and layout in a way that captures interest and attention in a matter of seconds.

Display Font

Many hero sections fail because they use font sizes that are too small and font weights too light. You should avoid using paragraph body text and regular weight fonts for your hero. Instead, use a display font for the headline and subheadline.

For example, look at the text for Google's hero. They're the same size as body text and have little weight. When users see this, they don't feel inclined to read it because it requires more effort.

Compare that with the redesigned hero, and you can see that the text is now effortlessly scannable. The difference is the use of a display font that's easily read at large sizes. 

This post is for paid subscribers

Already a paid subscriber? Sign in
© 2025 Anthony from UX Movement
Privacy ∙ Terms ∙ Collection notice
Start writingGet the app
Substack is the home for great culture

Share