La Web Universal

1.0 La letra

Los factores de diseño que gobiernan la legibilidad de las formas de las letras en pantalla — estilo, peso, inclinación, anchura y espaciado — actualizados para el renderizado de alta densidad, la investigación sobre aberturas y los ejes de las fuentes variables.

7 min read

Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.

La legibilidad comienza en la letra. Antes de que un lector pueda reconocer una palabra, el sistema visual debe resolver formas de letra individuales — y cada factor que hace una letra más fácil o más difícil de resolver se acumula a lo largo de miles de fijaciones en una sesión de lectura. Las pautas originales identificaron como factores decisivos el estilo tipográfico, el peso, la inclinación, la anchura y el espaciado. Esa lista sobrevive intacta. Lo que ha cambiado es el entorno en el que esas letras se dibujan, y el control que los diseñadores tienen ahora sobre cada factor.

Qué cambió desde 2005

La edición de 2005 se escribió para pantallas donde una letra minúscula a tamaño de lectura ocupaba quizá nueve o diez píxeles de altura. A esa resolución, la retícula de píxeles era la restricción dominante: los trazos se ajustaban a píxeles enteros, los detalles finos desaparecían o se convertían en ruido, y la tecnología de renderizado — el suavizado subpíxel como ClearType en Windows, el suavizado en escala de grises en otros sistemas — determinaba tanto la apariencia de una letra como su diseñador. El hinting, la práctica de incrustar en las fuentes instrucciones de ajuste a la retícula, era la diferencia entre una tipografía de texto utilizable y una inutilizable.

Las pantallas de alta densidad cambiaron la aritmética. A dos o tres píxeles de dispositivo por píxel CSS, la misma letra se dibuja con un presupuesto de píxeles de cuatro a nueve veces mayor. El suavizado en escala de grises a alto DPI renderiza con fidelidad las curvas, los trazos finos y las diagonales verdaderas; la industria se ha alejado en gran medida del renderizado subpíxel porque la densidad lo hizo innecesario. El hinting agresivo importa mucho menos que antes — aunque todavía importa en los monitores de portátil y de escritorio de densidad estándar que siguen siendo comunes, y por eso las recomendaciones a nivel de letra no pueden asumir aún alto DPI en todas partes.

El segundo cambio estructural son las fuentes variables. El peso (wght), la anchura (wdth), el tamaño óptico (opsz) y en algunas familias el grado (GRAD) son ahora ejes continuos direccionables desde CSS. Las pautas originales trataban el peso y la anchura de una tipografía como propiedades fijas que se seleccionaban; ahora son parámetros que se afinan — incluso en respuesta al tamaño, al color de fondo y a la preferencia del usuario.

La anatomía que importa

La investigación sobre el reconocimiento de letras se ha afinado desde 2005, y apunta consistentemente a un pequeño conjunto de rasgos estructurales.

La altura de la x sigue siendo el predictor más fiable del tamaño aparente y de la legibilidad en tamaños pequeños. Dos tipografías al mismo tamaño nominal pueden diferir drásticamente en cuán grandes se leen; la de mayor altura de la x se lee más grande. Por eso existe font-size-adjust en CSS — normaliza las fuentes de reserva a una proporción de altura de la x objetivo, de modo que un intercambio entre tipografías no encoja el texto silenciosamente.

Las aberturas — las aperturas de letras como c, e, a y s — gobiernan cuán fácilmente se distinguen las letras de sus vecinas cerradas. Las tipografías con aberturas abiertas mantienen la c distinta de la o y la e distinta de la a bajo el desenfoque de la baja visión o en tamaños de renderizado pequeños; las tipografías con aberturas cerradas, plegadas hacia dentro, pierden esas distinciones primero. El diseño de tipos orientado a la legibilidad de las últimas dos décadas se ha movido decididamente hacia las aberturas abiertas, y la investigación en baja visión respalda ese movimiento.

