Las mejores prácticas de UX para el espaciado de líneas

La gran tipografía es más que la fuente que más te gusta. Descubra cómo el interlineado puede hacer o deshacer su contenido.

En el mundo de la tipografía, espaciado de línea es el término utilizado para definir el espacio vertical entre dos líneas de texto. Específicamente, es la distancia exacta entre dos líneas de base adyacentes. Si bien puede que no aparezca en la parte superior de la lista de prioridades de todos los diseñadores de UX, en realidad es un aspecto realmente importante del diseño de la experiencia del usuario porque tiene un gran impacto en la legibilidad del texto en una aplicación o sitio web. Hazlo bien y nadie, aparte de los tipógrafos y diseñadores de UX, se dará cuenta. Si se equivoca, los usuarios se darán cuenta inmediatamente de que hay algún problema con su texto, incluso si no pueden identificarlo.

Liderando y la historia del interlineado.

La teoría del espaciado de líneas se remonta a los primeros días de la composición manual en impresoras. Su nombre técnico, líder, en realidad se refiere a tiras finas de metal de plomo que se utilizaron para separar las líneas de texto. Así que es 'llevar' a rimar con 'ropa de cama', en lugar de 'rebordear'.

Cuando las máquinas de escribir aparecieron más tarde, el espacio entre líneas pasó por un proceso de estandarización. Debido a que tenían una altura de línea fija (generalmente 12 puntos por línea), las máquinas de escribir no podían ofrecer opciones de espacio de línea mecánicamente. La única forma de aumentar el espacio entre líneas en una máquina de escribir era agregar un retorno de carro adicional después e insertar una línea completamente vacía, duplicando el espacio entre líneas. Y debido a que las líneas a doble espacio dejan más espacio para comentarios y notas, el espacio doble se percibe en contextos académicos, legales e industriales donde el texto puede ser bastante pesado. Entonces, gracias a las máquinas de escribir, el espacio doble vive hoy en la era de la computadora.

Algunas aplicaciones de diseño moderno como Photoshop todavía usan el término líder, mientras que en HTML y CSS, el atributo se denomina altura de línea. Líder, interlineado y alto de línea se refieren a lo mismo.

Cómo obtener el espacio entre líneas adecuado para UX

La importancia del espacio entre líneas para el diseño de UX proviene de la potencia que tiene para renderizar un bloque de texto más o menos legible.

El espacio entre líneas se mide comúnmente como un porcentaje del tamaño de fuente . La sabiduría convencional es que el espacio entre líneas de 130% -150% es ideal para la legibilidad . De hecho, cualquier cantidad desde aproximadamente el 120% hasta el 200% es aceptable, pero el 140% tiende a ser el punto dulce más cotizado. Debes experimentar para ver qué se ve mejor con tu texto.

Hay dos riesgos principales cuando se trata de interlineado: muy poco y demasiado. Lo más serio es tener muy poco espacio entre las líneas. Establecer el espacio entre líneas al 100% significa que las letras en las líneas adyacentes se pueden tocar , porque no hay espacio adicional entre las líneas. Esto hace que la lectura sea deficiente y la accesibilidad atroz. Debe evitarse a toda costa. Establecer un espaciado muy por debajo del 100% lo hará completamente ilegible.

Menos serio es tener demasiado espacio en la línea. Los problemas tienden a aparecer en torno al 250%, ya que a los ojos del lector les puede resultar más difícil pasar a la siguiente línea sin confundirse.

6 reglas de oro para el interlineado:

1-Trate de alrededor del 140% -180% para una legibilidad y accesibilidad óptimas . Cualquiera más pequeño y el texto será estrecho y difícil de leer. Ir mucho más grande y el ojo puede perderse. Limite la longitud de la línea a 70–80 caracteres . Las líneas de texto más largas pueden confundir el ojo, especialmente cuando se lee texto en una pantalla. Si debe usar líneas más largas, aumente el espacio entre líneas para ayudar a proteger la legibilidad.

2-El tamaño de la fuente debe ser mínimo 16pt . Esta regla de oro de larga data todavía se aplica. La mayor parte del tiempo. En aplicaciones para pantallas más grandes, como televisores , deberá ir a aproximadamente 32 puntos.

3-Las fuentes pequeñas necesitan más espacio . El espaciado de línea como% debería aumentar con los tamaños de fuente más pequeños. Esto se debe a que las fuentes más pequeñas ya son más difíciles de leer y necesitan más espacio a su alrededor para que el ojo las pueda seguir fácilmente.

4-Experimente con un espacio más estrecho en las comillas u otros textos cortos . Si la tipografía se trata principalmente de cómo presentamos el lenguaje en forma de texto para una lectura óptima, también se trata en parte del hermoso diseño vanguardista.

5-Si quieres jugar con menos espacio en la línea, apégate a las comillas y a las áreas de texto más cortas similares.

6-Verifique su interlineado cuando cambie la fuente o el tamaño de la fuente . Las diferentes fuentes tienen diferentes alturas máximas (x-alturas) incluso cuando tienen el mismo tamaño en puntos. Por lo tanto, debe asegurarse de que cuando cambie la fuente, verifique cómo se siente su interlineado en términos de legibilidad.

Cómo calcular el interlineado ideal para tu texto

Si está trabajando con CSS, siempre puede expresar la altura de la línea como un valor porcentual. En otras herramientas como Photoshop, es posible que deba realizar algunos cálculos aritméticos básicos para encontrar el espaciado de línea óptimo. Por ejemplo, si nuestra fuente es de 18 puntos, y nuestro objetivo es un espacio entre líneas del 150%, simplemente multiplique el tamaño de la fuente por 1.5 y tendrá el valor de espacio entre líneas correcto: 27 puntos.

Para obtener una forma más avanzada de calcular el espaciado de línea y el tamaño de fuente óptimos, consulte la calculadora de tipografía Golden Ratio . Es una herramienta súper útil y muy inteligente que puede ayudarlo a ajustar el tamaño de la fuente y el espacio entre líneas para el ancho del área de contenido.

Ejemplos de interlineado bueno y malo

Echa un vistazo a estos tres párrafos. ¿Cuál te parece más fácil de leer?

En el párrafo del 100%, puede ver que las letras en las líneas adyacentes se acercan peligrosamente al tocarse entre sí. La razón por la que esto es problemático es que a las personas con algún impedimento visual les resultará mucho más difícil de leer. Al 150%, parece que el espacio está bien equilibrado y que el texto es legible. Mientras tanto, el párrafo con un espaciado del 250% parece estar llevando las cosas demasiado lejos, el espaciado de las líneas es tan exagerado que la lectura del texto parece poco natural.

La recapitulación: corregir el espacio entre líneas no es difícil. ¡No hay excusa!

El espacio entre líneas es una parte importante de la tipografía y la facilidad de uso y legibilidad de su sitio o aplicación. Al aplicar estas simples reglas, puede reducir el cansancio del usuario, aumentar la claridad y mejorar la calificación de accesibilidad de su contenido. Así que ya sabes, no hay excusa!