Tipografía

WCAG sugiere líneas de no más de 80 caracteres y un interlineado de al menos 1.5 dentro de los párrafos. Dos propiedades de CSS se encargan de ambas cosas.

Elegir fuentes

font-family acepta una lista de fuentes separadas por comas. El navegador usa la primera que esté disponible en el dispositivo del lector y baja por la lista si falta. Termina siempre la lista con una familia genérica, serif, sans-serif, monospace o system-ui, para que aparezca algo razonable sin importar lo que esté instalado. Los nombres de fuentes que tienen espacios van entre comillas, como en "Noto Sans KR". system-ui usa la fuente de la interfaz del sistema operativo, que está bien diseñada, ya está en el dispositivo y abarca muchos sistemas de escritura.

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;          /* 16px unless the reader changed it */
  line-height: 1.6;         /* unitless: 1.6 times the font size */
  color: #222;
}
h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; }
p  { max-width: 65ch; }     /* keeps lines a readable length */
.label { text-transform: uppercase; letter-spacing: 0.08em; }

También puedes cargar un archivo de fuente desde tu propio servidor con una regla @font-face, o desde un servicio de fuentes. Las fuentes web le dan a una página carácter propio, pero cada una es una descarga que retrasa el texto, y las fuentes coreanas, chinas y japonesas pueden pesar varios megabytes porque contienen miles de glifos. Carga solo los grosores que necesites y deja una buena alternativa en la lista.

Tamaño, grosor e interlineado

font-size fija el tamaño; como explicó la unidad de color y unidades, rem mantiene el texto en sintonía con la configuración del lector. font-weight va de 100 (fina) a 900 (negra), con 400 como normal y 700 como negrita; las palabras clave normal y bold equivalen a 400 y 700. Una fuente solo tiene los grosores que hizo su diseñador, así que pedir 300 en una fuente que solo tiene 400 y 700 te da el más cercano.

line-height fija la distancia entre líneas. Dale un número simple, sin unidad, como 1.6: así significa 1.6 veces el tamaño de letra de cada elemento, y tanto los encabezados como la letra pequeña reciben el espacio que les corresponde. Un valor con unidad, como 24px, se calcula una sola vez y se hereda como una longitud fija, demasiado apretada para los encabezados grandes. El texto normal suele leerse bien entre 1.4 y 1.7; el criterio de conformidad 1.4.8 de WCAG sugiere al menos 1.5 dentro de los párrafos. Los encabezados grandes se ven mejor más apretados, entre 1.1 y 1.3 aproximadamente.

Largo de línea y alineación

Las líneas muy largas cansan: la vista pierde su lugar al saltar al principio de la línea siguiente. WCAG 1.4.8 sugiere no más de 80 caracteres por línea (40 para chino, japonés y coreano). La forma fácil de lograrlo es poner max-width en unidades ch en los párrafos, por ejemplo max-width: 65ch. text-align fija la alineación: left (o start) es lo más fácil de leer para textos largos en idiomas que se escriben de izquierda a derecha, center va bien en encabezados cortos y justify puede abrir huecos desiguales entre las palabras.

Pequeños toques finales

text-transform: uppercase muestra el texto en mayúsculas sin cambiar el HTML, así el código conserva su escritura normal y el estilo se puede cambiar después en un solo lugar. MDN señala que los tramos largos en mayúsculas son más difíciles de leer para algunas personas, entre ellas las personas con dislexia, así que resérvalo para etiquetas cortas y agrega un poco de letter-spacing, como 0.08em. text-decoration dibuja líneas: underline, line-through, o none para quitar el subrayado de un enlace (conserva alguna otra señal de que es un enlace). Los lectores que necesitan más espacio pueden sobrescribir tu espaciado; WCAG 1.4.12 pide que las páginas sigan funcionando con un interlineado de 1.5, un espaciado entre letras de 0.12em, entre palabras de 0.16em y entre párrafos de 2em, así que evita cajas de altura fija que cortarían el texto.