La distinción entre letras es el tercer pilar. Los pares confundibles — b/d, p/q y, sobre todo, la I mayúscula, la l minúscula y la cifra 1 — son donde el reconocimiento falla primero. La edición original señalaba Read Regular, de Natascha Frensch, como una tipografía diseñada para diferenciar las letras en espejo para lectores disléxicos; esa dirección de diseño se ha vuelto desde entonces corriente, y la rápida prueba "Il1" (componer los tres caracteres uno junto a otro y comprobar que difieren) es hoy un paso de cribado estándar para cualquier tipografía de interfaz o de lectura.

Grupos de caracteres confundibles — la I mayúscula, la l minúscula y el dígito 1; rn frente a m; O frente a cero — ambiguos en una sans grotesca, diferenciados en una serifa.

El comportamiento del trazo completa la lista. Un ancho de trazo relativamente uniforme, un contraste moderado entre gruesos y finos y una anchura general moderada sobreviven todos desde 2005 — la modulación extrema y la compresión extrema destruyen por igual las formas de las letras bajo desenfoque, que es un modelo razonable tanto de la baja visión como de las condiciones de visualización de baja calidad.

Peso, inclinación y anchura como elecciones continuas

La pauta original — peso regular a ligeramente negrita, vertical antes que inclinado, anchura moderada — se mantiene. La revisión está en cómo se toman esas decisiones.

Con un eje de peso variable, "ligeramente negrita" ya no es un salto de 400 a 700; puede ser 450 o 480, lo suficiente para engrosar los trazos para un fondo oscuro o un tamaño pequeño sin cerrar las contraformas. Los ejes de tamaño óptico, donde existen, hacen automáticamente aquello para lo que los diseñadores de tipos antaño tallaban cuerpos separados: en tamaños pequeños el diseño abre las aberturas, afloja el espaciado y reduce el contraste; en tamaños grandes se aprieta. Donde una tipografía ofrezca opsz, déjelo actuar — los navegadores lo hacen por defecto — porque codifica precisamente los ajustes para tamaños pequeños que este capítulo recomienda.

La inclinación sigue siendo un coste de legibilidad para el texto corrido. Las itálicas son para el énfasis, no para pasajes; las formas oblicuas (redonda inclinada) son peores que las itálicas verdaderas porque distorsionan las formas de las letras sin rediseñarlas.

El espaciado a nivel de letra

El hallazgo de 2005 de que la tipografía de pantalla necesita un interletraje y un espaciado entre líneas más generosos que la impresa era, en parte, un artefacto de la resolución — el espaciado holgado evitaba que las toscas letras de píxeles se fundieran. Pero no era solo eso. La investigación sobre el apiñamiento perceptivo muestra que las letras demasiado juntas deterioran el reconocimiento en la visión periférica y de baja agudeza, de modo que los lectores con baja visión se benefician genuinamente de composiciones ligeramente holgadas en tamaños pequeños. Las WCAG 2.2 lo reconocen desde el lado del usuario: el criterio de éxito 1.4.12 (Espaciado del texto) exige que el contenido sobreviva a los aumentos de espaciado entre letras, palabras y líneas aplicados por el usuario sin pérdidas. El interletraje apretado como firma estilística está bien para los tamaños de display; en tamaños de texto es un impuesto sobre los lectores con menos agudeza que perder.

En CSS

/* Preserve letterform quality across fallbacks */
body {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size-adjust: 0.5;   /* match fallback x-height to the web font */
  font-kerning: normal;
}

Recomendaciones

  • Cribe las tipografías por estructura, no por clasificación: altura de la x grande, aberturas abiertas, ancho de trazo uniforme, anchura moderada.
  • Aplique la prueba Il1 y compruebe la distinción b/d/p/q antes de comprometerse con una tipografía de texto.
  • Use los ejes de las fuentes variables con deliberación — pequeños incrementos de peso según el contexto, y deje que el tamaño óptico (opsz) haga su trabajo en tamaños pequeños.
  • Mantenga el texto corrido en redonda; reserve la inclinación para el énfasis.
  • Componga el interletraje de neutro a ligeramente holgado en tamaños de texto, y verifique que las maquetaciones sobreviven a los ajustes de espaciado del usuario de WCAG 1.4.12.
  • Pruebe en una pantalla de densidad estándar, no solo en una de alto DPI; la retícula de píxeles todavía existe para muchos lectores.

Lecturas complementarias