Calculadora de Interlineado: Encuentra el Espaciado Perfecto para Cualquier Tamaño de Fuente

El interlineado es una de las decisiones tipográficas más impactantes — y más ignoradas — que tomarás. Demasiado ajustado y el texto se siente claustrofóbico. Demasiado suelto y el ojo pierde el hilo entre líneas. Acertar marca la diferencia entre un texto que te invita a leer y uno con el que te cuesta seguir el ritmo.

La Tooladex Line Height Calculator te ayuda a encontrar el valor adecuado para cualquier tamaño de fuente y obtenerlo en la unidad CSS exacta que necesitas — ratio sin unidad, px, em o rem.

¿Qué es el interlineado (y qué es el leading)?

El interlineado es la distancia vertical de una línea base a la siguiente — la altura total asignada a cada línea de texto. En tipografía impresa este mismo concepto se llama leading (pronunciado "ledding"), en referencia a las tiras de plomo que los tipógrafos colocaban entre las filas de tipos metálicos.

En CSS la propiedad line-height controla esto directamente. Un valor de 1.5 en una fuente de 16px significa que cada línea ocupa 24px de espacio vertical.

Sin unidad, px, em o rem — ¿cuál deberías usar?

CSS te ofrece varias formas de expresar el interlineado:

El ratio sin unidad es casi siempre la opción correcta para el texto de cuerpo y los encabezados. Un valor fijo en píxeles se romperá si un estilo padre o una preferencia del usuario cambia el tamaño de fuente — el texto podría solaparse. Un valor sin unidad hereda y se escala de forma natural.

WCAG 1.4.12: el mínimo de accesibilidad

Las Web Content Accessibility Guidelines (WCAG) Success Criterion 1.4.12 (Espaciado de texto, Nivel AA) exigen que los usuarios puedan establecer el interlineado del texto de cuerpo en al menos 1,5× el tamaño de fuente sin pérdida de contenido ni funcionalidad.

En la práctica, el enfoque más sencillo es comenzar en 1.5 o superior para el texto de cuerpo, lo que significa que cumples por defecto y le das a tu contenido el espacio que necesita.

Interlineado recomendado según el caso de uso

Estos son puntos de partida. Prueba siempre con contenido real al ancho de columna objetivo — las columnas estrechas suelen necesitar un ratio ligeramente mayor.

Cómo usar la calculadora

1. Introduce tu tamaño de fuente en píxeles (p. ej., 16 para texto de cuerpo, 32 para un H1).
2. Arrastra el control deslizante de ratio o elige un ajuste preestablecido (Ajustado → Suelto).
3. Lee los resultados — obtendrás el ratio, el valor en píxeles, em, rem y una declaración CSS lista para copiar.
4. Comprueba el indicador WCAG — la herramienta señala si tu ratio cumple WCAG 1.4.12 para texto de cuerpo.
5. Vista previa — observa cómo el bloque de texto en vivo se reajusta al instante mientras modificas los valores.

/* Texto de cuerpo — compatible con WCAG, sin unidad (recomendado) */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Encabezado — leading más ajustado */
h1 {
  font-size: 2rem;
  line-height: 1.2;
}

/* Texto en letra pequeña */
figcaption {
  font-size: 0.875rem;
  line-height: 1.6;
}