# Solo tipografía

También llamado: diseño guiado por la tipografía, tipografía primero, web solo de texto, diseño sin imágenes, tipografía como imagen  
Época: carteles de los años 60; web de 2010 en adelante (estudios, fundiciones tipográficas, manifiestos, sitios personales)  
Página: https://designforai.dev/es/style/typographic-only

## Rasgos

- sin fotos, sin ilustración, sin iconos: la tipografía es el único material visual
- contraste de escala extremo, de titulares de 200px a notas al pie de 12px
- la retícula se ve solo a través de la alineación
- una o dos tipografías, explotadas al máximo: pesos, cursivas, versalitas, cifras
- color usado como un único campo o una única palabra, si acaso
- el texto puede ser el layout: rotado, contorneado, solapado, en vertical
- movimiento: ejes de fuente variable animándose, revelados de texto, marquesina

Paleta: #ffffff papel (o #111111 invertido), #111111 tinta, #ff3b00 un acento (opcional), #9a9a9a apagado

Tipografía: una familia expresiva con rango: Fraunces (tamaño óptico y peso variables), Geist o IBM Plex Sans variable, Space Grotesk, Playfair Display, o una mono como JetBrains Mono; titulares 96-240px, cuerpo 16-18px, notas al pie 12px

## Haz

- elige una fuente variable y usa sus ejes (peso, tamaño óptico, anchura) como sistema de diseño
- fija una escala tipográfica estricta (12, 16, 24, 40, 72, 128, 240) y no te salgas nunca de ella
- usa texto contorneado (-webkit-text-stroke 1px) y líneas solapadas para la jerarquía en lugar de imágenes

## Evita

- no cueles iconos ni formas decorativas; si no es un glifo, se sale del estilo
- no uses más de dos familias
- no hagas el texto del cuerpo difícil de leer para parecer ingenioso; solo el texto display se vuelve experimental

Conocido por: Pentagram (parcial), Klim Type Foundry, Dinamo, Bureau Borsche, escaparates de Readymag

## Semilla CSS

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

## Prompt

Construye el sitio como un diseño solo tipográfico. Sin imágenes, sin iconos, sin ilustraciones, sin formas decorativas. Fondo #ffffff, tinta #111111, apagado #9a9a9a, un acento #ff3b00 usado para una sola palabra por pantalla. Fuentes: Fraunces variable para display y cuerpo, Geist 400 a 13px para nav y notas al pie. Escala tipográfica fija en 12, 16, 24, 40, 72, 128 y 240px. Hero: un titular de 240px en Fraunces a peso 900 y tamaño óptico 144, line-height 0.85, tracking -0.04em, partido en tres líneas alineadas a la izquierda, con la segunda línea contorneada (-webkit-text-stroke 1px #111111, relleno transparente). Debajo, un párrafo de 24px a peso 300 con max-width 40ch. Los títulos de sección corren en vertical (writing-mode vertical-rl) en el margen izquierdo a 16px en mayúsculas 0.2em. Los filetes son 1px #111111. Movimiento: al cargar, el titular anima su eje de peso de 300 a 900 durante 1.2s; una marquesina de 16px en mayúsculas corre a 30s linear infinite. Sin radio, sin sombras.