# Editorial / revista

También llamado: diseño editorial, maquetación de revista, periódico web, editorial de formato largo  
Época: herencia impresa; pico web de 2012 hasta hoy (Snow Fall del NYT en 2012 como hito)  
Página: https://designforai.dev/es/style/editorial-magazine

## Rasgos

- titulares en serif display combinados con una sans limpia para UI y pies
- artículos a varias columnas, letras capitulares, citas destacadas, firmas, fecha y lugar
- medida generosa (60-75 caracteres), interlineado amplio, ritmo vertical claro
- imagen hero a sangre con pie de foto y después una columna de lectura estrecha
- filetes finísimos, etiquetas de sección en versalitas, secciones numeradas
- paleta contenida: blanco papel, negro tinta, un acento editorial
- el movimiento se limita a revelados lentos de imágenes al hacer scroll, nada más

Paleta: #fbfaf7 papel, #141414 tinta, #8a1c1c acento (sangre de toro), #6b6b6b gris de pie de foto, #e6e2da filetes

Tipografía: Playfair Display, Fraunces o Newsreader para titulares (700-900, 48-96px), Source Serif 4 o Lora para el cuerpo a 19-21px con line-height 1.7, IBM Plex Sans o Work Sans 12-13px en mayúsculas para etiquetas

## Haz

- compón el cuerpo a 19-21px en una columna de 680px; la comodidad de lectura es el producto
- usa una jerarquía tipográfica de verdad: antetítulo, titular, entradilla, firma, cuerpo, cita destacada, pie
- dale a cada imagen un pie y un crédito

## Evita

- no uses tarjetas para los artículos; sepáralos con filetes, espacio en blanco y tamaños de tipo
- no centres el texto del cuerpo
- no uses más de dos tipografías más una mono para datos

Conocido por: The New York Times, The Atlantic, Bloomberg Businessweek, Kinfolk

## Semilla CSS

```css
:root{--bg:#fbfaf7; --fg:#141414; --accent:#8a1c1c; --muted:#6b6b6b; --rule:#e6e2da; --radius:0; --font:'Fraunces',serif; --font-body:'Source Serif 4',serif}
```

## Prompt

Construye el sitio como una maquetación editorial de revista. Fondo papel #fbfaf7, tinta #141414, acento #8a1c1c, gris de pie #6b6b6b, filetes finos #e6e2da a 1px. Titulares en Fraunces 800 a 88px en escritorio / 44px en móvil, line-height 1.02, letter-spacing -0.02em; entradillas en Fraunces 400 cursiva a 24px; cuerpo en Source Serif 4 a 20px, line-height 1.7, columna con max-width 680px; antetítulos y firmas en IBM Plex Sans 12px en mayúsculas con tracking 0.1em. Imagen hero a sangre en 16:9 con un pie debajo. Añade una letra capitular en el primer párrafo (3 líneas de alto), citas destacadas a 32px que sobresalgan 80px fuera de la columna en escritorio, y títulos de sección numerados. Sin tarjetas, sin sombras, sin radio; separa las secciones con filetes de 1px y 96px de espacio. Las imágenes aparecen con un fundido de 600ms al hacer scroll; nada más se mueve. Pie de página como una cabecera de tres columnas en versalitas.