# Typographic-only

Also called: type-driven design, typography-first, text-only website, no-image design, type as image  
Era: 1960s posters; web 2010 onward (studios, type foundries, manifestos, personal sites)  
Page: https://designforai.dev/style/typographic-only

## Traits

- no photos, no illustration, no icons: type is the only visual material
- extreme scale contrast, from 200px headlines to 12px footnotes
- the grid is visible through alignment alone
- one or two typefaces, exploited fully: weights, italics, small caps, figures
- colour used as a single field or a single word, if at all
- text can be the layout: rotated, outlined, overlapping, running vertically
- motion: variable font axes animating, text reveals, marquee

Palette: #ffffff paper (or #111111 inverted), #111111 ink, #ff3b00 one accent (optional), #9a9a9a muted

Type: one expressive family with range: Fraunces (variable optical size and weight), Geist or IBM Plex Sans variable, Space Grotesk, Playfair Display, or a mono like JetBrains Mono; headlines 96-240px, body 16-18px, footnotes 12px

## Do

- choose a variable font and use its axes (weight, optical size, width) as the design system
- set a strict type scale (12, 16, 24, 40, 72, 128, 240) and never leave it
- use outlined text (-webkit-text-stroke 1px) and overlapping lines for hierarchy instead of images

## Don't

- do not sneak in icons or decorative shapes; if it is not a glyph, it is off-style
- do not use more than two families
- do not make body text hard to read to look clever; only display text gets experimental

Known for it: Pentagram (partial), 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

Build the site as a typographic-only design. No images, no icons, no illustrations, no decorative shapes. Background #ffffff, ink #111111, muted #9a9a9a, one accent #ff3b00 used for a single word per screen. Fonts: Fraunces variable for display and body, Geist 400 at 13px for nav and footnotes. Type scale fixed at 12, 16, 24, 40, 72, 128 and 240px. Hero: a 240px headline in Fraunces at weight 900 and optical size 144, line-height 0.85, tracking -0.04em, wrapping across three lines flush left, with the second line outlined (-webkit-text-stroke 1px #111111, transparent fill). Below it a 24px paragraph in weight 300 at max-width 40ch. Section titles run vertically (writing-mode vertical-rl) in the left margin at 16px uppercase 0.2em. Rules are 1px #111111. Motion: on load the headline animates its weight axis from 300 to 900 over 1.2s; a 16px uppercase marquee runs at 30s linear infinite. No radius, no shadows.