Compruebe el ancho óptimo de lectura y caracteres por línea
Con una letra de 16 px y una columna de 560 px salen 70 caracteres por línea, dentro del intervalo de 45 a 75 que hace cómoda una lectura larga. Revise cada tamaño de pantalla antes de cerrar el diseño. 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
- Ancho de columna
- 560
- Caracteres por línea
- 70
- Evaluación
- recommended
- Mínimo recomendado
- 45
- Máximo recomendado
- 75
La legibilidad tipográfica depende de algo más que elegir una fuente atractiva. Una columna demasiado ancha puede hacer que usted pierda el punto de lectura al pasar a la línea siguiente, mientras que una muy estrecha corta las frases continuamente. Esta herramienta utiliza el tamaño de fuente y el ancho de columna para estimar los caracteres por línea y comprueba si el resultado está entre los 45 y 75 recomendados. Es una ayuda rápida para planificar artículos, documentación, boletines, paneles y otros diseños destinados a una lectura prolongada.
Cómo introducir las medidas tipográficas
Introduzca el tamaño de la fuente del texto y el ancho real de la columna en píxeles CSS. Use el espacio disponible para el texto después de descontar rellenos, bordes, notas laterales o controles contiguos. Por ejemplo, una tarjeta de 640 píxeles con 32 píxeles de relleno a cada lado solo ofrece 576 píxeles para los párrafos.
Indique el tamaño calculado del texto base, no un porcentaje de zoom, el tamaño de un encabezado ni el nombre de un token. Ambos valores deben ser números finitos positivos; un tamaño no positivo se rechaza porque no representa texto legible. Si su diseño usa unidades rem, conviértalas mediante el tamaño raíz o consulte los valores calculados del navegador.
Compruebe por separado los puntos de ruptura de escritorio, tableta y móvil, pues una columna adaptable puede cambiar de categoría aunque la fuente permanezca igual. La respuesta repite las entradas para que usted pueda registrar cada configuración.
Cómo interpretar la estimación por línea
El cálculo supone que un carácter medio ocupa medio em, es decir, la mitad del tamaño de fuente indicado. Divide el ancho de la columna por esa anchura media y presenta el resultado con un decimal. Es una aproximación deliberada: el ancho real depende de la familia tipográfica, el peso, el idioma, la puntuación, el espaciado y las palabras concretas.
Una fuente condensada puede admitir más caracteres y una fuente ancha, menos. Por ello, la herramienta sirve para tomar decisiones iniciales y revisar diseños de forma coherente, pero no sustituye la medición de un texto representativo con la fuente final. La clasificación utiliza el valor sin redondear: menos de 45 es demasiado estrecho, más de 75 es demasiado ancho y el intervalo inclusivo se considera recomendado.
La respuesta muestra también el supuesto de 0.5 em y ambos límites. Si el resultado queda cerca de un extremo, revise contenido real y úselo como señal de revisión visual, no como una norma rígida de accesibilidad.
Cómo convertir el resultado en una decisión de diseño
Un resultado recomendado indica una relación adecuada entre tamaño y medida para una lectura sostenida, aunque no garantiza por sí solo una buena tipografía. Revise también la altura de línea, el espacio entre párrafos, el contraste, la representación de la fuente y las necesidades de su público. Si la columna es demasiado ancha, reduzca su ancho máximo, aumente la fuente cuando proceda o adopte varias columnas solo si el orden de lectura sigue claro.
Si es demasiado estrecha, conceda más espacio horizontal, reduzca rellenos excesivos o valore si la fuente es desproporcionadamente grande para el componente. No reduzca el texto base únicamente para obtener un resultado favorable, especialmente en pantallas pequeñas. Compare tokens de contenedor y tipografía durante el diseño y repita la prueba tras implementar, porque las rejillas y los rellenos anidados cambian el ancho efectivo.
En sitios multilingües, pruebe contenido representativo de cada escritura.
Qué puede hacer con ella
Definir el ancho máximo de un artículo
Compare distintos anchos de contenido con el tamaño del texto antes de fijar el máximo para escritorio.
Auditar puntos de ruptura adaptables
Compruebe escritorio, tableta y móvil para detectar columnas demasiado estrechas o anchas.
Revisar tokens del sistema de diseño
Evalúe juntos los tokens tipográficos y de contenedor para compartir una base legible.
Preguntas frecuentes
¿Qué intervalo se considera recomendado?
La herramienta considera recomendado el intervalo inclusivo de 45 a 75 caracteres estimados por línea.
¿Cómo se calculan los caracteres por línea?
Se supone un ancho medio de carácter de 0.5 em y se divide la columna por la mitad del tamaño de fuente.
¿Es una medición exacta para mi fuente?
No. El ancho varía según fuente, peso, idioma, espaciado y contenido; el resultado es orientativo.
¿Una columna de 560 px es demasiado ancha para texto de 16 px?
No. Con 16 px se estima que cada carácter ocupa 8 px, así que 560 px dan unos 70 caracteres por línea, una cifra dentro del intervalo recomendado de 45 a 75.
¿Qué ancho debo indicar si el recuadro tiene relleno interior?
Indique solo el espacio que ocupan los párrafos. Una tarjeta de 640 px con 32 px de relleno a cada lado deja 576 px, y esa es la medida que conviene comprobar, no el ancho exterior.
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/reading-column-width-check \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"column_width":560}'const res = await fetch("https://api.kit.forhosting.com/doc/reading-column-width-check", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"column_width": 560
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/doc/reading-column-width-check",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"column_width": 560
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/reading-column-width-check", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"column_width":560}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"column_width":560}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/reading-column-width-check", 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,
"column_width": 560
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.reading_column_width_check",
"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
Cómo convertir el resultado en una decisión de diseño
El navegador permite comprobaciones gratuitas; cada solicitud automatizada por API cuesta $0.002.
Preguntas técnicas
¿Qué ocurre si el tamaño de fuente es cero o negativo?
La solicitud devuelve un error invalid_input porque el tamaño de fuente debe ser positivo.
¿Cuánto cuesta una solicitud por API?
Cada solicitud por API cuesta $0.002; el uso interactivo en el navegador es gratuito.