La Web Universal

1.1 Estilo de la fuente

Por qué la regla de 2005 'use sans serif en pantalla' ya no se sostiene en las pantallas de alta resolución — y qué evaluar en su lugar: altura de la x, aberturas, distinción de letras y calidad de renderizado.

7 min read

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

La edición de 2005 de estas pautas daba aquí su instrucción más tajante: la pantalla es un entorno de lectura hostil, así que use tipografías sans serif. Las serifas, advertía, se convierten en ruido visual a tamaños de texto; los trazos finos y los matices no se renderizan. Para las pantallas de aquella era, el consejo era sólido. Para las de esta, necesita retirarse como regla y reemplazarse por el razonamiento que siempre estuvo debajo.

Qué cambió desde 2005

La recomendación original nunca trató realmente de las serifas. Trataba de los píxeles. En un panel de 96 DPI, una serifa de dos o tres píxeles físicos de largo o bien se ajustaba a la retícula como un bloque torpe o bien se disolvía en niebla de suavizado. Los trazos finos se rompían; las curvas de enlace se convertían en escalones. Las sans serif diseñadas para la pantalla — Verdana, Tahoma y sus pares, dibujadas con trazos robustos de grosor uniforme y un ajuste generoso — esquivaban todo eso. Recomendarlas era diseño defensivo frente a un motor de renderizado que no sabía dibujar una serifa.

Esa restricción se ha disuelto sustancialmente. Las pantallas de alta densidad renderizan de dos a tres píxeles de dispositivo por píxel CSS, suficiente para dibujar serifas finas, modulación del trazo y uniones sutiles con una fidelidad que se acerca a la del impreso. El suavizado moderno en escala de grises a esas densidades maneja con limpieza las curvas y las diagonales. En tales pantallas, una serifa de texto bien hecha y una sans bien hecha compuestas al mismo tamaño efectivo son ambas plenamente legibles, y la investigación general sobre lectura lo refleja: cuando se controlan la altura de la x, el tamaño y el espaciado, las diferencias medidas en velocidad de lectura y comprensión entre estilos con y sin serifas son pequeñas e inconsistentes. La variable serifa/sans, aislada de todo aquello con lo que solía viajar, explica muy poco.

Dos salvedades impiden que la vieja regla se invierta sin más. Primera, los monitores de densidad estándar siguen siendo comunes en los escritorios, y en ellos las serifas delicadas todavía se degradan — cualquier tipografía elegida para texto de cuerpo debe verificarse en renderizado 1x, donde la calidad del hinting y la robustez del trazo aún se ganan el pan. Segunda, y más importante para este proyecto, el caso de baja visión no es el caso medio.

Qué predice realmente la legibilidad

Si la clasificación por estilo queda descartada como criterio de cribado, lo que la reemplaza es una breve lista estructural — la misma introducida en el capítulo 1.0, aplicada aquí a la elección entre tipografías candidatas.

La altura de la x primero. Una tipografía con altura de la x grande se lee más grande y sobrevive mejor a los tamaños pequeños de lo que sugiere su tamaño nominal, con independencia de que lleve serifas. Muchas serifas de texto contemporáneas están dibujadas con alturas de la x tan generosas como cualquier sans de pantalla.

Las aberturas segundo. Las contraformas abiertas y las aberturas abiertas en a, c, e y s preservan la identidad de la letra bajo el desenfoque y la baja agudeza. Esto atraviesa la clasificación: hay serifas abiertas y legibles y sans serif cerradas y ambiguas. El género de las sans geométricas — muy de moda — es un infractor frecuente, con formas de letra casi circulares que convergen unas con otras.

La distinción de letras tercero. Aplique la prueba Il1: componga juntas la I mayúscula, la l minúscula y la cifra 1. Muchas sans serif populares la suspenden de plano, renderizando la I y la l como trazos idénticos — un peligro genuino en contraseñas, códigos y nombres. Las serifas, irónicamente, tienden a aprobarla automáticamente porque las serifas diferencian exactamente esas letras. Compruebe también el reflejo b/d y p/q, y el par r n, que puede fundirse en m cuando el espaciado es apretado.

La calidad de renderizado por último. Una tipografía de texto destinada a interfaces debe probarse donde va a vivir: a los tamaños objetivo, en pantallas de alta densidad y de densidad estándar, en modos claro y oscuro. Las fuentes varían en el cuidado con que se producen sus archivos — hinting para la rasterización de baja densidad, espaciado a tamaños pequeños — y esta dimensión de oficio importa más que la presencia o ausencia de serifas.

Las letras aegs compuestas en una serifa y una sans, aproximadamente iguales en legibilidad a tamaños de texto — los predictores reales son la altura de la x, las aberturas, las letras distintas y el espaciado.

El matiz de la baja visión

Para los lectores con baja visión, la cautela de 2005 conserva fuerza real, en forma suavizada. La baja agudeza actúa como un filtro de desenfoque, y bajo el desenfoque el detalle fino es la primera baja. Los diseños con serifa de alto contraste — los de filetes muy finos y serifas delicadas — pierden sus trazos finos y con ellos la estructura de la letra. Una tipografía robusta y de bajo contraste se degrada con más gracia, y la mayoría de las tipografías que responden a esa descripción son sans serif o diseños cercanos a las egipcias. Así que, aunque la regla categórica ha desaparecido, el centro de gravedad práctico para el texto de cuerpo en baja visión sigue siendo una tipografía robusta, abierta y de peso uniforme — que a menudo, aunque no necesariamente, será una sans.

La advertencia de 2005 contra las tipografías ornamentales y muy estilizadas para el texto continuo se mantiene sin revisión. Las tipografías decorativas sacrifican la estructura de la letra al estilo, y los lectores con menos margen visual pagan el precio más alto. El uso de exhibición a tamaños grandes es un contexto distinto y más indulgente.

Una nota moderna más: las afirmaciones de que determinados estilos son universalmente mejores para los lectores con dislexia deben tratarse con cautela. Las fuentes especializadas no han mostrado ventajas objetivas consistentes en estudios controlados; los rasgos que sí ayudan — distinción de letras, espaciado generoso, tamaño adecuado — están disponibles en muchas tipografías bien hechas de cualquier clasificación, y los ajustes controlables por el usuario ayudan más que cualquier elección de fuente aislada.

En CSS

/* Screen for structure, not classification */
body {
  /* Georgia: large x-height, open apertures, screen-hinted */
  font-family: Georgia, Charter, "Bitstream Charter", serif;
}
.ui {
  font-family: system-ui, sans-serif;  /* the platform's proven face */
}

Recomendaciones

  • Retire "solo sans serif" como regla; evalúe las tipografías candidatas estructuralmente.
  • Exija una altura de la x grande, aberturas abiertas y un contraste de trazo uniforme y moderado para el texto de cuerpo.
  • Aplique las pruebas Il1 y b/d/p/q; rechace las tipografías cuyas letras convergen.
  • Para contextos críticos de baja visión, evite los diseños de alto contraste con filetes finos; favorezca las construcciones robustas y de bajo contraste.
  • Verifique el renderizado a tamaños reales tanto en pantallas de densidad estándar como de alta densidad, en los modos claro y oscuro.
  • Siga excluyendo las tipografías ornamentales y muy estilizadas del texto continuo.

Lecturas complementarias