Calculadora de interlineado
Un texto de 16 px con una proporción de 1,5 necesita un interlineado de 24 px. Escriba cualquier tamaño de letra y proporción y obtenga el valor en píxeles para una maqueta fija, una ficha de diseño o una plantilla de correo. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Tamaño de fuente
- 16
- Ratio adimensional de interlineado
- 1,5
- Interlineado en px
- 24
- Precisión
- 10
Esta calculadora de interlineado convierte un tamaño de fuente en píxeles CSS y un ratio de interlineado adimensional en el interlineado resultante en píxeles, el valor exacto que fija como line-height cuando prefiere una pila absoluta en píxeles en lugar de un multiplicador adimensional puro. Diseñadores y desarrolladores front-end recurren constantemente a este cálculo: el texto de cuerpo a dieciséis píxeles con un ratio de uno coma cinco necesita veinticuatro píxeles de interlineado; los encabezados a dieciocho píxeles con un ratio de uno coma seis necesitan veintiocho coma ocho píxeles. La identidad es totalmente determinista: el interlineado en píxeles equivale al tamaño de fuente multiplicado por el ratio. No hay llamada de red, ni muestreo, ni atajo que dependa de la fecha; solo aritmética finita sobre dos escalares positivos.
Qué significa el interlineado y qué devuelve esta calculadora
El interlineado es el ritmo vertical del texto: la distancia de línea base a línea base que usan los navegadores y los motores de maquetación al apilar las líneas de un párrafo. En CSS puede escribir line-height como un ratio adimensional, como uno coma cinco, como un porcentaje o como una longitud absoluta en píxeles.
Muchos sistemas de diseño mantienen un ratio adimensional en la capa de tokens para permitir la herencia, y luego materializan un valor absoluto en píxeles cuando exportan maquetas fijas, especificaciones de Figma o plantillas de correo que no pueden heredar. Esta calculadora implementa el producto simple: interlineado en píxeles igual a tamaño de fuente multiplicado por ratio, que es exactamente lo que multiplica un line-height adimensional contra el tamaño de fuente usado.
No hay un modelo de interlineado en la tipografía de plomo de imprenta, ni una consulta de métricas OpenType, ni una conversión entre rem y em: esos son problemas distintos. Los ratios no positivos también se rechazan para que el resultado se mantenga como una longitud positiva en píxeles.
Dónde encaja el interlineado en píxeles en sistemas de diseño, CSS y enseñanza
Los diseñadores de producto convierten una escala tipográfica modular en interlineados absolutos cuando entregan maquetas móviles, cuando los clientes de correo ignoran la herencia adimensional, o cuando una exportación a PDF congela cada medida en píxeles o puntos. Los docentes que enseñan fundamentos de CSS pueden mostrar que un ratio adimensional de uno coma cinco a dieciséis píxeles equivale a veinticuatro píxeles sin depender del redondeo opaco de las DevTools del navegador.
Los revisores de accesibilidad a veces necesitan una comprobación rápida de que el texto de cuerpo cumple un interlineado absoluto mínimo para lectura extensa, incluso cuando el token de origen sigue siendo un ratio. Combínela con conversores de unidades tipográficas cuando también necesite pasar de px a em, y tenga presente que la representación real sigue dependiendo de las métricas de la fuente, el medio interlineado y los modelos de caja una vez que el valor en píxeles sale de esta calculadora.
Qué puede hacer con ella
Documentación de CSS y componentes
Documente ejemplos de Storybook o de guía de estilo con valores exactos de line-height en px que coincidan con los ratios adimensionales usados en las hojas de estilo de producción.
Preguntas frecuentes
¿Cuánto cuesta la calculadora de interlineado?
Es gratis en su navegador en esta página.
¿Cómo se calcula el interlineado?
Por ejemplo, 16 px con un ratio de 1.5 da 24 px.
¿Qué ocurre si el tamaño de fuente es cero o negativo?
Un tamaño de fuente no positivo no puede definir un interlineado útil en este modelo.
¿Esto convierte unidades rem o em?
No. El tamaño de fuente se interpreta como píxeles CSS y el ratio es adimensional. Use un conversor de unidades dedicado si necesita rem o em.
¿Por qué los resultados se redondean a una precisión?
La precisión por defecto es de 10 decimales; puede fijar precision entre 0 y 15.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/hobby/line-height \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"ratio":1.5}'const res = await fetch("https://api.kit.forhosting.com/hobby/line-height", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"ratio": 1.5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/hobby/line-height",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"ratio": 1.5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/hobby/line-height", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"ratio":1.5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"ratio":1.5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/hobby/line-height", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"font_size": 16,
"ratio": 1.5
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "hobby.line_height",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_abs_value | 1000000000000000 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Qué significa el interlineado y qué devuelve esta calculadora
Usted proporciona un tamaño de fuente positivo en píxeles CSS y un ratio adimensional positivo; el motor devuelve el tamaño de fuente normalizado, el ratio, el interlineado calculado en píxeles, la etiqueta de método line_height, la precisión usada para el redondeo y una breve cadena recordatoria de la fórmula. Las entradas inválidas generan invalid_input, incluidos tamaño de fuente o ratio ausentes, valores no finitos, magnitudes por encima del techo documentado y cualquier tamaño de fuente no positivo, porque un tamaño de fuente cero o negativo no puede definir una caja de línea útil.
Cómo se leen el tamaño de fuente y el ratio, y cómo se mantienen reproducibles los resultados
Se permiten signos más iniciales opcionales y notación científica en cadenas numéricas cuando se interpretan como decimales finitos; los espacios incrustados, los prefijos hexadecimales y los tokens no numéricos se rechazan con un mensaje claro para que una celda mal escrita no se convierta en un interlineado equivocado. El ratio también debe ser positivo: un multiplicador de cero colapsaría la caja de línea, y un ratio negativo no es un producto válido de line-height CSS en este modelo. Los nombres de campo preferidos son font_size para el tamaño en píxeles CSS y ratio para el multiplicador adimensional, pero se aceptan alias como fontSize, size, fs y px para el tamaño, y line_height_ratio, lineHeight, multiplier y lh para el ratio, de modo que hojas de cálculo, cadenas de consulta y formularios tipados puedan reutilizar un único contrato. Los tamaños de fuente cero o negativos siempre fallan con invalid_input, siguiendo la regla del producto de que la aritmética de interlineado no está definida para tipografía no positiva. Un campo opcional precision, con los alias decimals y dp, elige cuántos decimales se muestran en todas las salidas numéricas, con valor por defecto de diez y un tope de quince para que los goldens JSON se mantengan estables entre entornos de ejecución. Combine la ejecución gratuita en el navegador de esta página con la API de pago cuando necesite el mismo resultado matemático dentro de una canalización automatizada o una compilación de tokens de diseño sin reimplementar usted mismo la multiplicación.
Dónde encaja el interlineado en píxeles en sistemas de diseño, CSS y enseñanza
Los ingenieros front-end usan la misma aritmética al generar propiedades personalizadas de CSS a partir de un archivo JSON de tokens, al documentar una rampa tipográfica en Storybook, o al escribir pruebas de instantánea que esperan un line-height de veinticuatro para un tamaño de cuerpo de dieciséis píxeles. En esta página el trabajo se ejecuta enteramente en su navegador; a través de la API cada consulta exitosa cuesta $0.002, la validación fallida no se cobra y no se guarda nada después de devolver la respuesta. Esa división —exploración interactiva gratuita y una API de pago idéntica— coincide con el resto del catálogo de nivel A del KIT y le permite pasar de una crítica de diseño a una canalización automatizada de tokens sin cambiar el resultado matemático.
Casos de integración
Rampas tipográficas de tokens de diseño
A partir del tamaño de fuente de cada paso y un ratio compartido, materialice interlineados absolutos en píxeles para entregas a Figma, CSS de correo y exportaciones JSON de tokens.
Fixtures deterministas de CI
Genere resultados reproducibles de line_height_px para pruebas unitarias, pruebas de instantánea y scripts de compilación de sistemas de diseño sin multiplicaciones escritas a mano.