Calculadora de Tamanho Grids Baseline Tipografia

Grid de baseline tipográfica

Um grid de baseline nada mais é do que 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 anda de 24px em 24px. Encaixe cada elemento de texto nessas linhas e some o efeito de “swimming”, aquele em que as colunas desencaixam verticalmente.

A técnica nasceu no design de livros, e Robert Bringhurst a registrou em The Elements of Typographic Style. No Adobe InDesign, o baseline grid aparece pelo botão Alinhar ao Grid de Linha de Base. No CSS moderno dá para reconstruir a mesma coisa com display: grid e grid-template-rows: repeat(auto-fill, 24px), ou apelar para o truque do line-height: calc(var(--baseline) / var(--font-size)).

Aplicações

Compensa em layouts editoriais, artigos long-form de várias colunas, relatórios em PDF e dashboards cheios de cards lado a lado. Cada parágrafo, título e imagem começa na mesma altura entre as colunas, o que dá calma visual e faz a página parecer diagramada por gente do ofício.

FAQ

Que valor de baseline usar? Parta do line-height do corpo em pixels, normalmente 24px para 16/1,5 ou 28px para 16/1,75. A partir daí, mantenha todo line-height do projeto como múltiplo desse número.

Títulos precisam encaixar no grid? Precisam. Arredonde o line-height de cada um para o múltiplo mais próximo do baseline, de modo que um h1 em 32/40 ocupe duas unidades de 20px. É isso que segura o ritmo mesmo quando os tamanhos variam.

Ainda vale na web? Vale, e muito. Entre CSS Grid e custom properties, montar um baseline grid ficou mais fácil do que nunca, e ferramentas como Gridlover e Modularscale entregam CSS pronto que ancora o texto no lugar.