Big typography web design: using type as the hero image
Big typography web design replaces the hero photograph with the headline itself, set so large that it becomes the picture. It works when the words are short and worth reading at that size, when the line breaks are controlled, and when the type is set to shrink properly on a phone instead of overflowing or breaking mid-word.
Why type can carry a page
Posters have used letters as the main image for as long as there have been posters. The Swiss and constructivist traditions both treated type as shape, and magazine covers routinely let a headline fill half the page. On the web the approach became practical once web fonts and viewport units arrived, so a headline could be sized relative to the screen rather than in fixed steps.
An oversized headline has practical advantages over a hero photo. It loads instantly once the font is there, it can't be a generic stock image, and it states the message before anything else competes for attention. The cost is that the words have to deserve it: a vague slogan at 140px is just a louder vague slogan.
Choosing the words
- Short. Two to six words is the usual range. Anything longer wraps into a paragraph and stops reading as an image.
- Concrete. Name the thing: “Bread worth getting up for” beats “Crafting moments of joy”. Specific nouns survive being enormous.
- One idea. Avoid the formula of a phrase followed by “not” something else, and avoid two clipped fragments with full stops. Both read as copywriting tricks at large sizes.
- No single highlighted word. Recolouring or italicising one word inside a huge headline splits it into two images. Let size do the emphasis.
Setting it: the details that matter at size
| Setting | Body text | Oversized headline |
|---|---|---|
| Line height | About 1.5 | About 0.9 to 1.05; default line height leaves gaps that look like errors |
| Letter spacing | 0 or slightly positive | Slightly negative, often around -0.02em to -0.05em, because spacing that looks right at 16px looks loose at 120px |
| Weight | Regular | Either very heavy or very light; the middle weights look indecisive at scale |
| Case | Sentence case | Sentence case or capitals; capitals need a little more tracking than lowercase |
| Wrapping | Automatic | Balanced with text-wrap: balance, or controlled breaks |
Check the ragged edge. A headline that breaks into a long line and a single orphaned word looks accidental. text-wrap: balance asks the browser to even out line lengths, and where it's not supported the headline simply wraps normally, so it's safe to add.
Making it survive a phone
The commonest failure is a headline sized for a laptop that overflows a 375px screen or breaks a long word across lines. Size the headline with clamp(): a minimum in pixels or rem for phones, a preferred size tied to the viewport, and a maximum so it stops growing on wide monitors. A long single word such as a brand name sets the real minimum, so test the longest word, not the average one. Hyphenation (hyphens: auto, with the page's lang set) and overflow-wrap: break-word are safety nets, not a design; if they're firing, the size is too big.
Don't size the hero to the full screen height just to make room. A section forced to 100vh pushes the next section out of sight and behaves unpredictably as mobile browser bars appear and hide. Let the hero be as tall as its content, and let big type do the work of filling it. For the mechanics of fluid sizes, see fluid typography with CSS clamp.
Accessibility
- Keep the headline as real text in an
h1, never an image of text, so it can be read aloud, translated and resized. - When a visitor zooms to 200%, a headline that's already near the screen width must still fit, which is another reason to give
clamp()a sensible minimum and maximum. - If the headline animates in, honour the reduced-motion setting, and don't keep it moving after load.
Big type in Anticode
Every Anticode design system sets its hero headline on a fluid size with a minimum and maximum, tight line height and negative tracking, and some lean on it harder than others: Brutalist sets condensed capitals at a very heavy weight, Swiss sets a heavy grotesque on a strict grid, and Luxury uses a light weight at large size. In the visual editor, the headline scale control makes the hero headline larger or smaller in steps, without changing the rest of the type scale.
The Critic backs up the advice above on every build: it flags a hero forced to the full screen height, the “X, not Y” headline formula, and a single word recoloured or italicised in the headline. The template gallery's FORM/26, a design conference site built around kinetic type, shows a type-led hero in a similar style.
Questions people ask
How big should a hero headline be?
On a laptop, oversized headlines commonly run from about 80px to 160px; on a phone, roughly 40px to 64px. The longest word decides the phone size more than any rule.
Can a website hero have no image?
Yes. A strong headline with a clear action is often more effective than a generic photo, as long as real photographs of the business appear further down.
Should huge headlines be in capitals?
Capitals work well for short, condensed headlines. For longer phrases, sentence case is quicker to read and less shouty.
Sources
- text-wrap, MDN Web Docs, checked