# Rein typografisch

Auch bekannt als: typgetriebenes Design, Typography-first, Nur-Text-Website, bildloses Design, Schrift als Bild  
Ära: Poster der 1960er; Web ab 2010 (Studios, Schriftgießereien, Manifeste, persönliche Seiten)  
Seite: https://designforai.dev/de/style/typographic-only

## Merkmale

- keine Fotos, keine Illustration, keine Icons: Schrift ist das einzige visuelle Material
- extremer Größenkontrast, von 200px Headlines bis 12px Fußnoten
- das Raster ist allein durch Ausrichtung sichtbar
- eine oder zwei Schriften, voll ausgereizt: Schnitte, Kursive, Kapitälchen, Ziffern
- Farbe als einzelne Fläche oder einzelnes Wort, wenn überhaupt
- Text kann das Layout sein: gedreht, umrandet, überlappend, vertikal laufend
- Motion: variable Schriftachsen animieren, Text-Reveals, Marquee

Palette: #ffffff Papier (oder #111111 invertiert), #111111 Tinte, #ff3b00 ein Akzent (optional), #9a9a9a gedämpft

Schrift: eine ausdrucksstarke Familie mit Spielraum: Fraunces (variable optische Größe und Gewicht), Geist oder IBM Plex Sans variabel, Space Grotesk, Playfair Display oder eine Mono wie JetBrains Mono; Headlines 96-240px, Fließtext 16-18px, Fußnoten 12px

## Do

- wähle eine variable Schrift und nutze ihre Achsen (Gewicht, optische Größe, Breite) als Designsystem
- setze eine strenge Typoskala (12, 16, 24, 40, 72, 128, 240) und verlass sie nie
- nutze umrandeten Text (-webkit-text-stroke 1px) und überlappende Zeilen für Hierarchie statt Bilder

## Don't

- schmuggle keine Icons oder dekorativen Formen hinein; ist es keine Glyphe, passt es nicht zum Stil
- nutze nicht mehr als zwei Familien
- mach Fließtext nicht schwer lesbar, um clever zu wirken; nur Display-Text wird experimentell

Bekannt dafür: Pentagram (teilweise), Klim Type Foundry, Dinamo, Bureau Borsche, Readymag-Showcases

## CSS-Seed

```css
:root{--bg:#ffffff; --fg:#111111; --accent:#ff3b00; --muted:#9a9a9a; --radius:0; --scale:1.6; --font:'Fraunces',serif; --font-ui:'Geist',sans-serif}
```

## Prompt

Baue die Seite als rein typografisches Design. Keine Bilder, keine Icons, keine Illustrationen, keine dekorativen Formen. Hintergrund #ffffff, Tinte #111111, gedämpft #9a9a9a, ein Akzent #ff3b00 für ein einzelnes Wort pro Screen. Schriften: Fraunces variabel für Display und Fließtext, Geist 400 bei 13px für Nav und Fußnoten. Typoskala fest bei 12, 16, 24, 40, 72, 128 und 240px. Hero: eine 240px Headline in Fraunces bei Gewicht 900 und optischer Größe 144, line-height 0.85, Tracking -0.04em, über drei Zeilen linksbündig umbrechend, mit der zweiten Zeile umrandet (-webkit-text-stroke 1px #111111, transparente Füllung). Darunter ein 24px Absatz in Gewicht 300 bei max-width 40ch. Abschnittstitel laufen vertikal (writing-mode vertical-rl) im linken Rand bei 16px Versalien 0.2em. Linien sind 1px #111111. Motion: beim Laden animiert die Headline ihre Gewichtsachse über 1.2s von 300 auf 900; ein 16px Versalien-Marquee läuft mit 30s linear infinite. Kein Radius, keine Schatten.