Interlineado CSS recomendado según tamaño y tipo de texto
Un texto de cuerpo de 16 px lleva un interlineado de 1,5, es decir, 24 px, mientras que los encabezados usan 1,2 y los pies de foto 1,4: indique el tamaño de letra y el tipo de texto, y copie un valor de partida. 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
- Tipo de contenido
- Body text
- Tamaño de fuente (px)
- 16
- Proporción recomendada
- 1,5
- Interlineado (px)
- 24
- Css
- line-height: 24px;
Esta herramienta convierte un tamaño de fuente y una función tipográfica en un punto de partida práctico para el interlineado CSS. Usted elige texto de cuerpo, encabezado o pie, y el sistema aplica una proporción habitual antes de devolver el valor sin unidad y su equivalente en píxeles. Resulta útil cuando un diseño ya define tamaños, pero todavía carece de tokens de ritmo vertical. El resultado es determinista, se copia fácilmente en CSS y debe entenderse como orientación, no como una solución perfecta para cualquier fuente.
Elija la función del contenido antes que el espaciado
El interlineado debe responder a la manera en que se lee el texto, no repetir un único multiplicador en toda la interfaz. El texto de cuerpo suele ocupar varias líneas y necesita facilitar el recorrido de una línea a la siguiente; por eso se recomienda una proporción de 1.5. Los encabezados suelen ser más grandes, breves y de una o dos líneas; la proporción más ajustada de 1.2 conserva su unidad visual.
Los pies son pequeños pero cortos, y 1.4 les aporta aire sin hacer que dominen los elementos cercanos. Así, una errata dentro de un sistema de tokens se corrige en su origen. Estas proporciones son puntos de partida habituales y conviene ajustarlas después de observar la fuente y la composición reales.
Interprete la proporción y el valor en píxeles
La recomendación multiplica el tamaño positivo en píxeles CSS por la proporción fija de la función elegida. Un cuerpo de 16 píxeles usa 1.5 y devuelve 24 píxeles; un encabezado de 32 píxeles usa 1.2 y devuelve 38.4 píxeles. En producción suele convenir la proporción sin unidad porque se hereda de forma proporcional cuando cambia el tamaño descendiente.
El valor en píxeles sigue siendo útil para especificaciones, entregas de diseño, control visual, correo y tokens con longitudes explícitas. Se redondea a cuatro decimales para conservar tamaños fraccionarios sin ruido numérico. Los valores ausentes, cero, negativos, infinitos o no numéricos producen un error.
El resultado describe la caja de línea, no la altura visible del glifo: cada fuente distribuye ascendentes, descendentes y espacios internos de forma diferente. Úselo como base reproducible y revise luego el texto renderizado.
Pruebe la recomendación dentro del diseño real
Después de obtener el valor, aplíquelo en la composición definitiva y pruebe contenido representativo, no solo una frase ideal. En cuerpo, incluya varios párrafos, enlaces largos, énfasis, cifras y anchos móviles. Compruebe que se puede pasar de una línea a otra sin perder el punto de lectura y que el párrafo conserva cohesión.
En encabezados, pruebe el título real más largo en cada breakpoint; 1.2 suele formar un bloque sólido, aunque una tipografía con acentos altos o un título de tres líneas puede necesitar más espacio. En pies, revise tarjetas densas, créditos, notas de tabla y cadenas localizadas. También conviene comprobar zoom y sustituciones de fuente.
Convierta los ajustes necesarios en tokens deliberados, no en declaraciones aisladas. Esta capacidad no mide métricas tipográficas, longitud de línea, idioma, peso ni entorno de renderizado, y no sustituye la revisión visual o de accesibilidad. Su función es ofrecer un inicio razonable, explicable y repetible.
Qué puede hacer con ella
Iniciar una escala tipográfica
Convierta tamaños elegidos en tokens iniciales de interlineado para cuerpo, encabezados y pies antes del ajuste visual.
Generar documentación de diseño
Produzca proporciones, píxeles y declaraciones CSS coherentes para una biblioteca de componentes o una entrega.
Validar funciones tipográficas
Rechace funciones desconocidas en una automatización en vez de aceptar silenciosamente un espaciado por defecto.
Preguntas frecuentes
¿Qué proporciones recomienda la herramienta?
Utiliza 1.5 para cuerpo, 1.2 para encabezados y 1.4 para pies o leyendas.
¿Conviene usar la proporción o los píxeles en CSS?
La proporción sin unidad suele heredarse mejor; los píxeles son prácticos para especificaciones fijas y entregas.
¿El resultado garantiza la accesibilidad del texto?
No. Es un punto de partida; usted debe probar la fuente, el ancho, el diseño, el zoom y el contenido reales.
¿Qué interlineado conviene para un texto de 16 px?
Un interlineado de 1,5, que equivale a 24 px. El texto de cuerpo ocupa varias líneas, y ese aire extra ayuda a la vista a pasar del final de una línea al principio de la siguiente.
¿Por qué los encabezados llevan menos interlineado que los párrafos?
Porque son más grandes, más cortos y suelen ocupar una o dos líneas. La proporción de 1,2 mantiene unido un título partido, de modo que un encabezado de 32 px recibe 38,4 px.
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/doc/line-height-recommend \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"content_type":"body_text"}'const res = await fetch("https://api.kit.forhosting.com/doc/line-height-recommend", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"content_type": "body_text"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/doc/line-height-recommend",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"content_type": "body_text"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/line-height-recommend", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"content_type":"body_text"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"content_type":"body_text"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/line-height-recommend", 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,
"content_type": "body_text"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.line_height_recommend",
"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_mb | 25 |
max_pages | 200 |
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
Puede usarla en el navegador o integrar la API por $0.002 por solicitud.
Elija la función del contenido antes que el espaciado
Seleccione body_text para párrafos, artículos y descripciones; heading para títulos y rótulos de sección; y caption para notas de imagen, leyendas y anotaciones secundarias. La frase body text se normaliza como body_text, pero cualquier otro tipo desconocido genera un error en lugar de aplicar un valor por defecto.
Interprete la proporción y el valor en píxeles
La respuesta contiene el tamaño normalizado, el tipo de contenido, la proporción, line_height_px y una declaración CSS lista para copiar. El cálculo no usa red, modelos, azar ni reloj, por lo que una misma entrada siempre produce el mismo JSON.
Pruebe la recomendación dentro del diseño real
El navegador permite uso interactivo y cada solicitud API cuesta $0.002; ambos emplean la misma función determinista.
Preguntas técnicas
¿Qué tipos de contenido se reconocen?
Se aceptan body_text (o body text), heading y caption. Cualquier otro valor devuelve invalid_input.
¿Cuánto cuesta una solicitud API?
Cada solicitud API cuesta $0.002. La herramienta del navegador se puede utilizar de forma interactiva.