Também disponível em: English · Español · Français · العربية
Calculadora de entrelinha CSS
Calcula o line-height que cada tamanho de fonte realmente recebe depois da herança, marcando os tamanhos em que suas linhas começam a se sobrepor.
O que é line-height no CSS?
Entrelinha é a distância entre as linhas de base de duas linhas de texto seguidas. No CSS você pode escrever isso de quatro jeitos — um número puro como 1,5, uma porcentagem como 150%, um comprimento como 24px ou uma unidade relativa à fonte como 1.5em — e no elemento onde você declara, os quatro podem dar exatamente o mesmo resultado. Numa raiz de 16px, todos dão 24px.
Eles deixam de ser a mesma coisa assim que algo os herda, e a diferença não é uma esquisitice de navegador: está escrita na especificação. O CSS 2.2 define o valor calculado do line-height como o valor especificado quando é um número, e como o valor absoluto quando é um comprimento ou porcentagem. Então um número é herdado como número e cada descendente multiplica pelo próprio tamanho, enquanto todo o resto é herdado como um comprimento fixo que nunca mais muda.
Esta calculadora de entrelinha põe isso em números. Informe seu tamanho raiz, a declaração que você realmente escreveu e os tamanhos de fonte da sua página, e ela mostra com o que cada um fica — ao lado do que o equivalente sem unidade teria dado.
Como usar
- Digite seu tamanho raiz e a entrelinha que você escreveu. O valor e a unidade são controles separados, então dá para manter o número parado e trocar só a unidade. É o jeito mais rápido de ver do que trata a página inteira.
- Liste os tamanhos de fonte que aparecem na sua página. Títulos, legendas, tudo que não estiver no tamanho raiz. Os padrões são uma escala tipográfica comum, então pode deixar como está para ver o formato do problema.
- Olhe a coluna da proporção e depois troque a unidade para sem unidade. Toda linha marcada como se tocando tem uma caixa de linha que não supera o próprio texto. Ao passar para um número puro, cada linha é recalculada contra o próprio tamanho e as marcas somem.
Por que 150% e 1,5 não são a mesma coisa
Pegue os padrões da página: uma raiz de 16px com line-height: 150% e uma escala tipográfica de 16, 20, 25, 31, 39, 49 e 61 pixels. A porcentagem se resolve uma única vez, contra a raiz, dando 24px. Os sete tamanhos então herdam 24px — não 150% de si mesmos, e sim 24 pixels cravados.
Em 16px isso é uma proporção de 1,5, que é o que você pediu. Em 25px é 0,96, e uma proporção abaixo de 1 significa que a caixa de linha é mais baixa que o texto dentro dela, então linhas seguidas se sobrepõem de verdade. Em 61px a proporção é 0,39: o título continua recebendo 24 pixels de caixa de linha para um texto de 61 pixels de altura. Cinco dos sete tamanhos ficam em 1,0 ou abaixo, e seis dos sete ficam abaixo do 1,5 que o critério 1.4.12 da WCAG pede para texto de parágrafo.
Escreva 1,5 sem unidade e nada mais muda: 16px recebe 24px, 25px recebe 37,5px e 61px recebe 91,5px. Toda linha é 1,5. Nada se sobrepõe, porque cada elemento faz a própria multiplicação.
Existe um ponto exato onde o problema começa, e não é preciso medir. A proporção herdada é o comprimento calculado dividido pelo tamanho do próprio elemento, então ela passa por 1 justamente quando o tamanho da fonte iguala a entrelinha calculada, e em nenhum outro lugar. No que a sua porcentagem virar em pixels, esse é o tamanho de fonte em que suas linhas começam a colidir.
O que faz isso passar por uma revisão de código é que as duas declarações são de fato indistinguíveis onde você as escreveu. Varrendo todos os tamanhos descendentes de 8px a 96px, 1,5 e 150% concordam em um único tamanho — a raiz — e discordam nos outros 176. O texto do corpo parece certo, então a declaração parece certa.
Limites assumidos
A unidade em é um comprimento, então aqui ela se comporta exatamente como uma porcentagem, e rem também é um comprimento. Elas diferem só no que usam como referência: em e porcentagem usam o tamanho de fonte do elemento que as declara, enquanto rem sempre usa a raiz. Se você declara na raiz — que é onde essas coisas costumam ficar — as três colapsam no mesmo número, e é exatamente por isso que a distinção passa batido com tanta facilidade.
Esta ferramenta modela a herança, não a renderização. A caixa de linha real de um navegador depende também das métricas de ascendente, descendente e entrelinha da própria fonte, então duas tipografias no mesmo tamanho e com a mesma entrelinha não produzem o mesmo espaçamento. As proporções aqui são as que o CSS calcula; a tinta é outra questão e depende do arquivo da fonte.
O número 1,5 vem do critério de sucesso 1.4.12 da WCAG 2.1, que pede que o usuário consiga ajustar a entrelinha para pelo menos 1,5 vez o tamanho da fonte em blocos de texto. É sobre parágrafos, não sobre títulos, então um título grande abaixo de 1,5 não é automaticamente uma falha — e é por isso que a ferramenta conta essas linhas separadamente daquelas em que as linhas realmente se tocam.
Por fim, uma proporção acima de 1 não é automaticamente confortável. 1,05 passa no teste de sobreposição e continua sendo ruim de ler. A marca de colisão é um piso, não uma recomendação.
Por que é grátis?
É aritmética, e roda no seu navegador. Não há servidor fazendo o trabalho, então não há nada para cobrar nem conta para criar.
Nada é enviado e nada é guardado. Recarregue a página e ela terá esquecido os seus ajustes.