Verifique a largura ideal de leitura e caracteres por linha
Com fonte de 16 px e coluna de 560 px, o resultado é 70 caracteres por linha, dentro da faixa de 45 a 75 que deixa a leitura longa confortável. Confira cada tamanho de tela antes de fechar o layout. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Tamanho da fonte
- 16
- Largura da coluna
- 560
- Caracteres por linha
- 70
- Avaliação
- recommended
- Mínimo recomendado
- 45
- Máximo recomendado
- 75
A legibilidade tipográfica depende de mais do que escolher uma fonte atraente. Uma coluna larga demais pode fazer com que você perca o ponto de leitura ao passar para a linha seguinte, enquanto uma coluna muito estreita interrompe as frases com quebras constantes. Esta ferramenta usa o tamanho da fonte e a largura da coluna para estimar os caracteres por linha e informa se o resultado está na faixa recomendada de 45 a 75. É um recurso rápido para planejar artigos, documentação, boletins, painéis e outros layouts de leitura prolongada.
Como informar as medidas tipográficas
Informe o tamanho da fonte do corpo e a largura real da coluna de texto em pixels CSS. Use o espaço disponível para o texto depois de descontar preenchimento, bordas, notas laterais ou áreas reservadas para controles próximos. Por exemplo, um cartão de 640 pixels com 32 pixels de preenchimento em cada lado oferece somente 576 pixels aos parágrafos.
O tamanho deve ser o valor calculado do texto principal, e não a porcentagem de zoom, o tamanho de um título ou o nome de um token. Os dois valores precisam ser números finitos positivos; um tamanho não positivo é rejeitado porque não descreve texto legível. Se o projeto usar rem, converta com o tamanho raiz ou consulte os valores calculados nas ferramentas do navegador.
Verifique separadamente desktop, tablet e celular, pois uma coluna responsiva pode mudar de categoria sem alterar a fonte. A resposta repete as entradas para você registrar cada configuração avaliada.
Como interpretar a estimativa por linha
O cálculo considera que um caractere médio ocupa metade de um em, ou seja, metade do tamanho de fonte informado. Ele divide a largura da coluna por essa largura média e apresenta os caracteres por linha com uma casa decimal. Trata-se intencionalmente de uma aproximação: as larguras reais dependem da família, do peso, do idioma, da pontuação, do espaçamento e das palavras usadas.
Uma fonte condensada pode comportar mais caracteres; uma fonte larga, menos. Portanto, a ferramenta apoia decisões iniciais e revisões consistentes, mas não substitui a medição de um trecho representativo na fonte final. A classificação usa o valor sem arredondamento: abaixo de 45 é estreito demais, acima de 75 é largo demais e a faixa inclusiva é recomendada.
A resposta também mostra a hipótese de 0.5 em e os dois limites. Perto de uma borda, teste conteúdo real e trate o resultado como indicação para revisão visual, não como regra rígida de acessibilidade.
Como transformar o resultado em uma decisão de layout
Um resultado recomendado sugere uma boa relação entre fonte e medida para leitura contínua, mas representa apenas uma parte de um sistema confortável. Analise também altura da linha, espaçamento dos parágrafos, contraste, renderização e necessidades do público. Se o resultado for largo demais, reduza a largura máxima, aumente a fonte quando apropriado ou use várias colunas somente se a ordem de leitura continuar clara.
Se for estreito demais, ofereça mais espaço horizontal, reduza preenchimentos excessivos ou reveja se a fonte está grande demais para o componente. Não diminua o texto do corpo apenas para obter aprovação, principalmente em telas pequenas. Compare tokens de tipografia e contêiner durante o projeto e repita a verificação depois da implementação, porque grades e preenchimentos aninhados alteram a largura efetiva.
Em sites multilíngues, valide exemplos em cada sistema de escrita.
Casos de uso
Definir a largura máxima de um artigo
Compare larguras candidatas com a fonte do corpo antes de escolher o máximo no desktop.
Auditar pontos de quebra responsivos
Confira desktop, tablet e celular para encontrar colunas estreitas ou largas demais.
Revisar tokens do sistema de design
Teste tokens de tipografia e contêiner juntos para manter uma referência legível.
Perguntas frequentes
Qual faixa é considerada recomendada?
A ferramenta considera recomendados de 45 a 75 caracteres estimados por linha, incluindo os limites.
Como os caracteres por linha são calculados?
Ela assume largura média de 0.5 em e divide a coluna pela metade do tamanho da fonte.
A medição é exata para minha fonte?
Não. Família, peso, idioma, espaçamento e conteúdo alteram os glifos; o valor é uma estimativa.
Uma coluna de 560 px é larga demais para texto de 16 px?
Não. Com 16 px, cada caractere é estimado em 8 px, então 560 px comportam cerca de 70 caracteres por linha, valor dentro da faixa recomendada de 45 a 75.
Que largura devo informar se a caixa tem espaçamento interno?
Informe apenas o espaço que os parágrafos realmente ocupam. Um cartão de 640 px com 32 px de espaçamento de cada lado deixa 576 px, e é essa medida que deve ser verificada.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
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)Exemplo de requisição
{
"font_size": 16,
"column_width": 560
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.reading_column_width_check",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Limites
max_mb | 25 |
max_pages | 200 |
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Como transformar o resultado em uma decisão de layout
A versão no navegador é gratuita; cada solicitação automatizada pela API custa US$ 0,002.
Perguntas técnicas
O que ocorre com fonte zero ou negativa?
A solicitação falha com invalid_input, pois o tamanho da fonte precisa ser positivo.
Quanto custa uma solicitação de API?
Cada solicitação de API custa US$ 0,002; o uso interativo no navegador é gratuito.