Interlineado desde tamaño y ratio
Un texto de 16 px con una proporción de 1,5 necesita 24 px de una línea base a la siguiente. También obtiene el espacio que sobra sobre el tamaño de letra y su mitad, listos para maquetas, correos y especificaciones de imprenta. 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
- Razón
- 1,5
- Interlineado (px)
- 24
- Interlineado adicional (px)
- 8
- Medio interlineado (px)
- 4
- Precisión
- 10
Esta calculadora de interlineado (leading) transforma un tamaño de fuente en píxeles CSS y un ratio unitless de line-height en el espaciado exacto entre líneas base en píxeles—la medida tipográfica clásica llamada leading—junto con el interlineado extra y el half-leading para el cálculo de maquetación. Diseñadores y desarrolladores front-end la usan a menudo: un cuerpo a dieciséis píxeles con ratio de uno coma cinco necesita veinticuatro píxeles de interlineado; títulos a dieciocho píxeles con ratio de uno coma seis necesitan veintiocho coma ocho. La identidad es plenamente determinista: el interlineado en píxeles es el tamaño de fuente por el ratio, el extra es ese interlineado menos el tamaño de fuente, y el half-leading es la mitad de ese extra. No hay llamada de red, ni muestreo, ni atajo dependiente de la fecha: solo aritmética finita sobre dos escalares positivos.
Qué significa el interlineado y qué devuelve esta calculadora
El interlineado (leading) es el ritmo vertical del texto: la distancia de una línea base a la siguiente que usan impresores, motores de maquetación y cajas de línea CSS al apilar las líneas de un párrafo. La palabra proviene de las tiras de plomo que se colocaban entre tipos metálicos; en diseño digital la misma idea se escribe a menudo como line-height, pero muchos briefs de diseño, guías editoriales y manuales tipográficos siguen pidiendo interlineado en unidades absolutas.
Puede mantener un ratio sin unidades en una capa de tokens para la herencia y materializar después un valor absoluto en píxeles al exportar mockups fijos, especificaciones de Figma, plantillas de correo o PDF de impresión que no pueden heredar. Esta calculadora implementa interlineado en píxeles igual a tamaño de fuente por ratio, exactamente lo que un line-height unitless multiplica por el tamaño de fuente usado.
También informa el interlineado extra—el espacio más allá del cuerpo, interlineado menos tamaño de fuente—y el half-leading, la mitad de ese extra, como reparten muchos motores el espacio encima y debajo de los glifos en la caja de línea. No hay consulta de métricas OpenType, ni conversión rem o em, ni análisis de ficheros de fuente: son problemas aparte.
Dónde encaja el interlineado en píxeles en sistemas de diseño, CSS y docencia
Los diseñadores de producto convierten una escala tipográfica modular en interlineado absoluto al entregar mockups móviles, cuando los clientes de correo ignoran la herencia unitless, o cuando una exportación PDF de impresión congela cada medida en píxeles o puntos. Los educadores de tipografía y fundamentos CSS pueden mostrar que un ratio unitless de uno coma cinco a dieciséis píxeles equivale a veinticuatro píxeles de espaciado entre líneas base, con ocho de extra y cuatro de half-leading, sin confiar en redondeos opacos de DevTools del navegador.
Los revisores de accesibilidad a veces necesitan una comprobación rápida de que el cuerpo cumple un mínimo de espaciado absoluto para lectura prolongada, aunque el token de origen siga siendo un ratio. Los equipos editoriales y de impresión que aún especifican interlineado en el sentido tradicional obtienen los mismos números que los productos de line-height CSS cuando el ratio se aplica igual.
Combínela con convertidores de unidades tipográficas cuando también necesite px a em o rem, y recuerde que el renderizado real sigue dependiendo de métricas de fuente y del modelo de cajas 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 guías de estilo con valores exactos de interlineado en px que coincidan con los ratios unitless 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 ratio 1.5 da 24 px de interlineado, 8 px de extra y 4 px de half-leading.
¿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.
¿El interlineado es lo mismo que el line-height de CSS?
Esta herramienta también informa extra y half-leading para la maquetación.
¿Por qué se redondean los resultados a una precisión?
La precisión por defecto es 10 decimales; puede fijar precision de 0 a 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/str/leading-from-ratio \
-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/str/leading-from-ratio", {
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/str/leading-from-ratio",
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/str/leading-from-ratio", 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/str/leading-from-ratio", 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": "str.leading_from_ratio",
"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 aporta un tamaño de fuente positivo en píxeles CSS y un ratio unitless positivo; el motor devuelve el tamaño normalizado, el ratio, leading_px, extra_leading_px, half_leading_px, la etiqueta de método leading_from_ratio, la precisión de redondeo y una cadena breve de fórmula. Las entradas inválidas lanzan invalid_input, incluidos tamaño o ratio ausentes, valores no finitos, magnitudes por encima del techo documentado, y cualquier tamaño o ratio no positivo, porque un tipo cero o negativo no define una caja de línea útil.
Cómo se leen el tamaño y el ratio y cómo se mantienen resultados reproducibles
Se admiten signos más opcionales y notación científica en cadenas numéricas cuando se interpretan como decimales finitos; espacios embebidos, prefijos hexadecimales y tokens no numéricos se rechazan con un mensaje claro para que una celda mala no se convierta en un interlineado erróneo. El ratio también debe ser positivo: un multiplicador cero colapsaría la caja de línea, y un ratio negativo no es un producto de interlineado válido en este modelo. Los nombres de campo preferidos son font_size para el tamaño en píxeles CSS y ratio para el multiplicador unitless, pero se aceptan alias como fontSize, size, fs y px para el tamaño, y line_height_ratio, lineHeight, multiplier, lh y leading_ratio para el ratio, de modo que hojas de cálculo, cadenas de consulta y formularios tipados reutilicen un solo contrato. Tamaños de fuente cero o negativos fallan siempre con invalid_input, según la regla de producto de que la aritmética de interlineado no está definida para tipo no positivo. Un campo opcional precision, con alias decimals y dp, elige cuántos decimales exponer en todas las salidas numéricas, con valor por defecto diez y tope quince para que los goldens JSON se mantengan estables entre runtimes. 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 un pipeline automatizado o un build de tokens de diseño sin reimplementar la multiplicación usted mismo.
Dónde encaja el interlineado en píxeles en sistemas de diseño, CSS y docencia
Los ingenieros front-end usan la misma aritmética al generar propiedades personalizadas CSS desde un JSON de tokens, al documentar una rampa tipográfica en Storybook, o al escribir pruebas de snapshot que esperan interlineado de veinticuatro para un cuerpo de dieciséis píxeles con ratio de uno coma cinco. En esta página el trabajo se ejecuta por completo en su navegador; a través de la API cada consulta correcta cuesta $0.002, la validación fallida no se cobra y no se almacena nada tras la respuesta. Esa división—exploración interactiva gratuita y una API idéntica de pago—encaja con el resto del catálogo KIT de nivel A y le permite pasar de una crítica de diseño a un pipeline de tokens automatizado sin cambiar el resultado matemático.
Casos de integración
Rampas tipográficas de tokens de diseño
Desde el tamaño de fuente de cada escalón y un ratio compartido, materialice interlineado absoluto en píxeles más extra y half-leading para entrega en Figma, CSS de correo y exportaciones JSON de tokens.
Fixtures deterministas de CI
Genere resultados leading_px reproducibles para pruebas unitarias, snapshots y scripts de build del sistema de diseño sin multiplicaciones escritas a mano.