Qué es el interlineado CSS y cómo ajustarlo fácilmente paso a paso

Cuando empezamos a diseñar una página web, solemos pensar en colores, tipografías o imágenes… pero hay un detalle que marca la diferencia entre un texto cómodo de leer y otro que hace que el usuario cierre la pestaña en segundos: el interlineado en CSS.

Y sí, puede parecer una tontería (¿a quién le importa el espacio entre líneas?) pero cuando ves un bloque de texto demasiado junto, sin aire, agobia. En cambio, cuando el espacio está bien ajustado, todo se siente más elegante, más limpio. Más profesional. Y lo mejor es que controlarlo en CSS es súper fácil.

En este artículo vamos a explicarte paso a paso:

• Qué es el interlineado CSS
• Cómo ajustarlo con line-height
• Unidades recomendadas (em, rem, %, número…)
• Errores comunes
• Ejemplos de código listos para copiar y pegar

Si estás empezando en diseño web o desarrollo front-end, este contenido te ahorrará horas de pruebas.

¿Qué significa el interlineado en CSS y por qué es importante para el diseño web?

El interlineado es el espacio vertical entre líneas de texto dentro de un mismo párrafo. En CSS lo controlamos con la propiedad line-height.

¿Por qué es tan importante?

Porque afecta directamente a:

• La legibilidad
• La comodidad visual
• La experiencia del usuario
• El tiempo que el lector permanece en tu web

Un mal interlineado hace que el texto parezca comprimido; uno demasiado amplio rompe el ritmo de lectura. La clave está en encontrar un término medio que funcione con la tipografía utilizada.

De hecho, estudios de usabilidad demuestran que un interlineado correcto aumenta el tiempo de permanencia en una página. Y no nos engañemos: a Google eso le encanta.

Propiedad line-height: la clave para controlar el espacio entre líneas

La propiedad line-height es nuestra herramienta principal para modificar el interlineado en CSS.

Con esta regla definimos la altura de cada línea de texto dentro de un elemento (párrafo, título, lista…).

Ejemplo básico:

p {
 line-height: 1.6;
}

Este simple ajuste puede transformar un bloque de texto difícil de leer en algo ordenado, limpio y agradable.

Cómo funciona line-height y sus unidades (números, porcentajes, em, rem…)

La propiedad line-height admite diferentes formatos. Elegir el adecuado influye en la flexibilidad de tu diseño.

Valores recomendados y cómo funcionan:

Tipo de unidad	Ejemplo	Cuándo usarla
Número (unitless)	line-height: 1.5;	Recomendado. Se adapta al tamaño de fuente.
Porcentaje	line-height: 150%;	Útil para textos muy específicos.
px / em / rem	line-height: 24px;line-height: 1.5em;	Más control, pero puede romper consistencia en responsive.

Consejo: Siempre que puedas usa valores sin unidad (unitless). Esto hace que el interlineado se adapte automáticamente cuando cambia el tamaño de fuente.

Ejemplo:

p {
 font-size: 16px;
 line-height: 1.5;
}

Si cambias el tamaño de letra, el interlineado seguirá siendo proporcional sin que tengas que recalcular nada.

Ejemplos prácticos de uso de line-height en párrafos y títulos

Vamos con ejemplos claros.

Interlineado para párrafos:

p {
 font-size: 16px;
 line-height: 1.7;
}

Esto suele ser la base para una web legible.

Interlineado para títulos:

h1, h2, h3 {
 line-height: 1.2;
}

Los títulos suelen necesitar menos interlineado porque suelen ser más grandes y se leen como bloques independientes.

Buenas prácticas para conseguir una legibilidad óptima con el interlineado

Podemos resumirlo así:

• Interlineado amplio = lectura fluida
• Interlineado estrecho = sensación de bloque

Una regla orientativa:

• Párrafos largos → line-height entre 1.5 y 1.8
• Titulares → entre 1.1 y 1.3

Pero no te quedes solo con el número. Piensa también en el contexto:

• ¿La tipografía es muy fina?
• ¿El usuario la leerá desde móvil?
• ¿El fondo tiene poco contraste?

Errores comunes al definir el espacio entre líneas en CSS

Aquí te dejamos los errores que vemos más a menudo:

• Usar px en el interlineado
• No respetar la jerarquía visual
• Poner el interlineado demasiado junto para “ahorrar espacio”

Si utilizas px, corres el riesgo de que el interlineado no escale en diseño responsive. Además, si comprimes el texto demasiado, el usuario tendrá que esforzarse más para leer, y nadie quiere eso.

Consejos para elegir el interlineado ideal según la tipografía y el tamaño del texto

Si tu fuente es sans-serif (como Arial, Helvetica):

• Interlineado más amplio (1.6 – 1.8)

Si es serif (como Georgia):

• Puedes usar un interlineado algo menor (1.5 – 1.6)

En textos muy grandes (títulos):

• Menos interlineado (1.1 – 1.3)

En textos muy pequeños (notas o pies):

• Más interlineado (1.8 – 2)

La clave: haz pruebas, léelo con calma y pregúntate si te cansa la vista.

Cómo aplicar diferentes interlineados según el dispositivo o resolución (responsive design)

Sí, puedes tener un interlineado diferente en móvil, tablet y escritorio.

Por ejemplo:

p {
 line-height: 1.7;
}
@media (max-width: 600px) {
 p {
 line-height: 1.9;
 }
}

En pantallas pequeñas, los textos suelen necesitar más aire, porque la línea de lectura es más estrecha.

Alternativas y propiedades relacionadas con el espaciado del texto (letter-spacing, word-spacing…)

Además del interlineado, hay otras propiedades que ayudan a mejorar la legibilidad del texto:

Propiedad	Función
letter-spacing	Espacio entre letras
word-spacing	Espacio entre palabras
text-indent	Sangría de primera línea
margin-bottom	Espacio entre párrafos

Ejemplo:

p {
 line-height: 1.7;
 letter-spacing: 0.3px;
 word-spacing: 1px;
}

Pero no abuséis. Mucho espaciado puede parecer un texto “desarmado”, como si se estuviera rompiendo.

Ejemplos de código listos para copiar: ajusta el interlineado en segundos

Interlineado estándar para una web moderna

body {
 font-family: 'Inter', sans-serif;
 font-size: 16px;
 line-height: 1.6;
}

Interlineado específico para artículos o blogs

article p {
 line-height: 1.8;
}

Interlineado perfecto para titulares

h1, h2, h3 {
 line-height: 1.2;
}

Copia, pega y listo. Verás la diferencia al instante.

Conclusión: domina el interlineado en CSS y mejora la experiencia de lectura de tu web

El interlineado en CSS es una de las herramientas más potentes y más ignoradas del diseño web. Ajustar correctamente el espacio entre líneas hace que tu contenido:

• Sea más fácil de leer
• Se vea más profesional
• Aumente el tiempo de permanencia en tu web
• Mejore la experiencia de usuario

Si quieres que tu web tenga una apariencia moderna y legible, memoriza esto:

line-height: usa valores sin unidad y ajusta el interlineado según el tipo de contenido.

Y si necesitas ayuda para mejorar tu web, actualizar su diseño o simplemente quieres que la optimicemos para que tenga más visitas, podemos hacerlo juntos.

Te invitamos a contactar con nosotros, somos expertos en diseño web en Alicante y estaremos encantados de ayudarte a conseguir una web con un aspecto profesional y optimizada para SEO.

A veces, un pequeño detalle como el interlineado cambia completamente la manera en la que tus usuarios perciben tu marca.