Combinaciones tipográficas para SaaS: qué debe cumplir una fuente de producto

Antes de discutir sobre gustos, conviene contar. Capturamos los resultados para esta consulta y analizamos cada página con contenido accesible, contando qué familias recomienda cada una.

La convergencia es real, y leerla como pereza es no entender el punto. Estas fuentes siguen apareciendo porque satisfacen una lista específica de restricciones que la mayoría de las tipografías no cumplen; y una vez que se conoce la lista, tanto la convergencia como la forma de evitarla resultan evidentes.

Los consejos sobre combinaciones tipográficas provienen mayoritariamente del diseño editorial y de marca, donde lo clásico es una serif de display sobre una sans de cuerpo. Las interfaces de producto funcionan de otro modo. La mayor parte del texto en la pantalla de un producto tiene entre 12 y 16 píxeles: etiquetas, celdas de tablas, sugerencias de formularios, elementos de navegación, estados vacíos. Hay muy poco "display" y una gran cantidad de texto funcional, pequeño y denso.

Así que la respuesta habitual es una sola familia utilizada en dos funciones —una configuración más pesada y compacta para los encabezados, y una regular para el cuerpo— donde la diferencia se establece mediante el peso, el tamaño y el espaciado entre letras, en lugar de recurrir a un segundo diseño. Esto no es un compromiso. Es lo que logra que una interfaz densa se sienta calmada y elimina toda una clase de desajustes casi imperceptibles.

1. Numerales tabulares. En el momento en que tienes una tabla, una factura, una lista de precios o una métrica que se actualiza, los dígitos proporcionales hacen que las columnas vibren y que los números cambien de ancho al cambiar de valor. Una fuente sin cifras tabulares —o una UI que nunca las habilita— produce esos dashboards erráticos que todo el mundo ha visto y nadie sabe explicar por qué.
2. Separación real entre pesos adyacentes. La jerarquía de un producto suele residir entre 400 y 600 en tamaños pequeños. Si el 400 y el 500 son casi idénticos a 14px, todas las etiquetas parecen tener el mismo peso y la jerarquía deja de existir silenciosamente. Comprueba esto en tu tamaño de cuerpo real, no a 48px, donde todas las familias lucen bien.
3. Una altura de x (x-height) elevada. El texto pequeño constituye la mayor parte de un producto. Las fuentes con una x-height generosa y aperturas abiertas mantienen la legibilidad a 12–13px; las fuentes elegantes con x-heights pequeñas se vuelven ilegibles y terminas compensándolo aumentando el tamaño, lo que rompe tu densidad.
4. Caracteres inequívocos. 1, l e I; 0 y O; rn y m. Los productos muestran IDs, claves de API, códigos de error y nombres de usuario. Una fuente donde estos se confundan genera tickets de soporte, y esto es invisible en una muestra de lorem ipsum.
5. Una licencia que cubra una web app. Self-hosting, incrustación de la app y el nivel de tráfico que esperas. Esta es la restricción que se descubre al final y la que más duele, lo cual es gran parte de la razón por la que las Google fonts de licencia abierta dominan todas las listas.

Esas cinco condiciones descartan la mayoría de las tipografías, que es precisamente por lo que los mismos nombres se repiten constantemente. Pero fíjate en lo que *no* está en la lista: nada sobre el estilo, la época o la personalidad. Las restricciones reducen el campo a unas pocas docenas de familias, no a cuatro; y la elección restante es genuinamente tuya.

Si la fuente del cuerpo de todo el mundo es una grotesk neutra, igualarla no te cuesta nada y diferenciarla te aporta poco —el lector no se queda mirando las celdas de tu tabla admirando la tipografía. Otros dos mecanismos hacen mucho más trabajo:

