Hero section design: size it to the content, not the screen
The hero is the first screen of a page, and its job is to tell a visitor what this is, who it's for and what to do next, with at least one concrete fact in view. A hero stretched to fill the whole screen usually does less of that, not more. Size it to what it has to say.
What the first screen has to answer
A visitor arriving from a search or a link decides within a few seconds whether they're in the right place. The website hero section is what they see while deciding, so it has to answer three questions without scrolling, on a phone as well as a laptop:
- What is this? The business, product or person, named plainly, and what it does in one line.
- Is it for me? A detail that places it: the town, the kind of customer, the size of the job, the price range.
- What do I do next? One primary action, labelled with a verb: Book a table, See the menu, Get a quote.
Add a fact that proves it's real and current: today's opening hours, a starting price, the next event date, a photo of the actual shop. That fact is often what turns a glance into a click.
Why full-height heroes hide things
Setting the hero to height: 100vh became fashionable because it looks dramatic in a desktop screenshot. In practice it pushes every useful fact below the fold. On a phone, the headline often floats in the middle of a tall empty block, and 100vh on mobile browsers can be taller than the visible area once the address bar is counted, so even the button may be cut off. Visitors then have to scroll before they learn anything, and many don't.
Better hero section design lets the hero take the height of what's in it, plus generous padding: roughly 56px to 128px top and bottom depending on screen width, using clamp() so it scales. If you want a tall photographic hero, cap it, for example with min-height: min(84svh, 920px), and make sure the headline, the line under it and the button all sit inside the first phone screen.
The parts of a hero, and their sizes
| Element | Guideline |
|---|---|
| Headline | About 4 to 10 words; display size scaling from around 40px on phones to 80px to 120px on wide screens |
| Line under it | One or two sentences, 18px to 22px, no more than about 60 characters per line |
| Primary button | One, at least 44px tall, verb first; a secondary text link is optional |
| Supporting fact | Hours, price from, location or date, in plain text near the button |
| Image | Real and specific; sized and compressed so it isn't the slowest thing on the page |
Habits that make heroes look generated
- The tiny spaced-capitals label above the headline. One can help; one above every heading on the page is filler.
- The “X, not Y” headline. “Coffee, not compromise” and its relatives say nothing specific. Write the sentence only this business could say.
- One word in the headline recoloured or italicised. It draws the eye to a single adjective rather than to the meaning.
- A carousel. Rotating slides hide most of their content, move while people read and are hard to use with a keyboard. Pick the one message that matters.
- Text over a busy photo. If the headline sits on an image, add a dark scrim or put the text beside the image instead, and check contrast against the lightest part of the photo behind the words.
Accessibility in the first screen
The headline should be the page's single h1, not an image of text. Any entrance animation (headline rising in, image settling) should be short and switched off under prefers-reduced-motion. Hero images that only set a mood can have empty alt text in plain HTML; ones that show the product or place need a description. (In Anticode, Sentinel treats an empty alt as missing, so give every image a short description there.) And the primary button needs a visible focus style, because keyboard users land on it early.
How Anticode handles the hero
Anticode's design engine sizes heroes to their content, and the Critic flags a hero forced to the full screen height with 100vh. The Critic also checks the habits above that it can measure: a spaced-caps label over most headings, the “X, not Y” or two-fragment headline, and a lone word recoloured or italicised in the headline. You can adjust the headline's size with the headline scale control in the visual editor, or rewrite it in place.
For the full-height problem on phones specifically, see 100vh on mobile, and for writing the words, how to write a homepage headline.
Questions people ask
How tall should a hero section be?
As tall as its content plus comfortable padding. On a phone, the headline, the line under it and the main button should all be visible on the first screen without scrolling.
Should a hero section have an image?
If you have a good, real photo of the product, place or person, yes. A stock photo adds nothing; a plain ground with strong type is better than a generic image.
Are hero carousels a good idea?
Rarely. Most visitors see only the first slide, and the motion competes with reading. Choose one message and put the others further down the page.