Calculadora de Tamanho Grids Baseline Tipografia

Grid de baseline tipográfica

Um grid de baseline é um conjunto de linhas horizontais igualmente espaçadas, com a distância entre elas igual ao line-height do corpo: baseline = font-size × line-height. Com corpo 16px e line-height 1,5, o grid avança a cada 24px. Alinhar cada elemento de texto a esse grid elimina o efeito de “swimming” em que as colunas desencaixam verticalmente.

A técnica vem do design de livros e foi codificada por Robert Bringhurst em The Elements of Typographic Style. O Adobe InDesign expõe o baseline grid através do botão Alinhar ao Grid de Linha de Base; no CSS moderno reproduzimos com display: grid e grid-template-rows: repeat(auto-fill, 24px) ou pelo truque do line-height: calc(var(--baseline) / var(--font-size)).

Aplicações

Layouts editoriais, artigos long-form em múltiplas colunas, relatórios em PDF e dashboards com cards lado a lado todos se beneficiam: cada parágrafo, título e imagem começa na mesma linha horizontal entre colunas, gerando calma visual e dando ar de página profissionalmente diagramada.

FAQ

Que valor de baseline usar? Comece pelo line-height do corpo em pixels (em geral 24px para 16/1,5 ou 28px para 16/1,75). Todo line-height do projeto deve ser múltiplo desse valor.

Títulos precisam encaixar no grid? Sim — arredonde os line-heights para o múltiplo mais próximo do baseline (ex: h1 em 32/40 ocupa duas unidades de 20px). Isso preserva o ritmo mesmo com variação de tamanho.

Ainda vale na web? Vale muito. CSS Grid e custom properties tornam o baseline grid mais fácil que nunca, e ferramentas como Gridlover e Modularscale geram CSS pronto que ancora o texto ao grid.