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

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 y jerarquía visual.

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.

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 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.

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.

.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;
}

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 cubre las reglas completas.

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.

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 muestra cuándo funcionan.

Errores que abaratan la tipografía display

1. 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. 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. 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. 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. 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.