Homepage heading sizes that guide the eye

Key takeaways

Homepage heading size tells visitors what to read first. Use a simple scale of three or four sizes, make the main heading clearly the largest and keep it readable on a phone. As a working guide, 32 to 40 pixels suits a mobile H1 and 44 to 64 pixels suits desktop, with 16 pixels or more for body text.

• Use three or four text sizes across the page.
• Mobile H1: about 32 to 40 pixels.
• Desktop H1: about 44 to 64 pixels.
• Body text: at least 16 pixels.

What size should homepage headings be?

As a working guide, use about 32 to 40 pixels for the main heading on phones and 44 to 64 on desktop. Section headings often sit around 24 to 32 on phones and 30 to 40 on desktop. These are design conventions rather than standards, so test them with your longest headline.

• How to create a high-converting homepage for an SME
• Website typography mistakes that make pages hard to read
• Font size for mobile websites: what is readable?

How do you build a simple type scale?

Choose a body size, then multiply by a set ratio to get each step, for instance 16, 20, 25, 31 and 39 pixels at a ratio of 1.25. Use only those sizes. A consistent scale looks intentional, and it stops the page from filling up with near-identical sizes that create no clear order.

• A design system for a small business website

Why can a very large headline backfire?

Oversized headlines look striking in demos but wrap onto many lines with real wording, especially on phones. A 12-word headline at 64 pixels can fill the screen and push the button out of view. Check your longest real headline at the narrowest phone width before you settle on a size.

• Choose between two homepage headlines without an A/B test
• What belongs above the fold on a business website

Should size match the heading tag?

The visual size should broadly follow the HTML heading order, so that sighted and screen reader users get the same structure. Do not choose an H3 only because you like how small it looks. Style the correct tag with CSS, and keep the structure logical.

• The homepage H1: what it should say
• Homepage section headings that carry the message

What makes text accessible at any size?

Use relative units such as rem, so that text respects browser settings, and make sure it can be enlarged to 200% without breaking, as WCAG requires. Contrast and line height matter as much as size. Thin, pale fonts can be hard to read, even when they are large.

• Navigation at 200% zoom: menus for visitors who enlarge text
• Colour contrast on websites: why grey text loses readers

When should you break these guidelines?

Break them when your headline is unusually long or short, or when a strong brand style calls for it. Short, poster-like statements can go larger, and longer headlines should go smaller. Readability on a real phone is the test that matters, whatever a type scale suggests.

• How many sections should a homepage have?

What does this look like in practice?

A pattern we see: a template demo with a two-word headline at 72 pixels, filled with a real twelve-word headline that takes up the whole phone screen. Reducing the size a step or two usually brings the button and first proof back into view, with no loss of impact.

• See client work
• Website Design & Development for UK businesses

Homepage heading sizes checklist

• Choose a body size of at least 16 pixels.
• Set three or four steps in a scale.
• Test your longest headline on a phone.
• Match sizes to heading tags.
• Use relative units.
• Test browser zoom at 200%.

• Mock up a homepage in Canva or Figma
• Gather your homepage content before design starts

Next step

Open your homepage at the narrowest phone width and count the lines your headline takes. If it is more than three or four, reduce the size or shorten the words.