Cómo elegir una fuente display sin arruinar la legibilidad

La landing se lanzó y quedó preciosa: una fuente display de mucho contraste en el hero, llena de personalidad a 64 píxeles. Seis semanas después la misma fuente aparece en la pantalla de ajustes a 13 píxeles: los trazos adelgazados hasta quedar como hilos, el ajuste cerrado entre letras convertido en manchones, cada etiqueta cargando florituras que nadie pidió a ese tamaño. Nadie decidió esto. La fuente se fue filtrando hacia abajo, un «solo por consistencia» cada vez, porque nada marcaba dónde dejaba de ser bienvenida.

Una fuente display es un tipo de letra dibujado para tamaños grandes —más contraste entre trazos gruesos y finos, espaciado por defecto más ajustado, más personalidad en las formas de las letras— y cada una de esas decisiones de diseño juega en su contra a tamaños pequeños. La regla práctica: una fuente display ocupa más o menos los dos o tres escalones superiores de la escala tipográfica y nada por debajo; una fuente de cuerpo robusta se encarga de todo lo demás. Este artículo forma parte de nuestra guía de tipografía.

¿Qué hace que un tipo de letra sea una fuente display?

El tamaño para el que está pensado. Un tipo de letra display está dibujado para verse grande —titulares, carteles, heroes— y sacrifica robustez a tamaño pequeño a cambio de carácter a tamaño grande. Ese sacrificio se manifiesta en tres decisiones de diseño concretas:

• Más contraste de trazo. Astas gruesas frente a finos capilares: espectacular a 60px, donde un trazo capilar todavía mide varios píxeles de ancho.
• Espaciado por defecto más ajustado. El texto grande necesita menos aire entre letras, así que las fuentes display se ajustan muy cerradas.
• Más personalidad en las formas de las letras. Detalles, rarezas y florituras que recompensan la mirada cercana que invita un titular.

Las tres son virtudes en su hábitat. Las tres se convierten en lastres en cuanto se le pide a la fuente que haga un trabajo distinto.

¿Por qué fallan las fuentes display a tamaños pequeños?

Porque la lectura cambia con el tamaño. A tamaño display, el ojo trata las formas de las letras como figuras: se detiene, se fija en el detalle, lo disfruta. A tamaño de cuerpo, el ojo lee formas de palabra: siluetas de palabras completas reconocidas a gran velocidad, decenas por segundo. El detalle que recompensaba al ojo que se detiene se vuelve interferencia para el ojo que escanea.

Cada sacrificio de las fuentes display se invierte entonces. Los trazos capilares se adelgazan hasta casi desaparecer, o se rompen en pantallas de menor resolución. El ajuste cerrado, generoso a 60px, apelmaza los pares de letras en manchones a 13px. Y la personalidad se convierte en ruido: una rareza que admiraste una vez en un titular es una rareza que el lector tiene que filtrar en cada línea de un párrafo.

¿Dónde encaja una fuente display en la escala tipográfica?

Arriba del todo —más o menos los dos o tres escalones superiores— y en ningún otro sitio. Nunca toca el texto de cuerpo, los pies de foto ni las etiquetas de interfaz; la fuente de cuerpo se encarga de todo lo que queda por debajo del punto de traspaso. En la escala web clásica (base de 16px, ratio de clase cuarta justa —las matemáticas del dimensionado viven en nuestra guía de escala tipográfica—), el reparto queda así:

El escalón de traspaso —donde el estilo display termina y empieza el estilo de encabezado— es la única decisión que merece tomarse de forma explícita. Una fuente con mucha personalidad suele traspasar por encima de h2; una más suave puede aguantar hasta ahí. Por debajo del traspaso no hay debate: 21px es territorio de párrafo, y el territorio de párrafo pertenece a la fuente de trabajo.

Mira una fuente display sobre un cuerpo de trabajo a lo largo de toda la escala — una fuente de encabezado con mucha personalidad sobre un cuerpo de clase Inter, cada escalón mostrado en texto de muestra a su tamaño real. Desliza la vista por la muestra y encuentra el escalón donde la fuente display deja de ser un placer; ese es tu punto de traspaso.

¿Qué le exige una fuente display a la fuente de cuerpo?

Neutralidad, en proporción a su propio volumen. Cuanta más personalidad tenga la fuente display, más neutra tiene que ser la fuente de cuerpo: una voz habla, la otra sostiene. Vale la pena enunciar esa división del trabajo de forma explícita, porque es toda la lógica del emparejamiento de fuentes. Dos fuentes expresivas compiten, y una página que compite consigo misma se lee más ruidosa y menos segura que cualquiera de las dos fuentes por separado. Las fuentes de trabajo discretas —de clase Inter, de clase Source Sans— existen precisamente para este trabajo, y elegir una no es una falta de imaginación: es lo que hace asequible la elección imaginativa de arriba.

¿Cómo pones a prueba una fuente display antes de comprometerte?

Ponla a tamaño de cuerpo y observa cómo falla. En serio: mete un párrafo completo de texto real de producto en la fuente candidata a 16px y léelo. Deberías ver llegar los modos de fallo puntualmente: los finos sufriendo, los pares apelmazándose, la textura cansando ya en la tercera línea. Ese fallo es un aprobado: confirma que la fuente es lo que dice ser, y que tu regla de traspaso es estructural.

Si sobrevive —si el párrafo se lee con comodidad— no has encontrado una fuente display en absoluto. Has encontrado una fuente de trabajo con recorrido, y conviene saberlo antes de comprometerte: puede significar que solo necesitas una familia, con el peso y el tamaño haciendo el trabajo que habrían hecho dos fuentes.

¿Cuántas fuentes display deberías usar?

Una. Una fuente display se gana su sitio siendo la nota de identidad —aquello por lo que el lector recuerda la página— y las notas de identidad no se comparten. Una segunda fuente display no añade expresividad; divide el reconocimiento entre dos voces y reduce ambas a la mitad. Las excepciones son los proyectos de dirección de arte —un reportaje de revista, una campaña— donde la variedad es el objetivo; en tipografía de producto y de marca, una fuente display sobre una fuente de cuerpo cubre casi todas las necesidades.

Mírala fallar a propósito

Pon la candidata display a tamaño de cuerpo y lee un párrafo completo. Si se apelmaza y cansa, comprométete con confianza y marca el escalón de traspaso en tu escala. Si se lee bien, replantéate la premisa: puede que estés a una familia de distancia de un sistema más simple.