Interlineado en CSS

Seguro que alguna vez has tenido dificultades a la hora de leer un texto por el poco css 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.

¿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 vertical que separa una línea de texto de la 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 html necesitaremos emplear nuestra hoja de estilos o CSS, utilizando la propiedad line-height.

La propiedad line-height define el espacio entre líneas en CSS

Usaremos la propiedad line-height para definir la distancia del espacio entre líneas css en nuestros textos. Esta medida puede definirse mediante un valor numérico, 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 en html es excesivo y se pierde legibilidad.

Ejemplo de espacio 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 css 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 espacio entre lineas css.

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 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 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 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; /* line-height: 1.5 establece el interlineado a un 150% del tamaño de la fuente */
}

p{
font-size: 1em;
line-height: 1.5; /* Este valor sin unidad es el más común para establecer el interlineado */
}

p{
font-size: 1em;
line-height: 150%; /* Porcentaje del tamaño de la fuente para el interlineado */
}

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% del 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. El correcto uso del interlineado css y el espacio entre líneas es clave para una experiencia de usuario óptima.

¿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!