Herramientas
Calculadora de interlineado
Calcula el interlineado recomendado según el tamaño de letra, en píxeles y sin unidades para CSS.
Un texto de prueba sirve para ver cómo respira cada línea. Cambia el tamaño de letra y compara el interlineado de cada columna.
Un texto de prueba sirve para ver cómo respira cada línea. Cambia el tamaño de letra y compara el interlineado de cada columna.
Un texto de prueba sirve para ver cómo respira cada línea. Cambia el tamaño de letra y compara el interlineado de cada columna.
Sobre esta herramienta
La calculadora de interlineado te da la altura de línea (line-height) en píxeles para un tamaño de letra concreto. Sirve para decidir cuánto aire dejar entre líneas en un artículo, una ficha de producto, un titular o un botón, y para comparar de un vistazo cómo cambia la lectura al apretar o abrir el texto.
Introduce el tamaño de letra en píxeles. Arriba verás dos propuestas: la «Recomendada», con proporción 1,5 para texto corrido, y la «Proporción áurea», con 1,618. En «Proporciones habituales» tienes cinco escalas, de apretado (1,2) a amplio (2), cada una con su uso típico y un botón para copiar el valor. La «Vista previa» muestra un párrafo con 1,2, 1,5 y 2 para compararlos.
El cálculo se hace en tu navegador y no se envía ningún dato. Los resultados se dan en píxeles con un decimal; si prefieres un line-height sin unidades en tu CSS, usa directamente la proporción (por ejemplo, 1.5). La herramienta no tiene en cuenta el ancho de columna ni la fuente concreta que uses: son puntos de partida que conviene revisar con tu tipografía real.
¿Cómo se calcula el interlineado de un texto?
- Escribe el tamaño de letra en el campo «Tamaño de letra», en píxeles. Al abrir la página vale 16; si el campo se queda vacío, la herramienta calcula con 16.
- Lee arriba los dos resultados principales: «Recomendado» multiplica el tamaño por 1,5 y «Proporción áurea», por 1,618. Con 16 px salen 24 px y 25,9 px.
- Baja a «Proporciones habituales» para ver cinco escalas: «Apretado» (1,2), «Ceñido» (1,375), «Normal» (1,5), «Holgado» (1,625) y «Amplio» (2), cada una con su uso típico.
- Pulsa «Copiar» o el icono de copiar de cada fila para llevarte el valor con su unidad, por ejemplo 24.0px, listo para pegar en tu CSS.
- Compara en «Vista previa» el mismo párrafo con interlineado 1,2, 1,5 y 2. La vista previa usa tu tamaño de letra hasta 24 px; por encima, se queda en 24 px para que quepa.
¿Qué interlineado se recomienda para texto en pantalla?
Para párrafos de lectura, la herramienta propone 1,5 veces el tamaño de letra: es el valor de «Recomendado» y de la fila «Normal». También es el interlineado que las pautas de accesibilidad WCAG piden que el texto pueda alcanzar sin que se rompa el diseño, así que es un buen punto de partida.
Los textos largos con líneas anchas suelen agradecer algo más de aire, como 1,625 («Holgado»). Los titulares, menos, como 1,2 («Apretado»), porque con letra grande el hueco entre líneas ya se ve mucho. En subtítulos y textos de interfaz se usa a menudo un punto intermedio, como 1,375 («Ceñido»).
La herramienta no conoce tu fuente ni el ancho de la columna. Dos fuentes al mismo tamaño pueden parecer muy distintas, así que comprueba el resultado con tu tipografía real.
¿Cómo se pasa el interlineado a CSS?
En CSS, la propiedad line-height admite un número sin unidades (line-height: 1.5), una medida en píxeles (line-height: 24px) o en rem. El número sin unidades multiplica el tamaño de letra de cada elemento, así que un título dentro de un bloque recalcula su interlineado con su propio tamaño.
Los píxeles que da la calculadora sirven cuando necesitas una altura fija: alinear el texto con un icono, dar a un botón una altura exacta o encajar el texto en una retícula base, por ejemplo de 4 u 8 px.
El valor se copia con punto decimal (24.0px), que es lo que entiende CSS. Para pasarlo a rem, divide los píxeles entre el tamaño de letra raíz: con la raíz por defecto de los navegadores, 16 px, 24 px son 1,5 rem.
¿Por qué el interlineado áureo da 1,618?
La proporción áurea (φ) vale aproximadamente 1,618. La calculadora la ofrece como alternativa a 1,5: multiplica el tamaño de letra por 1,618 y redondea a un decimal. Con 18 px salen 29,1 px.
No es una norma tipográfica ni hace el texto más legible por sí misma. Da un resultado algo más abierto que 1,5, entre «Normal» (1,5) y «Holgado» (1,625). Úsala si buscas ese aire y revísala en tu diseño.
Preguntas frecuentes
¿Qué interlineado es el recomendado para texto?
Para párrafos largos se suele usar entre 1,4 y 1,6 veces el tamaño de letra. Las pautas de accesibilidad WCAG proponen que el texto admita al menos 1,5.
¿Es mejor line-height con unidades o sin ellas?
En CSS suele ser mejor sin unidades (line-height: 1.5), porque los elementos hijos lo recalculan con su propio tamaño de letra. Los píxeles son útiles cuando necesitas una altura exacta.
¿Qué interlineado usar en titulares?
Los titulares grandes suelen quedar mejor con interlineados más cerrados, entre 1,1 y 1,3, porque con 1,5 las líneas parecen separadas.
¿Qué es el interlineado en proporción áurea?
Es multiplicar el tamaño de letra por 1,618. Da un texto algo más abierto que el 1,5 y a algunas personas les resulta cómodo para lectura larga, aunque no es una regla.