Typography-led · 2010s–present
Big Type
Typography used at extreme scale — letters that bleed off edges and crowd out images, making words the primary visual element.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 15 tokens
- --bg
oklch(98.5% 0 0) - --fg
oklch(4% 0 0) - --muted
oklch(42% 0 0) - --surface
oklch(98.5% 0 0) - --surface-2
oklch(93% 0 0) - --border
oklch(4% 0 0) - --accent
oklch(4% 0 0) - --accent-fg
oklch(98.5% 0 0) - --focus
oklch(4% 0 0)
| Token | Value |
|---|---|
| --font-body | 'Archivo', system-ui, sans-serif |
| --font-display | 'Archivo Black', 'Archivo', system-ui, sans-serif |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | none |
| --shadow-lg | none |
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;600;700&display=swap');
:root {
--bg: oklch(98.5% 0 0);
--fg: oklch(4% 0 0);
--muted: oklch(42% 0 0);
--surface: oklch(98.5% 0 0);
--surface-2: oklch(93% 0 0);
--border: oklch(4% 0 0);
--accent: oklch(4% 0 0);
--accent-fg: oklch(98.5% 0 0);
--focus: oklch(4% 0 0);
--font-body: 'Archivo', system-ui, sans-serif;
--font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
--radius: 0px;
--radius-sm: 0px;
--shadow: none;
--shadow-lg: none;
}Where it came from
Origin: Editorial design, magazine layouts, billboard advertising
Big type pushed past the page in mid-century editorial design and returned to the web as screen sizes grew and bandwidth constraints eased. Modern display fonts with extended weight ranges made it practical to render a single word at 20vw and still control rhythm. Digital-first publications brought poster-scale typography into UI, treating the headline itself as the design.
How to spot it
- Display text set at 10–30vw or larger
- Letters crop at or beyond the viewport edge
- High-contrast palettes — often pure black on white
- Everything else subordinate to the type: images, body text, navigation
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Immediately arresting; communicates before anything else is read | Difficult to localise — translated strings break the layout |
| Works at any screen size without visual hierarchy collapse | Fails when the font lacks character at large sizes |
| Memorable branded voice built from type alone | Very little room for secondary content alongside |
In the wild
- Large-format poster and magazine cover design
- Brand landing pages with a single manifesto line
- Editorial news sites with screaming headlines
Use it when
One strong idea needs to land immediately — a manifesto, a launch, a product with a name worth shouting.