Typography-led · 12th century–present
Blackletter
The dense, angular script used in European manuscripts and early printed books, revived in brand identities and subcultural graphic design.
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 16 tokens
- --bg
oklch(12% 0.02 22) - --fg
oklch(88% 0.02 78) - --muted
oklch(60% 0.03 58) - --surface
oklch(17% 0.03 20) - --surface-2
oklch(22% 0.03 20) - --border
oklch(30% 0.04 22) - --accent
oklch(52% 0.22 22) - --accent-fg
oklch(96% 0.01 78) - --focus
oklch(60% 0.22 22)
| Token | Value |
|---|---|
| --font-body | Georgia, 'Times New Roman', serif |
| --font-display | 'UnifrakturMaguntia', 'Old English Text MT', cursive |
| --font-mono | Georgia, 'Times New Roman', serif |
| --radius | 2px |
| --radius-sm | 2px |
| --shadow | 0 2px 8px oklch(4% 0.01 20 / 0.5) |
| --shadow-lg | 0 16px 48px -6px oklch(4% 0.01 20 / 0.75) |
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
:root {
--bg: oklch(12% 0.02 22);
--fg: oklch(88% 0.02 78);
--muted: oklch(60% 0.03 58);
--surface: oklch(17% 0.03 20);
--surface-2: oklch(22% 0.03 20);
--border: oklch(30% 0.04 22);
--accent: oklch(52% 0.22 22);
--accent-fg: oklch(96% 0.01 78);
--focus: oklch(60% 0.22 22);
--font-body: Georgia, 'Times New Roman', serif;
--font-display: 'UnifrakturMaguntia', 'Old English Text MT', cursive;
--font-mono: Georgia, 'Times New Roman', serif;
--radius: 2px;
--radius-sm: 2px;
--shadow: 0 2px 8px oklch(4% 0.01 20 / 0.5);
--shadow-lg: 0 16px 48px -6px oklch(4% 0.01 20 / 0.75);
}Where it came from
Origin: Medieval European manuscript tradition; German printing press, 15th century
Blackletter (also called Gothic script, with Fraktur its best-known German form) was the type of Gutenberg's press in the 1450s; roman type soon displaced it in much of Europe, but it remained standard in German-speaking countries into the 20th century. Newspapers kept it for mastheads well into the 20th century. Heavy metal and hip-hop both claimed it as a graphic language in very different decades, making it one of the most semantically loaded typefaces — a single letterform can communicate heritage, transgression, or authority depending on context.
How to spot it
- Dense, angular strokes with diamond-shaped serifs
- Very low x-height relative to cap height
- Ornate capitals with loops and flourishes
- Typically set in black on white or reversed out of dark ink
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Instantly communicates heritage, authority, or transgression | Genuinely difficult to read at body sizes, especially on screen |
| Unmistakable — no other style can be confused with it | Heavy cultural associations that may not suit every brand |
| Extremely powerful for single words or very short phrases | Uppercase letterforms are nearly illegible without context |
In the wild
- Newspaper mastheads (The New York Times, The Washington Post)
- Heavy metal band logotypes
- Hip-hop streetwear and album graphics
Use it when
One or two words need to carry maximum weight — a brand name, a banner, or a headline with deliberate heritage associations.