La Web Universal

1.6 Tipografías seleccionadas

Elija las tipografías por criterios de legibilidad medibles — altura de la x, aberturas, distinción de caracteres, espaciado — en lugar de por nombre, y trate las afirmaciones publicitarias de 'fuente accesible' con escepticismo informado.

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 este capítulo hizo lo que hacía toda guía de su época: dar nombres. Verdana, Georgia y su cohorte — las fuentes web básicas de Microsoft encargadas para la pantalla — eran las recomendaciones defendibles cuando los diseñadores solo podían confiar en las fuentes preinstaladas en las máquinas de los usuarios. Veinte años después, la restricción ha desaparecido. Las fuentes web cargan con fiabilidad, las fuentes variables son corrientes, y el catálogo de tipografías disponibles ha crecido de una docena a decenas de miles. Nombrar una lista corta ya no es útil. Enseñar los criterios, sí.

Ese giro es además más honesto. La vieja lista corta era buena no porque aquellas fuentes fueran mágicas, sino porque encarnaban propiedades específicas y comprobables: alturas de la x generosas, aberturas abiertas, ajuste holgado y formas de letra dibujadas para sobrevivir a un renderizado tosco. Esas propiedades — en gran medida los criterios de la era Boyarski que citaba el capítulo original — siguen siendo la prueba correcta, y pueden aplicarse a cualquier tipografía candidata en cuestión de minutos.

Qué cambió desde 2005

Tres cosas. Primera, el problema de la distribución se disolvió: @font-face y la compresión WOFF2 hicieron rutinario servir una tipografía elegida, de modo que "fuentes de pantalla predeterminadas" y "fuentes incrustadas" ya no son categorías significativamente distintas, y la ansiedad por las licencias que señalaba el capítulo original ha sido absorbida en gran parte por las normas de licenciamiento web y la tipografía de código abierto.

Segunda, surgió un género de "tipografías accesibles" construidas a propósito. Algunas son esfuerzos serios: Atkinson Hyperlegible, encargada por el Braille Institute, exagera las distinciones entre caracteres comúnmente confundidos para lectores con baja visión. Lexend se diseñó en torno a la hipótesis de que un espaciado más ancho y proporciones específicas mejoran la fluidez lectora. APHont fue desarrollada por la American Printing House for the Blind para uso impreso y en pantalla con baja visión. Luciole se diseñó en Francia específicamente para lectores con discapacidad visual. Son proyectos reales de gente que estudió el problema.

Tercera — y esta es la salvedad necesaria — la base de evidencia no ha seguido el ritmo del marketing. Los estudios independientes de velocidad de lectura y comprensión encuentran, en general, que las diferencias individuales entre lectores eclipsan las diferencias entre tipografías razonables, y que la familiaridad es en sí misma un factor de legibilidad. Las muy publicitadas afirmaciones en torno a las fuentes específicas para dislexia, en particular, han fracasado repetidamente en replicarse en estudios controlados: los lectores con dislexia en dichos estudios generalmente no leen más rápido con fuentes especializadas para dislexia que con tipografía ordinaria bien espaciada, y a menudo prefieren las tipografías familiares. "Diseñada para la accesibilidad" es una intención de diseño, no una garantía de resultado. Elija por propiedades visibles y comprobables, no por la etiqueta.

Los criterios que importan

La lista de la Versión 1 resiste notablemente bien; aquí está, actualizada y convertida en algo comprobable.

  • Distinción de caracteres. Escriba la cadena Il1, luego 0O, luego rn junto a m, luego cl junto a d. La I mayúscula, la l minúscula y el dígito 1 deben distinguirse de un vistazo — mediante serifas, una l con cola o un 1 de remate plano. Es el descalificador más rápido que existe, y muchas sans serif geométricas populares lo suspenden.
  • Aberturas abiertas. Las aberturas de a, c, e y s deben ser anchas. Las aberturas cerradas hacen que la e colapse hacia la o bajo desenfoque, tamaño pequeño o baja visión.
  • Altura de la x generosa, dentro de lo razonable. Una altura de la x grande agranda la parte de la letra que porta la mayor identidad. Los extremos se vuelven en contra: cuando la altura de la x apiña las ascendentes, la h y la n empiezan a converger, y la d y la a pierden separación.
  • Ajuste cómodo. Un espaciado ligeramente holgado en tamaños de texto vence a un espaciado apretado a la moda. Verifique además que la tipografía tolera los aumentos de interletraje aplicados por el usuario (WCAG 1.4.12) sin desarmarse.
  • Contraste de trazo moderado y uniones robustas. Las modernas de alto contraste pierden sus trazos finos en tamaños pequeños y resoluciones bajas. Los pesos medios, casi monótonos, se renderizan de forma fiable.
  • a de dos pisos, g distinguible, formas inequívocas. Las formas de las letras deben diferir por construcción, no solo por matiz. Los pares en espejo (b/d, p/q) se benefician de detalles asimétricos.
  • Una itálica de verdad y una negrita utilizable. Según los capítulos 1.3 y 1.4, necesitará estilos de énfasis honestos; una familia sin ellos obliga a sintetizarlos.
