Tipografía Web y Legibilidad: Guía Práctica de Diseño
La legibilidad de una página depende menos de la fuente que de la longitud y altura de línea. Guía práctica, con la ñ y los acentos incluidos.
Equipo de rabbitclipPublicación: 6 min. de lectura
En breve
La legibilidad de una página no depende solo de la fuente elegida; la longitud de línea y la altura de línea importan al menos tanto como la fuente, y también la escala de tamaños. El estándar WCAG recomienda una altura de línea de al menos 1,5 veces el tamaño de fuente dentro de un párrafo, y espera que ese ajuste pueda adaptarse a la preferencia propia de cada usuario (W3C WCAG 2.1, Text Spacing).
En un sitio en español, caracteres como la ñ y las vocales acentuadas (á, é, í, ó, ú) merecen su propia comprobación; no todas las fuentes los dibujan con la misma calidad, y en algunas la virgulilla sobre la ñ resulta demasiado pequeña o pegada a la letra. Es el tipo de detalle que pasa desapercibido en la fase de diseño pero afecta directamente a la legibilidad.
A continuación, cuatro temas: elección de fuente, escala de tamaños, longitud de línea y comprobación de caracteres especiales.
Qué mirar al elegir una fuente
Una fuente de texto corrido necesita un ancho medio y formas de letra limpias para que los párrafos largos no cansen la vista; una fuente de titulares puede llevar más el carácter de la marca, porque un texto corto conlleva menos riesgo de legibilidad. Las dos no tienen que venir de la misma familia; dos fuentes bien combinadas suelen funcionar mejor que forzar una sola a cumplir ambos papeles.
Si en el sitio de un despacho de abogados se usa una fuente fina y decorativa en el texto corrido, pasajes largos como las cláusulas de un contrato se vuelven difíciles de leer; la fuente decorativa puede quedarse en los titulares mientras el texto corrido cambia a algo más sobrio.
Escala: cuántos tamaños bastan
Una escala clara con tres o cuatro niveles (título, subtítulo, texto corrido, nota pequeña) funciona mejor que cinco o seis tamaños apenas distintos; aporta tanto coherencia como una regla clara para el desarrollador. Cada nivel de la escala debe ser notablemente más grande o más pequeño que el anterior; tamaños demasiado cercanos, como 16px y 17px, no se perciben visualmente, solo añaden confusión.
Por qué importa la longitud de línea
Con demasiados caracteres por línea, al ojo le cuesta encontrar el inicio de la siguiente; con muy pocos, el ojo salta de línea constantemente y el ritmo de lectura se rompe. Un rango que funciona bien va de sesenta a ochenta caracteres por línea, lo que significa que el texto debería quedar en una columna limitada en una pantalla ancha, no estirarse a todo lo ancho.
Si la página de documentación técnica de un fabricante de pavimentos deja que el texto se estire por toda la pantalla, las líneas pueden superar los doscientos caracteres en un monitor ancho; la solución es fijar el contenido a un ancho de columna definido y dejar el resto del espacio en blanco o con una imagen.
Cómo comprobar la ñ y los caracteres acentuados
Antes de elegir una fuente, todos los caracteres especiales usados en titulares y texto corrido deben probarse con contenido real, no solo con texto de relleno en inglés. En algunas fuentes la virgulilla sobre la ñ sale demasiado pequeña, en otras el acento sobre una á o una í queda mal alineado; estos detalles solo se notan cuando el texto se amplía en pantalla.
- Titulares y texto corrido previsualizados con contenido real en español
- Caracteres especiales (ñ, á, é, í, ó, ú) comprobados en varios tamaños
- Peso negrita (bold) comprobado en esos mismos caracteres
- Legibilidad en tamaño móvil pequeño probada por separado
Respetar la preferencia propia del visitante
Algunos visitantes aumentan el tamaño del texto desde los ajustes del navegador; un sitio construido con valores en píxeles fijos bloquea esa preferencia. Definir los tamaños en unidades flexibles, como rem, permite que el ajuste propio de un visitante siga funcionando en el sitio; es un paso pequeño pero práctico para la accesibilidad y para visitantes con visión reducida.
Cómo ayudan las fuentes variables a la velocidad
En una configuración tradicional, cada grosor de fuente (fina, normal, negrita) es un archivo aparte; una fuente variable (variable font) lleva todos los grosores dentro de un único archivo, y el navegador genera el grosor que necesita a partir de ese único archivo. Eso significa una sola descarga en lugar de cinco o seis.
Para una marca que usa tres o cuatro grosores distintos, una configuración de fuente variable reduce el tamaño total del archivo y da al diseñador libertad para usar un grosor intermedio, entre normal y negrita por ejemplo; la mayoría de los navegadores actuales lo soportan, pero conviene dejar una alternativa si aún importa la compatibilidad con navegadores antiguos.
Cifras tabulares para números que se comparan en columna
Si los números de una tabla de precios o una ficha técnica no se alinean columna por columna, al ojo le cuesta compararlos. Esto suele deberse a que una fuente usa por defecto cifras proporcionales, donde cada dígito ocupa un ancho distinto; activar las cifras tabulares hace que cada dígito tenga el mismo ancho, y las columnas se alinean correctamente.
En la tabla técnica de un fabricante de generadores, valores de potencia sin alinear se vuelven notablemente más legibles en cuanto se activa este ajuste; en la mayoría de las fuentes modernas basta una sola línea de CSS.
Este ajuste no se limita a las tablas; la misma diferencia se nota en cualquier lugar donde se comparan números uno junto a otro, una lista de precios, una fecha o una hora.
La legibilidad viene de la suma de la escala, la longitud de línea y una prueba real de caracteres, no de una sola decisión de fuente. rabbitclip prueba estos cuatro puntos con contenido real en cada sistema de diseño; la tipografía de su sitio actual puede revisarse con nosotros.
Preguntas frecuentes
¿Cuántas fuentes debería usar un sitio?
Normalmente dos: una para titulares, otra para texto corrido; más que eso empieza a perjudicar la coherencia.
¿Por qué se limita la longitud de línea a entre sesenta y ochenta caracteres?
Ese rango permite al ojo encontrar fácilmente el inicio de la siguiente línea; líneas más largas rompen el ritmo de lectura.
¿Toda fuente maneja bien la ñ y los acentos?
No, algunas fuentes dibujan mal la ñ, la á, la é o la í; esto debe comprobarse con contenido real antes de elegir una fuente.
¿En qué debería definirse el tamaño de fuente en lugar de píxeles?
En una unidad flexible como rem; así el aumento del navegador de un visitante sigue funcionando en el sitio.
¿Todo proyecto debería usar una fuente variable?
No, si el diseño solo usa un grosor no hace falta; se nota en proyectos que usan varios grosores.
