Interlineado en rejilla base
Un texto de 16 px con proporción 1,5 sobre una rejilla de 8 px da un interlineado de 24 px: exactamente 3 filas, y cada línea se apoya en los mismos raíles. Si el ideal no cae en la rejilla, se ajusta a filas enteras. 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
- Cuadrícula
- 8
- Proporción preferida
- 1,5
- Ajustar
- nearest
- Interlineado ideal
- 24
- Altura de línea
- 24
- Razón
- 1,5
Una rejilla de línea base mantiene cada línea de texto sobre los mismos raíles horizontales invisibles, de modo que párrafos, pies de foto y maquetaciones multicolumna compartan un solo ritmo vertical desde la cabecera hasta el pie. Diseñadores e ingenieros front-end eligen una unidad de rejilla —a menudo cuatro, seis u ocho píxeles— y necesitan un interlineado que sea un múltiplo exacto de esa unidad, no un ratio flotante que se desplace medio píxel en cada línea. Esta calculadora de interlineado sobre rejilla base toma el tamaño de fuente, el ratio preferido sin unidades y la altura de fila de la rejilla, y ajusta la caja de línea ideal al número entero de filas más cercano (o al techo, o al suelo). Usted obtiene el interlineado ajustado en píxeles, el ratio efectivo para pegar en CSS, cuántas filas de rejilla ocupa esa línea y si el valor ideal ya caía sobre la rejilla.
Cómo funciona el ajuste de interlineado a la rejilla base
Parta de la regla familiar del interlineado sin unidades: multiplique el tamaño de fuente por un ratio preferido como uno coma cinco para obtener una caja de línea ideal en la misma unidad que la fuente (casi siempre píxeles CSS). Ese producto es cómodo de leer, pero rara vez cae exactamente sobre su rejilla base. Divida el interlineado ideal entre la altura de fila de la rejilla para saber cuántas filas quiere ocupar la línea; a continuación aplique un modo de ajuste.
Nearest redondea al número entero de filas más cercano, y es el valor por defecto para el cuerpo cuando desea el menor cambio visual respecto al ratio preferido. Up (techo) siempre agranda la caja de línea para que el texto no se sienta más apretado que el ideal —útil en notas legales o líneas de medida larga que necesitan aire—. Down (suelo) reduce hacia la rejilla cuando debe proteger un presupuesto vertical ajustado, como la altura de una tarjeta o una columna de impresión.
Tras el ajuste, multiplique el número entero de filas por la unidad de rejilla para obtener el interlineado final, y divida por el tamaño de fuente para recuperar el ratio sin unidades que puede colocar en una propiedad personalizada CSS. Se impone al menos una fila para que entradas patológicas no colapsen el interlineado a cero.
Dónde compensa ajustar el interlineado a la rejilla
Los sistemas de diseño generan escalas de espacio y tipografía desde una sola constante de rejilla; al llamar a esta calculadora cuando los autores añaden un tamaño nuevo, cada token de interlineado permanece sobre los raíles sin una hoja de cálculo. Los flujos de impresión y PDF que mapean CSS a rejillas de página fijas usan la misma lógica de ajuste para que las previsualizaciones en pantalla coincidan con la plancha. La validación fallida no consume saldo.
Mantenga ratios preferidos moderados, fije los goldens en los campos redondeados y obtendrá un ritmo vertical reproducible para tokens de diseño, workers de borde y generadores de guías de estilo sin montar un motor de maquetación propio.
Qué puede hacer con ella
Generación de tokens de diseño y escalas tipográficas
Cuando añada un tamaño de fuente nuevo a un sistema de diseño, ajuste su ratio preferido a la rejilla base compartida para que cada token de interlineado sea un múltiplo entero de la unidad de rejilla.
Maquetaciones multicolumna y de tarjetas
Alinee cajas de línea de cuerpo, pie y títulos entre columnas y tarjetas apiladas calculando interlineados ajustados para cada tamaño respecto a una sola rejilla.
Ritmo vertical en impresión y PDF
Mapee escalas tipográficas de pantalla a una línea base de impresión fija para que los flujos CSS a PDF mantengan el espaciado de párrafos coherente con la rejilla de página.
Preguntas frecuentes
¿Qué diferencia hay entre nearest, up y down?
Nearest redondea la caja de línea ideal al número entero de filas más cercano. Up siempre aplica techo (interlineado más holgado). Down aplica suelo (más apretado). El número de filas nunca es menor que uno.
¿En qué se diferencia de una calculadora simple de interlineado?
Una calculadora simple solo multiplica el tamaño de fuente por un ratio. Esta herramienta también ajusta ese producto a una rejilla base para que el ritmo vertical sea coherente entre tamaños y columnas.
¿Qué unidad de rejilla conviene elegir?
Los diseñadores suelen elegir 4, 6 u 8 píxeles y construir todo el espaciado a partir de ese número. Indique la misma unidad aquí y cada interlineado que obtenga será un múltiplo exacto de ella, no una proporción que se desvía medio píxel por línea.
¿Cómo sé si mi proporción preferida ya encaja en la rejilla?
El resultado le indica cuándo el interlineado ideal ya cae en un número entero de filas. En ese caso nada cambia: un texto de 16 px a 1,5 sobre una rejilla de 8 px se queda en 24 px, tres filas, con la misma proporción.
¿Uso el valor en píxeles o la proporción en mis estilos?
Cualquiera de los dos mantiene el texto en la rejilla. Use el interlineado ajustado en píxeles o la proporción efectiva, que es esa altura dividida entre el tamaño de letra, si sus estilos usan interlineados sin unidad.
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/baseline-grid \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"grid":8}'const res = await fetch("https://api.kit.forhosting.com/str/baseline-grid", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"grid": 8
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/baseline-grid",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"grid": 8
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/baseline-grid", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"grid":8}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"grid":8}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/baseline-grid", 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,
"grid": 8
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.baseline_grid",
"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.
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
Cómo funciona el ajuste de interlineado a la rejilla base
Cuando el producto ideal ya equivale a un número entero de filas, la respuesta marca on_grid true para que las tuberías de tokens puedan omitir una reescritura.
Contrato de entrada, campos de respuesta y validación
Tipo de dieciocho píxeles sobre la misma rejilla de ocho con ratio uno coma cinco da ideal veintisiete, que se ajusta nearest a veinticuatro (tres filas, ratio unos uno coma tres tres) o up a treinta y dos (cuatro filas) según el snap. Envíe por POST un cuerpo JSON con dos números finitos positivos obligatorios: font_size (píxeles CSS del texto que está dimensionando) y grid (altura de fila de la línea base en la misma unidad). Opcionalmente envíe preferred_ratio, que vale uno coma cinco si se omite, y snap como nearest, up o down —se aceptan alias como round, ceil y floor—. Los campos numéricos pueden llegar como números JSON o cadenas decimales; valores ausentes, cero, negativos, NaN e Infinity fallan con invalid_input y no se facturan. En caso de éxito el payload repite font_size, grid, preferred_ratio y snap; informa ideal_line_height antes del ajuste; devuelve line_height y ratio tras el ajuste; incluye el entero grid_rows; pone on_grid cuando el ideal ya coincidía con un múltiplo de la rejilla; y ofrece una cadena formula breve para documentación. Ejemplo: tipo de dieciséis píxeles sobre una rejilla de ocho con ratio preferido uno coma cinco da ideal veinticuatro, exactamente tres filas, así que line_height permanece en veinticuatro y el ratio en uno coma cinco. Combine los números con su propia conversión rem si el tamaño raíz difiere; este endpoint trabaja en píxeles crudos para que los resultados sean deterministas entre entornos.
Dónde aporta valor una API de interlineado sobre rejilla base
Las bibliotecas de componentes que renderizan artículos multicolumna, tarjetas de producto o barras laterales de documentación necesitan líneas base alineadas entre breakpoints: procesar tamaños de fuente por lotes con la API produce una tabla estable de ratios ajustados para Storybook y regresión visual. Como la implementación es parse pura de nivel A, cada llamada con éxito cuesta el precio base publicado $0.002 sin tokens de modelo ni red saliente.
Preguntas técnicas
¿Cómo calculo un interlineado sobre rejilla base?
Envíe font_size y grid positivos (y opcionalmente preferred_ratio, por defecto 1.5, y snap: nearest, up o down). La API devuelve line_height como múltiplo entero de la rejilla y el ratio efectivo sin unidades.
¿Qué unidades debo usar para font_size y grid?
Use la misma unidad para ambos —habitualmente píxeles CSS—. La matemática es agnóstica de unidad mientras ambas entradas compartan escala; la conversión rem depende del tamaño de fuente raíz.
¿Cuánto cuesta la herramienta de interlineado sobre rejilla base?
La herramienta en el navegador es gratuita. Las solicitudes API usan saldo prepago KIT a $0.002 por llamada con éxito; la entrada inválida no se factura.