Serifa frente a sans serif, por cierto, sigue en tablas. El consenso de la investigación es que ninguna de las dos categorías posee una ventaja general de legibilidad en las pantallas modernas; las propiedades anteriores atraviesan esa división. Georgia pasa la mayoría de estas pruebas; también lo hace una sans humanista bien hecha.

Las pilas de sistema y el dividendo de la familiaridad

La pila de fuentes de sistema moderna — San Francisco en las plataformas de Apple, Segoe UI en Windows, Roboto en Android, renderizada mediante font-family: system-ui — merece un elogio específico. Estas tipografías fueron diseñadas para el renderizado de sus plataformas, incluyen rangos completos de pesos e itálicas verdaderas, no cuestan nada cargar (una ganancia de rendimiento que es en sí misma una ganancia de accesibilidad en conexiones lentas) y son las tipografías que los lectores ven todo el día. La familiaridad es capital de legibilidad medible. Una pila de sistema nunca es la elección emocionante, pero para interfaces de aplicación y texto utilitario es casi irreprochable.

Para la voz editorial, la posición honesta es que muchas tipografías de texto ordinarias y bien hechas — tanto sans serif humanistas como serifas de texto robustas — satisfacen todos los criterios anteriores. Las tipografías centradas en la accesibilidad nombradas antes también son candidatas razonables, en particular Atkinson Hyperlegible donde los lectores con baja visión sean una audiencia primaria. Lo que importa es que la elección se pruebe contra los criterios y contra sus objetivos reales de renderizado, en sus tamaños reales.

Handgloves 123 compuesto en Georgia, Verdana y Tahoma — las tipografías de sistema cuestan cero bytes, no causan intercambio de fuentes y resultan familiares a todo lector.

En CSS

/* Criteria first, then names: distinct Il1/0O, open apertures */
body {
  font-family: "Atkinson Hyperlegible", Seravek, Verdana,
    system-ui, sans-serif;
  font-size-adjust: 0.53;   /* keep fallback x-heights consistent */
}

Recomendaciones

  • Elija por criterios, no por nombre ni por la marca de "accesible": pruebe usted mismo Il1, 0O, rn/m, la apertura de las aberturas y el ajuste.
  • Trate las fuentes especializadas en accesibilidad como candidatas que deben pasar las mismas pruebas — varias (Atkinson Hyperlegible, Lexend, APHont, Luciole) son creíbles; ninguna es una bala de plata.
  • Sea escéptico ante las afirmaciones de las fuentes para dislexia; los estudios controlados no han respaldado beneficios en velocidad de lectura, y la tipografía ordinaria bien espaciada rinde de forma comparable.
  • Serifa frente a sans serif no es la cuestión; la calidad de la construcción lo es.
  • Use las pilas de fuentes de sistema con confianza para interfaces y texto utilitario — la familiaridad y la calidad de renderizado son ventajas reales.
  • Exija una itálica verdadera y al menos una negrita sólida en cualquier familia que adopte.
  • Verifique que su elección sobrevive a los ajustes de espaciado de texto de las WCAG, al zoom del 200% y a su tamaño de producción más pequeño antes de comprometerse.
  • Vuelva a probar cuando cambie la tipografía, el entorno de renderizado o la audiencia — los criterios son estables, pero la lista de aprobados no lo es.

Lecturas complementarias