Calculadora de Altura de Línea

Calcula la altura de línea óptima para cualquier tamaño de fuente. Obtén valores sin unidad, px, em y rem con vista previa en vivo y recomendaciones WCAG.

px
8px 96px
0.8 3.0

WCAG recomienda al menos 1,5 para texto de cuerpo.

Ajustes predefinidos

WCAG 1.4.12 requiere que la altura de línea sea al menos 1,5× el tamaño de fuente. Tu proporción actual 1.5 ✓ passes WCAG 1.4.12.

Resultados

Proporción sin unidad

1.5

Píxeles

24px

Em

1.5em

Rem

1.5rem

Propiedad CSS

line-height: 1.5;

Vista previa en vivo

El veloz zorro marrón salta sobre el perro perezoso. La tipografía importa — una buena altura de línea hace el texto más fácil de leer y más accesible para todos los usuarios.

font-size: 16px; line-height: 1.5;

¿Qué es la altura de línea?

La altura de línea (también llamada interlineado en diseño impreso) es la distancia vertical entre líneas de texto, medida de una línea base a la siguiente. Tiene un gran impacto en la legibilidad: muy ajustada y el texto se siente apretado; muy holgada y el ojo pierde el hilo.

En CSS, la propiedad line-height acepta un número sin unidad (p. ej., 1,5), un valor en píxeles (24px), un valor em o rem (1,5em), o un porcentaje. El valor sin unidad es generalmente el preferido porque se escala automáticamente con el tamaño de fuente de cada elemento.

Cómo calcular la altura de línea

  1. Elige el tamaño de fuente en píxeles (p. ej., 16px para texto de cuerpo).
  2. Elige una proporción — 1,5 es un buen punto de partida para texto de cuerpo, 1,1–1,2 para encabezados.
  3. Multiplica el tamaño de fuente × proporción para obtener el valor en píxeles (p. ej., 16 × 1,5 = 24px).
  4. Usa la proporción sin unidad directamente en CSS para mejor escalabilidad.
  5. Copia el resultado en la unidad que mejor se adapte a tu hoja de estilos.

Buenas prácticas

  • Usa una proporción sin unidad (p. ej., 1,5) en lugar de un valor px fijo para que la altura de línea escale con el tamaño de fuente.
  • Texto de cuerpo: apunta a 1,4–1,6. WCAG 1.4.12 requiere al menos 1,5 para accesibilidad.
  • Encabezados y texto de visualización: usa una proporción más compacta de 1,1–1,3.
  • Texto pequeño (menos de 14px): aumenta ligeramente la proporción para mantener la legibilidad.
  • Prueba tu altura de línea visualmente — párrafos reales revelan problemas con más claridad.

Preguntas frecuentes

¿Cuál es la altura de línea ideal para el texto de cuerpo?

La mayoría de los tipógrafos recomiendan 1,4–1,6 para texto de cuerpo. El criterio de éxito WCAG 1.4.12 requiere un mínimo de 1,5× el tamaño de fuente.

¿Por qué usar una proporción sin unidad en lugar de píxeles?

Una proporción sin unidad (p. ej., 1,5) hereda el tamaño de fuente del elemento y escala correctamente si cambia. Un valor px fijo no se ajusta, lo que puede causar superposición de texto si el usuario modifica el tamaño de fuente.

¿Cuál es la diferencia entre altura de línea e interlineado?

El interlineado es un término de imprenta para el espacio vertical entre líneas. En CSS, line-height controla la misma medida pero se distribuye por defecto arriba y abajo de cada línea.

¿Deben los encabezados tener una altura de línea diferente al texto de cuerpo?

Sí. Los encabezados grandes suelen verse mejor con una proporción más compacta (1,1–1,2). El texto de cuerpo necesita más espacio (1,4–1,6) para guiar el ojo a través de las líneas.

Share this tool

Share a direct link or embed this tool on your site. Keep the Tooladex attribution link to support the project.