Seguro que alguna vez has tenido dificultades a la hora de leer un texto, por el poco interlineado que había dentro de cada párrafo. En el mundo del diseño web no nos podemos permitir que nuestros usuarios no puedan leer nuestro contenido, acompáñanos en el artículo de hoy y apréndelo todo sobre el interlineado en CSS. Copia el código CSS que necesitas para mejorar la legibilidad en los textos de tus webs.
Índice de Contenidos
¿Qué es el interlineado en un documento HTML?
El interlineado es el espacio de una línea a la siguiente en un mismo párrafo, es decir, la distancia a la que está una línea de otra. Esta es una característica muy necesaria en el mundo de la maquetación, tanto editorial como web. Y gracias a este recurso podemos facilitar la lectura a nuestros usuarios.
Para modificar el interlineado en un documento HTML necesitaremos emplear nuestra hoja de estilos o CSS, utilizando la propiedad line-height.
Propiedad line-height define el interlineado CSS
Usaremos la propiedad line-height para definir la distancia del interlineado en nuestros textos. Esta medida puede definirse mediante un valor, una longitud o un porcentaje. Para conseguir la legibilidad óptima en cada texto, lo mejor será editar el interlineado en función a la tipografía y el tamaño de texto que utilicemos.
Según las teorías de tipografía en diseño, lo ideal, es disminuir la distancia entre líneas a medida que el tamaño de los textos aumente. De lo contrario, al ser una propiedad que aumenta proporcionalmente en función al tamaño del texto, en títulos y subtítulos grandes, el interlineado es excesivo y se pierde legibilidad.
Ejemplo de separación entre líneas CSS
A continuación, te mostramos tres ejemplos de diferentes valores de line-height aplicados al mismo texto. Los tres textos tienen un tamaño de tipografía de 1 em y podemos ver cómo varía la altura del mismo párrafo aplicando un valor de line-height diferente en cada caso.
En el primer párrafo, el texto es ilegible, las líneas se superponen porque el valor del interlineado es menor que el tamaño de fuente. Hay que evitar este tipo de errores, ya que los usuarios no serían capaces de leer un texto con tan poco interlineado.
En el segundo ejemplo, el valor del tamaño de fuente y el del interlineado son el mismo. Aunque el texto se pueda leer, al ser bastante extenso y a un tamaño reducido, no se obtiene la legibilidad óptima. Se recomienda igualar el tamaño de la fuente al del interlineado en textos más grandes, como títulos en un tamaño de fuente mayor.
El último párrafo es un ejemplo de un interlineado que duplica el valor del tamaño de la fuente. En este caso es excesivo, el espacio entre líneas es tan grande que el usuario puede perderse entre una línea y la siguiente.
See the Pen Interlineado en CSS by HTML Masters (@htmlmasters) on CodePen.
Definiremos el atributo line-height tanto en el cuerpo de todo el texto, como en títulos o secciones específicas de nuestra web a las que necesitemos diferentes tamaños de texto. Para ello, además del tamaño de la letra, habrá que tener en cuenta la tipografía, el grosor y la altura de esta. Como en el siguiente ejemplo:
See the Pen Interlineado en CSS by HTML Masters (@htmlmasters) on CodePen.
Ejemplos de medidas de line-height en CSS
A continuación te mostramos las unidades de medida que podrás utilizar en la propiedad line-height para los textos, podrás indicar los valores tanto en puntos y píxeles, como en porcentajes:
See the Pen Interlineado en CSS by HTML Masters (@htmlmasters) on CodePen.
Además de todas las unidades de medida y el uso de porcentajes, la propiedad line-height permite indicar un número sin unidades que se interpreta como el múltiplo del tamaño de letra del elemento. Por tanto, estas tres reglas CSS son equivalentes:
p{
font-size: 1em;
line-height: 1.5em;
}
p{
font-size: 1em;
line-height: 1.5;
}
p{
font-size: 1em;
line-height: 150%;
}
Interlineado CSS en un párrafo
Al contrario que en los títulos y subtítulos, en el caso de los párrafos, se suele recomendar que la distancia entre líneas sea aproximadamente entre el 120 y el 150% mayor al tamaño del texto, para conseguir una distancia adecuada para diferenciar una línea de la siguiente y facilitar la lectura.
De la misma manera que hemos aplicado la propiedad line-height a los párrafos, podremos definir también un valor diferente a las listas (<li>), los encabezados (<h1>, <h2>, <h3>…) y a todo tipo de elementos de bloque.
Conclusión
Como has visto en el artículo de hoy, modificar el interlineado de un texto es muy sencillo con CSS. No tendrás ninguna dificultad para aplicarlo a partir de ahora y conseguir el resultado que deseas.
¿Quieres saber más sobre todas las propiedades CSS que puedes aplicar a tus textos web? No te pierdas nuestros artículos de blog y aprende a utilizar la propiedad letter-spacing, word-spacing, text-transform y mucho más, y consigue que tus webs ofrezcan la mejor experiencia de usuario.
¡Hasta el próximo artículo!