• Un rol de display que sea genuinamente distinto. Una sans condensada, una serif real o una grotesk de formas distintivas usada solo para títulos de página y superficies de marketing. Aparece poco y define la voz del producto, y como no tiene que soportar texto denso, no tiene que cumplir con las cinco restricciones anteriores.
• Una monoespaciada elegida en lugar de heredada. Cualquier producto que muestre código, IDs, marcas de tiempo o métricas tiene una fuente mono en pantalla constantemente. Dejarla como la predeterminada del navegador es una decisión de diseño no tomada, y elegir una es un movimiento económico y distintivo que nadie copia.

Las combinaciones reales de los kits de lanzamiento siguen exactamente ese patrón: una sans condensada sobre un cuerpo neutro; una serif de display sobre una sans geométrica; una sola familia usada en ambos roles cuando el producto es lo suficientemente denso como para que una segunda fuente suponga ruido. Lo que ninguna de ellas hace es combinar dos grotesks similares y esperar que la diferencia se note.

Aquí tienes tres de esos patrones renderizados en vivo, para que puedas comparar el *rol de display* directamente —el único lugar donde la tipografía de un producto difiere significativamente. Léelos al final de la escala, no al principio de los encabezados: todo parece distintivo a 48px.

Esta es la parte a la que las listas de recomendaciones nunca llegan, y es donde la mayoría de la tipografía de producto falla realmente. Una familia perfectamente elegida con una escala ad-hoc se ve peor que una familia sencilla con una escala consistente.

Define cuatro cosas y escríbelas: un tamaño base, una proporción entre pasos, un conjunto pequeño de alturas de línea y qué pesos son permitidos. Una proporción de entre 1.2 y 1.25 se adapta bien a una UI de producto densa; las proporciones mayores crean páginas de marketing hermosas pero no dejan nada utilizable entre un encabezado de sección y una etiqueta de tabla. La altura de línea debe reducirse a medida que aumenta el tamaño, algo que la gente suele esperar al revés. Y restringir los pesos permitidos a dos o tres es lo que evita que un codebase acumule cinco.

Las interfaces se generan cada vez más a partir de un brief escrito, y la tipografía es donde esos briefs son más escasos. Analizamos 299 archivos DESIGN.md públicos —el documento que un agente de código lee antes de escribir la UI. El 83% menciona la tipografía, lo cual suena bien hasta que ves lo que dicen: el 44% nunca indica un único valor de tamaño concreto, y el 54% contiene al menos un adjetivo impreciso, frecuentemente "clean" o "modern".

"La tipografía debe sentirse refinada" no es una especificación, es un acuerdo. Un agente lo satisface con su idea media de lo refinado, que es Inter a 16px con una altura de línea de 1.5, y lo mismo hace el agente de cualquier otra persona. Una familia con nombre, un tamaño base, una proporción y una lista de pesos permitidos cambia el resultado en cuatro líneas.

1. 1

   Filtrar por las cinco restricciones

   Numerales tabulares, separación de pesos en tu tamaño de cuerpo, x-height, ambigüedad de caracteres, licencia. Esto toma veinte minutos y elimina la mayor parte del campo antes de que entre en juego el gusto.

2. 2

   Probar a 13px en una tabla

   No en una muestra. Configura una tabla real con números, una columna de ID y una mezcla de pesos 400 y 500. Casi todos los fallos aparecen aquí y en ningún otro lugar.

3. 3

   Decidir si necesitas una segunda familia

   Si el producto es denso, probablemente no; dedica el esfuerzo a la escala. Si decides añadir una, que sea una fuente de display que sea inequívocamente distinta.

4. 4

   Elegir la monoespaciada deliberadamente

   Si cualquier código, ID o marca de tiempo aparece en tu UI, esta fuente estará en pantalla constantemente y, por accidente, suele ser la predeterminada del navegador.

5. 5

   Escribe la escala

   Tamaño base, ratio, alturas de línea, pesos permitidos y la regla de los numerales. En el repo, donde tanto la siguiente persona como el agente lo leerán.