5.5 · Type

Display /
Hero Typography.

Text itself IS the design. Big, tight letter-spacing, sub-1 line-height. No hero image needed.

What it is

Display typography means using text itself as the primary visual element of a design — the headline is so large, so bold, and so beautifully set that no hero image is needed. At 80px, 100px, or even larger, a single headline becomes a visual experience. Popular on portfolio sites, creative agencies, editorial brands, and tech products that want to lead with confidence and personality rather than a generic stock photo.

How it works

The key CSS property is font-size set very large — typically using clamp(60px, 9vw, 120px) so it scales smoothly. Font-weight is usually 700 or 900 for maximum visual weight. Letter-spacing is tightened with a negative value (-0.03em to -0.05em). Line-height is reduced (0.9 to 1.1) — display text wraps to fewer lines and tight line-height creates a compact, powerful block.

clamp(min, fluid, max)clamp(60px, 9vw, 120px) — scales the font fluidly
Negative letter-spacing-0.03em to -0.05em on large headings — feels tight and contemporary
Line-height < 10.9 to 1.05 for display text — tighter than body text
Font-weight 900Black or Extra Bold weight — maximum visual impact at large sizes
Tip. One of the most powerful display typography techniques: set one key word in a different color, gradient, or italic/outlined style. This creates a visual anchor and rhythm in the headline.

Live demo

Live
— Studio Obys / vol. 14

We craft digital experiences that matter.

A small studio that builds long, weird, brave websites for brands willing to look like themselves and no one else.

Copy this prompt

Prompt · 5.5 Display Typography
Create a typographic hero section where the headline IS the design — no hero image needed. Background: #0A0A0A (near-black). Main headline: font-size clamp(64px, 9vw, 112px), font-weight:800, letter-spacing:-0.04em, line-height:0.95, color:#F1F1EE. The headline reads: 'We craft digital experiences that matter.' Make 'digital experiences' render in italic style AND a gradient text (from #667eea to #f64f59). Below the headline: a 1px white horizontal rule at 20% opacity, then a two-column layout — left: subtext paragraph (18px, muted #888, max-width:400px), right: two CTA buttons stacked vertically. No image anywhere on this hero. Let the typography breathe with 120px top and bottom padding.

Example sites to study