Usa el Vista Previa de Legibilidad Tipográfica gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por Qué Algunos Textos Se Sienten Fáciles y Otros Cuestan Trabajo
La comodidad de lectura depende sobre todo de tres números: qué tan grandes son las letras, cuánto espacio hay entre líneas y qué tan larga es cada línea. Si aciertas, los lectores recorren tu página sin notar la tipografía en absoluto. Si fallas, los lectores se cansan, pierden su lugar y se van, aunque las palabras sean buenas. La herramienta de arriba te permite probar los tres valores con texto real y ver la medida detrás de la sensación.
La medida clave son los caracteres por línea. La investigación y la práctica apuntan a unos 45 a 75 caracteres por línea para el texto del cuerpo. Por debajo de 45, el ojo salta a una línea nueva con demasiada frecuencia y el ritmo se rompe. Por encima de 75, el ojo tiene dificultad para encontrar el inicio de la línea siguiente, y los lectores releen líneas o las saltan. La herramienta calcula este número en vivo mientras mueves los controles.
Tamaño de Letra: Más Grande Suele Ser Mejor
Para el texto del cuerpo en pantallas, 16 píxeles es el mínimo, no la meta. Muchos lectores, sobre todo en teléfonos y con vista cansada, leen con más comodidad a 18 o 19 píxeles. El texto más grande también ayuda en habitaciones luminosas y en pantallas pequeñas. Si tu diseño se siente apretado, sube el tamaño de letra antes de cambiar cualquier otra cosa, y luego revisa los caracteres por línea, porque las letras más grandes acortan cada línea.
Los títulos son otro trabajo. Necesitan destacar, pero un título demasiado grande fuerza saltos de línea en lugares raros y empuja el contenido hacia abajo. Una buena escala de títulos crece en pasos claros desde el tamaño del cuerpo, que es justo para lo que sirve una calculadora de escala modular. Mantén el tamaño del cuerpo estable en todo el sitio y deja que los títulos varíen.
Altura de Línea: Dale Aire a las Líneas
La altura de línea, también llamada interlineado, es el espacio entre líneas. Un valor de 1,5 significa que cada línea recibe una vez y media el tamaño de letra de espacio vertical. Para el texto del cuerpo, de 1,5 a 1,7 suele sentirse cómodo. Por debajo de 1,4, las líneas se amontonan y las letras descendentes se enredan con la línea de abajo. Por encima de 1,8, las líneas se separan y el párrafo deja de sentirse como un solo bloque.
La altura de línea interactúa con la longitud de línea. Las líneas largas necesitan un poco más de interlineado, porque el ojo viaja más lejos de vuelta a la línea siguiente. Las líneas cortas pueden admitir un interlineado algo más ajustado. Cuando cambias un ajuste en la herramienta, observa los demás: una combinación cómoda importa más que cualquier número perfecto aislado.
Longitud de Línea: La Decisión del Ancho de Columna
La longitud de línea la marca el ancho de la columna, y es el ajuste que los diseñadores equivocan con más frecuencia. El texto a todo el ancho en un monitor grande puede llegar a 150 caracteres por línea, lo cual agota. La solución es un ancho máximo en la columna de texto, normalmente de 560 a 700 píxeles para el texto del cuerpo, incluso en pantallas grandes. El espacio vacío a ambos lados no se desperdicia: es lo que hace que el texto sea legible.
En los teléfonos el problema se invierte. Las pantallas estrechas dan líneas cortas por naturaleza, así que una fuente de 16 píxeles puede sentirse entrecortada. Subir un poco el tamaño de letra en el móvil, o permitir que la columna use todo el ancho de la pantalla, devuelve una longitud de línea cómoda. Prueba tus ajustes con el ancho de un teléfono, no solo en escritorio.
Todo Junto
Un punto de partida fiable para artículos es texto de 18 píxeles, altura de línea de 1,6 y una columna de 600 píxeles, que cae cerca del centro del rango ideal de caracteres. Desde ahí, ajusta según tu público y tu fuente: las fuentes estrechas admiten una columna más ancha, las fuentes anchas necesitan una más estrecha. Usa la herramienta para encontrar tu combinación, copia el CSS y aplícalo de forma coherente. Los lectores no elogiarán tu altura de línea, y ese es el punto: la tipografía cómoda es invisible, y la tipografía invisible mantiene a los lectores en la página.
Herramientas relacionadas
- Readability Type Preview (English version)
- Calculadora de Escala Tipográfica Modular
- Probador de Espaciado entre Letras
Pingback: Texto Vintage Gratis - Estilo Retro para tus Diseños
Pingback: Readability Type Preview - Test Font Size and Line Height