Tipografía

Escala, interlineado y jerarquía. Lo que exige WCAG sobre espaciado, la escala de Material como referencia y por qué el tamaño no lo eliges tú del todo.

Cómo leer esta guía

Citado (lo dice una fuente archivada), Verificado (cifra sacada del emisor) y Decisión Sensa (nuestra postura, discutible). Sin marca = trabajo pendiente.

El tamaño no lo eliges tú del todo

Lo primero que hay que interiorizar: el usuario puede cambiar el tamaño del texto y tú tienes que aguantarlo.

(Citado — Apple) El sistema tiene Dynamic Type y la recomendación es usar los estilos de texto del sistema, que ya se adaptan. Apple insiste en probar el diseño en todos los tamaños, incluidos los de accesibilidad.

(Verificado — WCAG 1.4.12) El criterio de espaciado de texto obliga a que no se pierda contenido ni funcionalidad cuando el usuario fuerza estos valores:

Lo importante y lo que casi todo el mundo entiende mal: (Citado) «Content is not required to use these text spacing values. The requirement is to ensure that when a user overrides the authored text spacing, content or functionality is not lost». No te obliga a usar 1.5 de interlineado. Te obliga a que si alguien lo fuerza, nada se rompa. Eso descarta alturas fijas en píxeles en cualquier caja que contenga texto.

Escala

Referencia verificada, la de Material 3 (rem, sobre base 16 px):

(Verificado en _md-sys-typescale.scss.) Fíjate en la proporción: el interlineado del cuerpo es exactamente 1.5 (24/16) y en los tamaños grandes baja hacia 1.12 (64/57). Es la regla general: a más tamaño, menos interlineado relativo.

Decisión Sensa. Nuestro cuerpo de texto es 16 px como mínimo en producto. Por debajo se lee mal y, en iOS, un input por debajo de 16 px hace que Safari haga zoom al enfocarlo (Citado — Rauno: «font size for inputs should not be smaller than 16px to prevent iOS zooming on focus»). La escala no se inventa por pantalla: se define una vez y se usa.

Jerarquía

(Citado — Apple) La recomendación es limitar el número de fuentes: mezclar demasiadas tipografías o estilos «can make your app or game look fragmented and sloppy». Apple recomienda apoyarse en peso, tamaño y color de la misma familia antes que en familias distintas.

Decisión Sensa. Una familia para producto (Gelion) y como mucho una segunda con una función clara — normalmente monoespaciada para código o datos. Tres tamaños de titular bastan casi siempre; si hacen falta seis, el problema es la estructura del contenido, no la escala.

Medida de línea

No hay cifra en ninguna de las fuentes archivadas. La regla habitual del oficio —45 a 75 caracteres por línea— es tradición tipográfica, y hasta que no archivemos una fuente no la damos como establecida aquí. Lo que sí se puede afirmar: una columna de texto que ocupa todo el ancho de un monitor de 27" se lee mal, y la manera de acotarlo es max-width en ch o rem, no en píxeles fijos.

Anti-patrones

• Altura fija en píxeles en cajas con texto: se rompe con 1.4.12 y con cualquier traducción larga.
• Texto en imágenes: no escala, no se traduce, no se selecciona.
• Inputs por debajo de 16 px en móvil.
• Tracking negativo agresivo en cuerpo de texto. En titulares grandes sí; en 16 px destroza la legibilidad.
• Mayúsculas para párrafos enteros.
• Jerarquía sólo por color: si quitas el color, tiene que seguir leyéndose la estructura.

Checklist de revisión

• ¿Aguanta interlineado 1.5, tracking 0.12em y espacio de párrafo 2em sin romperse?
• ¿Cuerpo a 16 px o más? ¿Los inputs también?
• ¿El interlineado baja en proporción según sube el tamaño?
• ¿Se ha probado con el tamaño de texto del sistema al máximo?
• ¿La jerarquía se sostiene sin color?
• ¿Hay max-width en las columnas de texto largo?

Lo que falta

• Una fuente archivada sobre medida de línea. Hasta entonces, sin cifra.
• Los valores concretos de la escala de Sensa: esto es criterio, no todavía sistema.
• Rendimiento de web fonts (subsetting, font-display, FOUT/FOIT) no está cubierto y debería.