Tipografia em grade para web

A tipografia é parte essencial de qualquer projeto gráfico, muitas vezes, sozinha ela é a personagem principal. Para a web, ela tem um fator determinante pois além do conteúdo em si, existe o agravante da diferença de equipamento/configuração/programa que o leitor está utilizando

Trabalhar a tipografia das páginas para facilitar a leitura (usabilidade) principalmente em textos/matérias é fundamental para tornar a experiência do usuário agradável. Uma das técnicas facilitadoras é utilizar grades para modular as partes do texto, fazendo com que o conteúdo textual flua mais harmoniosamente.

Vamos exemplificar, utilizando as tags H1, H2 e P, e dividir nossa grade em espaços de 18 px. Utilizaremos uma imagem de fundo na página para nos guiar.

A melhor unidade de medida para se trabalhar com tipografia para web, é o em, unidade relativa à largura do caracter M. Iniciaremos com a padronização das características tipográficas dos elementos de nossa página, configurando a tag Body (que por default da maioria dos browsers vem em 16px) para 10px (62.5% * 16px):

body {
     font: 62.5% "Trebuchet MS";
     background: url(gridbg.gif);
}

Dessa forma, se eu definir alguma propriedade para ter 1em, significa 10px, 1.2em, 12px, e assim por diante. Isso facilita principalmente para nós, brasileiros, que trabalhamos com a unidade métrica. O objetivo agora é configurar nossas tags para que elas fluam em nossa grade de 18px, certo? Vamos lá.

Configurando a tag P

Nossa grade está dividida de 18px em 18px, certo? Mas 18px para um texto de parágrafo é muito grande não é mesmo? 12px seria um valor interessante, vamos usá-lo então. Além do font-size, precisamos configurar também o leading (entrelinhamento), para isso configuraremos a propriedade line-height. Para calcular o valor correto basta fazer a conta, dividindo o valor da grade pelo tamanho do texto (18÷12=1.5):

p {
     font-size: 1.2em;
     line-height: 1.5em;
}

Depois, podemos incrementar os parágrafos para que cada bloco tenha um espaço (margem) entre si. Iremos aplicar uma linha de espaço no topo e uma linha na base:

p {
     font-size: 1.2em;
     line-height: 1.5em;
     margin-top: 1.5em;
     margin-bottom: 1.5em;
}

Configurando a tag H1

Utilizando a mesma lógica, partimos primeiro da escolha do tamanho da fonte. Para essa tag vamos usar 18px, logo 1.8em. Fazendo a divisão para encontrar o leading, utilizaremos 1em (18÷18=1) para essa propriedade:

h1 {
     font-size: 1.8em;
     line-height: 1em;
}

Para a configuração das margens, se cada linha tem 1em, logo, temos 2ems para distribuir nas margens (topo e base). Podemos fazer como na tag P, de forma igual, simétrica, ou assimétrica, conforme abaixo. Isso é muito útil para títulos e subtítulos.

h1 {
     font-size: 1.8em;
     line-height: 1em;
     margin-top: 1.5em;
     margin-bottom: 0.5em;
}

Configurando a tag H2

Para a tag H2 (e demais tags H), a lógica continua, escolhemos o tamanho da fonte, depois o leading e por fim distribuímos as margens. Escolhemos 14px para o texto, logo 1.4em na propriedade font-size. Para o line-height, vamos às contas (18÷14=1.286em) e para as margens temos um total de 2.572em para distribuir, no caso abaixo, de forma assimétrica.

h2 {
     font-size: 1.4em;
     line-height: 1.286em;
     margin-top: 1.929em;
     margin-bottom: 0.643em;
}

Exemplificando

Veja a página de teste com o fundo de grade para ajudar na visualização. Observe que todos os elementos fluem na grade de 18px. Notem também que, devido ao uso de margens assimétricas, os elementos variam entre o meio da grade e a grade cheia, mas o importante é que todos os elementos estão modulados na grade e não simplesmente distribuídos sem qualquer relação/proporção. Isso garante mais harmonia ao texto e seus elementos.

Comente esse artigo comente este artigo