Combinaciones de fuentes por sector, y por qué la categoría es una trampa

Lee cuatro guías de "fuentes para X" en cuatro sectores distintos y la coincidencia será sorprendente. Una sans geométrica para cualquier cosa relacionada con la tecnología. Una serif transicional para cualquier cosa que quiera parecer establecida. Una serif display de alto contraste para cualquier cosa de lujo. Una sans redondeada para cualquier cosa amigable.

La convergencia ocurre porque el sector es una variable indirecta. Lo que el redactor quiere decir con "fintech" es *necesita proyectar confianza institucional*, y lo que quiere decir con "agencia creativa" es *necesita proyectar distinción sobre legibilidad*. Esos son los inputs reales. Una vez que los nombras directamente, la etiqueta del sector deja de aportar información, y deja de llevarte a las mismas tres fuentes que todos los competidores de tu categoría.

El tercer eje es el que los diseñadores pasan por alto y los ingenieros descubren. Una fuente que es hermosa en un encabezado de 48px puede ser inutilizable en una etiqueta de tabla de 12px, y la mayor parte del trabajo de interfaz ocurre en el extremo de los tamaños pequeños. Prueba a 12px antes de enamorarte a 48px.

Estos son valores predeterminados defendibles, con la justificación expuesta para que puedas discrepar, y una alternativa diferenciadora para cada uno, ya que el valor predeterminado es lo que tus competidores ya utilizan.

Cada sector a continuación presenta un espécimen vivo en lugar de una captura de pantalla: la fuente del encabezado, la fuente del cuerpo y la fuente mono renderizadas en cada etapa de una escala real, en el navegador en el que estás leyendo esto. Una combinación mostrada como imagen no te dice nada sobre cómo se comporta en tamaño de leyenda, y el tamaño de leyenda es donde las combinaciones fallan.

Para un análisis más profundo del caso SaaS específicamente, incluyendo una fuente mono para datos y cuántos pesos necesita realmente, consulte combinación de fuentes para SaaS.

Una combinación que es correcta en el papel pero incorrecta en el navegador sigue siendo incorrecta. Cuatro decisiones de implementación que cambian lo que el lector ve realmente.

La fila de fallback-metrics es la de mayor valor y la menos conocida. Un salto de diseño (layout shift) en cada primera visita es una señal de calidad real para los usuarios y para las métricas de experiencia de página, y se soluciona con unos pocos descriptores de CSS en lugar de cambiar la fuente.

/* A metric-matched fallback: same footprint, no reflow on load. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body { font-family: "Inter", "Inter Fallback", sans-serif; }

Los porcentajes exactos varían según la tipografía y conviene medirlos en lugar de copiarlos. Varios frameworks ahora los generan automáticamente cuando las fuentes se declaran a través de su API de fuentes, que es la forma más sencilla de hacerlo correctamente.

Antes de comprometerse con una combinación, cinco pruebas. Cada una detecta un fallo distinto y todas son más rápidas que descubrir el problema en la fase de build.

1. 1

   Escriba su titular real, no un marcador de posición

   El Lorem ipsum no tiene mayúsculas en lugares incómodos, ni números, ni palabras compuestas largas. El nombre real de su producto y su propuesta de valor tendrán las tres cosas.

2. 2

   Escriba Il1 O0 y un número largo

   I mayúscula, l minúscula, dígito 1; O mayúscula, dígito 0. Después, un número de pedido o importe monetario realista. Si algún par es ambiguo, la fuente no es apta para nada transaccional.

3. 3

   Renderice el cuerpo de texto a 14px y lea un párrafo completo

   No una línea. Un párrafo. Los problemas de fatiga y ritmo solo aparecen con la distancia, y el cuerpo de texto es donde los lectores pasan su tiempo.

4. 4

   Compruebe los pesos que realmente tiene

   Una combinación que dependa de un peso que la webfont no implemente lo sintetizará silenciosamente, y la negrita sintetizada es visiblemente peor. Confirme que cada peso de su escala existe como un corte real.

5. 5

   Compárela con dos competidores

   Esta es la comprobación de convenciones de la industria, usada correctamente: no para encontrar su fuente, sino para confirmar que no ha acabado usando la de ellos.

Elegir la combinación es la mitad del trabajo. La otra mitad es registrarla con la precisión suficiente para que se reproduzca, ya sea por un nuevo ingeniero o por un agente de código que escriba pantallas que usted nunca revisará línea por línea.

Hemos analizado 299 archivos DESIGN.md publicados para que los agentes de IA los lean. El 83% menciona la tipografía y el 44% no contiene ningún valor de tamaño concreto en ninguna parte. Indican una fuente y se detienen, lo que deja cada decisión de tamaño, peso y tracking al modelo; y el modelo lo resuelve de la misma forma en que lo hace su conjunto de datos de entrenamiento, que es la misma forma en que lo hace todo el mundo.

## Typography

Display: Playfair Display — headings 32px and above only.
UI and body: Inter (variable) — everything else.

Scale: 12 / 14 / 16 / 20 / 24 / 32 / 48.
Weights: 400 and 600 only. Never above 600.
Tracking: -0.02em at 32px+, 0 from 14-24px, +0.02em on 12px caps.

Never set Playfair below 32px.
Never use Playfair for UI labels, buttons or table content.
Numerals are always Inter, always tabular in tables.

Tenga en cuenta que la mitad de eso son prohibiciones. Una combinación registrada como dos nombres de fuentes permite cualquier uso indebido de ambas; las restricciones son lo que hace que la combinación funcione. Más información sobre la redacción de guías que un agente seguirá.