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

Antes de discutir sobre gustos, conviene analizar los datos. 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 considerarla simple pereza es erróneo. Estas fuentes aparecen repetidamente porque satisfacen una lista específica de restricciones que la mayoría de las tipografías no cumplen. Una vez que se conoce dicha 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 usar una serif de display sobre una sans de cuerpo. Las interfaces de producto funcionan de otra manera. La mayor parte del texto en la pantalla de un producto mide entre 12 y 16 píxeles: etiquetas, celdas de tablas, pistas de formularios, elementos de navegación, estados vacíos. Hay muy poco contenido de "display" y una gran cantidad de texto funcional, denso y pequeño.

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 tranquila 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 pero nadie ha sabido identificar la causa.
2. Separación real entre pesos adyacentes. La jerarquía del 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 es la mayor parte de un producto. Las fuentes con una x-height generosa y aperturas abiertas mantienen la legibilidad entre 12 y 13px; las fuentes elegantes con x-heights pequeñas se vuelven ilegibles y terminas compensándolo aumentando el tamaño, lo que acaba rompiendo 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 vuelven a aparecer 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, combinarlas no te cuesta nada y diferenciarlas te aporta poco. El lector no se queda mirando las celdas de tu tabla admirando la tipografía. Otros dos factores hacen mucho más trabajo:

• Un rol de display que sea genuinamente diferente. Una sans condensada, una serif real o una grotesk de forma distintiva utilizada solo para títulos de página y superficies de marketing. Aparece rara vez 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 esa estructura: una sans condensada sobre un cuerpo neutro; una serif de display sobre una sans geométrica; una sola familia utilizada 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 esas estructuras renderizadas en vivo, para que puedas comparar el *rol de display* directamente: el único lugar donde la tipografía de un producto difiere significativamente. Léelas al final de la escala de la leyenda, no al principio de los encabezados: todo parece distintivo a 48px.

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

Corrige 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 espera que sea 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 vagos. 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 en su lugar. Si decides añadir una, haz que sea una fuente de display que sea inequívocamente diferente.

4. 4

   Elegir la mono deliberadamente

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

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.