# Fuentes display: cómo diseñar con tipografía grande

[Canonical HTML page](https://gradiently.design/es/guide/display-fonts)

La tipografía grande puede sostener un diseño entero. También puede gritar, agobiar y envejecer mal. La diferencia está sobre todo en la elección de la fuente, el tamaño y con qué la combinas.

## The short version

- Las fuentes display son tipografías diseñadas para usarse en tamaños grandes, para titulares, pósteres, logotipos y portadas, y no para párrafos.
- Suelen tener más contraste, un espaciado más apretado o una personalidad más fuerte que las fuentes de texto, lo que las hace llamativas en grande y difíciles de leer en pequeño.
- Usa una fuente display para unas pocas palabras cada vez y combínala con una fuente de texto tranquila y legible para todo lo demás.
- La tipografía grande necesita un interlineado más ajustado y, a menudo, un espaciado entre letras algo más apretado que sus valores por defecto.
- Muchas familias incluyen un corte Display aparte o un eje de tamaño óptico que adapta el diseño automáticamente a los tamaños grandes.

Las **fuentes display** son tipografías dibujadas para usarse en grande: titulares, pósteres, portadas, envases y ráfagas cortas de palabras. Sus detalles, desde el fuerte contraste entre trazos gruesos y finos hasta el espaciado apretado y las formas expresivas, están pensados para lucir al máximo en tamaños grandes y suelen deshacerse en tamaños de párrafo. Usa una fuente display para las pocas palabras que deben detener a alguien, y una fuente de texto más discreta para todo lo que lea después.

Esta guía cubre qué convierte una fuente en una fuente display, qué tamaño darle, cómo combinarla y cómo evitar que la tipografía grande se vea agobiante o anticuada. Se apoya en [fundamentos de tipografía](https://gradiently.design/es/guide/typography-basics) y [jerarquía visual](https://gradiently.design/es/guide/visual-hierarchy).

## Qué distingue a una fuente display de una fuente de texto

Las fuentes de texto se construyen para la comodidad a lo largo de miles de palabras: formas abiertas, trazos robustos, espaciado generoso y una altura de x grande para que las letras sobrevivan a tamaños pequeños y a pantallas malas. Las fuentes display sacrifican parte de eso por el carácter. A 80 px nadie tiene problemas para ver las letras, así que el diseñador puede forzar el contraste, estrechar los anchos, afilar los detalles y apretar el espaciado.

| Rasgo | Fuente de texto | Fuente display |
| --- | --- | --- |
| Contraste del trazo | Bajo a moderado | A menudo alto, con finos como un pelo |
| Espaciado | Abierto, para tamaños pequeños | Apretado, para tamaños grandes |
| Detalles | Simples, robustos | Serifas finas, ink traps, rarezas |
| Mejor tamaño | Aprox. de 12 a 24 px en pantalla | Aprox. de 40 px en adelante |
| Función | Ser leída | Ser notada y luego leída |

Rangos aproximados: cada familia es distinta, y tu comprobación final es siempre el diseño real en su tamaño real.

Algunas familias vienen en ambas versiones: un corte Text y un corte Display del mismo diseño, o un único archivo variable con un eje de tamaño óptico que se ajusta solo al cambiar el tamaño. [Fuentes variables](https://gradiently.design/es/guide/variable-fonts) explica el tamaño óptico con más detalle.

## Tipos de fuentes display y el ambiente que crea cada una

Lo más fácil es elegir una tipografía display por la sensación que buscas. Cada familia de abajo incluye ejemplos muy disponibles de Google Fonts, para que puedas probarlos con tus propias palabras.

- **Serifas de alto contraste**: moda, cultura, editorial. Ejemplos: Playfair Display, DM Serif Display, Bodoni Moda.
- **Sans condensadas**: urgencia, deporte, noticias, pósteres. Ejemplos: Bebas Neue, Anton, Oswald.
- **Sans anchas y extendidas**: tecnología, marcas modernas, calma segura. Ejemplos: Syne, Unbounded.
- **Suaves y redondeadas**: cercanas, comida, infancia, bienestar. Ejemplos: Fraunces con su eje suave, Fredoka.
- **Grotescas pesadas**: declaraciones contundentes, lanzamientos, activismo. Ejemplos: Archivo Black, Inter Tight en peso black.
- **Script y de trazo a mano**: invitaciones, artesanía, marcas personales, usadas con moderación. Ejemplos: Caveat, Yellowtail.

Una portada vertical de estilo revista con un gran titular display sobre un degradado profundo

Una portada editorial: un titular display sostiene el diseño, con texto pequeño en una fuente discreta.

Una publicación vertical de rebajas con tipografía display condensada y gruesa sobre un degradado brillante

Una publicación de rebajas: la tipografía display condensada mete palabras grandes en un espacio estrecho.

## Qué tamaño debe tener la tipografía display

Lo bastante grande para que sea claramente lo primero que se ve, y lo bastante pequeña para que las palabras quepan en pocas líneas. Un buen hábito es dimensionar la tipografía display en relación con el lienzo y no en puntos. En una publicación de 1080 por 1350, un titular de dos a cuatro palabras suele ocupar entre el 70 y el 90 por ciento del ancho. En una web, el titular de una portada suele estar entre tres y seis veces el tamaño del cuerpo.

En la web, `clamp()` escala la tipografía display con suavidad entre un mínimo y un máximo, de modo que sea grande en pantallas grandes sin desbordarse en los móviles. Aprieta el interlineado y el espaciado entre letras a medida que crece el tamaño; los valores por defecto están dibujados para texto más pequeño.

```css
.hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.75rem, 5vw + 1rem, 6.5rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 14ch;
}

.hero-lede {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
}
```

Un titular display fluido con interlineado apretado y un ligero tracking negativo, combinado con una entradilla legible. `max-width` en `ch` mantiene el titular en pocas líneas.

> **La prueba de la miniatura** Reduce tu diseño al tamaño con el que aparecerá en un feed o en un resultado de búsqueda. Si la tipografía display sigue siendo lo primero que lees, el tamaño es correcto. Si las palabras se vuelven textura, recorta palabras antes de reducir la tipografía.

## Combinar una fuente display con una fuente de texto

La combinación fiable más sencilla da a cada fuente una sola función. La tipografía display habla alto durante unas pocas palabras; la de texto hace el trabajo tranquilo de los pies de imagen, el cuerpo, las fechas y los precios. Contrasta las dos de al menos una forma clara, como serif frente a sans o condensada frente a ancho normal, para que no parezcan casi iguales. [Combinar fuentes](https://gradiently.design/es/guide/font-pairing) cubre las reglas completas.

### Evita

- Dos fuentes display compitiendo en un mismo diseño
- Una tipografía display para texto de cuerpo o pies de imagen pequeños
- Una combinación tan parecida que parece un error
- Todas las palabras del diseño en tamaño display

### Haz

- Una tipografía display y una de texto tranquila
- Tipografía display solo para unas pocas palabras
- Un contraste claro en estructura o ancho
- Palabras grandes arriba y palabras pequeñas que explican

## Tipografía display sobre degradados y fondos cargados

La tipografía grande es el texto más tolerante que puedes poner sobre un fondo colorido, porque los trazos gruesos mantienen su forma frente al movimiento del campo de detrás. El riesgo está en las partes finas: las serifas como un pelo y los detalles delicados desaparecen en las zonas más claras o más cargadas de un degradado. Sobre fondos ricos, elige una tipografía display con finos más robustos, o sube el peso.

Una publicación vertical con un gran titular sobre un degradado que se suaviza detrás del texto

Tipografía display sobre un degradado vivo: el fondo se calma y deja espacio tras las palabras.

En Gradiently, un Mark sabe dónde están tus palabras: su zona más calmada se mueve detrás del titular y los colores cercanos a las letras se profundizan o se aclaran, así que incluso la tipografía display fina aguanta. Los tratamientos de rotulación como Contour, Inline y Extrude dan carácter a las palabras display cuando la fuente en sí es sencilla; [efectos de texto](https://gradiently.design/es/guide/text-effects) muestra cuándo funcionan.

## Errores que abaratan la tipografía display

1. **Espaciado por defecto en tamaños enormes** La tipografía grande con los valores del texto se ve suelta. Aprieta el interlineado a más o menos 1 a 1,1 y el espaciado entre letras un poco.
2. **Negrita y cursiva falsas** Cuando a una fuente le falta un estilo, las herramientas y los navegadores pueden fingirlo manchando o inclinando las letras. Carga los pesos y cursivas reales.
3. **Estirar la tipografía para que quepa** Nunca escales la tipografía en horizontal ni en vertical. Elige mejor un corte condensado o ancho.
4. **Fuentes de moda sin motivo** Una fuente elegida porque está en todas partes esta temporada envejece con la temporada. Elige por el ambiente que necesitas.
5. **Palabras huérfanas en titulares de dos líneas** Una sola palabra corta sola en la segunda línea debilita el titular. Reescribe, cambia el corte o usa `text-wrap: balance`.

## FAQ

### ¿Qué es una fuente display?

Una fuente display es una tipografía diseñada para tamaños grandes, como titulares, pósteres y logotipos. Sus detalles y su espaciado apretado lucen mejor en grande y suelen leerse mal en tamaños de párrafo.

### ¿Puedo usar una fuente display para el texto de cuerpo?

Mejor que no. Las fuentes display sacrifican la legibilidad en tamaños pequeños por el carácter, así que los párrafos compuestos con ellas cansan al leer. Combínalas con una fuente de texto.

### ¿Qué tamaño debe tener una fuente display?

Lo bastante grande para ser lo primero que la gente vea, normalmente varias veces el tamaño del cuerpo. En una publicación de 1080 por 1350, un titular corto suele ocupar la mayor parte del ancho.

### ¿Dónde encuentro fuentes display gratuitas?

Google Fonts tiene muchas familias display con licencias abiertas, como Playfair Display, Bebas Neue, Anton y Fraunces. Comprueba siempre la licencia de una fuente antes de usarla en una marca.