Back to patterns
hero-math
Hero Math
Constrain display type, vertical budget, subcopy, action position, and mobile proof so expressive heroes remain readable and useful.
PatternsRecommended
Intent
Prevent ambitious public pages from shipping with clipped title text, accidental line breaks, hidden calls to action, or first screens whose typography consumes the usable height.
Checks
- Name the intended desktop title line count and mobile title behavior.
- Budget fixed chrome, safe spacing, title, subcopy, proof, action, and next-section reveal at a representative short desktop and mobile height.
- Give the combined header and hero one viewport-height budget; use one first-screen wrapper or subtract the measured external header height from the hero.
- Choose full-viewport coverage, an intentional next-band reveal, or a content-led boundary; do not leave a blank page-background strip below full-bleed media.
- Keep subcopy compact enough to scan and within a readable measure.
- Keep the first action and primary proof or hook visible early on mobile.
- Use responsive type steps and balanced wrapping instead of brittle hard breaks.
Warnings
- A poster-style hero can be tall, but fixed viewport heights and hidden overflow must not clip its action path, mobile proof, or intended section boundary.
Exceptions
- Experimental art pages may prioritize poster impact when the user explicitly asks for that direction.