Web sites para pessoas, em qualquer lugar ou dispositivo.

 OS MAIS COMENTADOS 

POSTS RECENTES > VOCÊ ESTÁ NO POST:

Ritmo vertical: tipografia é música

por Bruno Barros | Publicado em 21 DEZ 2010
imagem de Ritmo vertical: tipografia é música
Tipografia na Web são as técnicas de tratamento tipográfico já estudadas e utilizadas em projetos de Design, mas aplicadas com as técnicas e linguagem próprias da Web, como “Ritmo Vertical”, que é o alinhamento dos elementos de texto e imagem no ritmo imposto pela entrelinha. Desta forma temos um grid invisível que se bem usado dá unidade e equilíbrio a página, ao contrário de espaçamentos arbitrários que podem causar desorganização.

Projetar Tipografia na Web tem sido um dos trabalhos mais difíceis para os designers. Tipografia na Web não é um título em imagem (JPEG), nem apenas escolher uma bela fonte, pois existem sérias restrições sobre famílias de fontes aceitas em diversos sistemas operacionais e plataformas.

Tipografia na Web são as técnicas de tratamento tipográfico já estudadas e utilizadas em projetos de Design, mas aplicadas com as técnicas e linguagem próprias da Web, como o CSS e as WebFonts. Somando-se a isso as particularidades da leiturabilidade (referente ao conforto no ato de ler) em monitores, renderização de fontes pelos navegadores e questões como acessibilidade.

Uma das formas mais fáceis de trabalhar com fontes na Web é definindo valores absolutos para o corpo e entrelinha (line-height) em pixels (px). O inconveniente desta técnica é que o designer está obrigando a fonte a se comportar de uma determinada forma, e impedindo que usuários com necessidades especiais possam utilizar suas preferências para tornar a leitura mais confortável. Sites que pretendam ser acessíveis devem utilizar as medidas tipográficas com valores percentuais ou relativos.

Tipografia é música. Tem ritmo!

Dentre as técnicas de uso da Tipografia na Web, existe o que chamamos de “Ritmo Vertical”, que é o alinhamento dos elementos de texto e imagem no ritmo imposto pela entrelinha (line-height). Desta forma temos um grid invisível que se bem usado dá unidade e equilíbrio a página, ao contrário de espaçamentos arbitrários que podem causar desorganização.

Exemplo de como o Ritmo Vertical foi usado no blog Design Adaptável.

Estabelecendo os padrões. Qual é a nota?

Por convenção, os navegadores têm como tamanho de corpo padrão 16 pixels. Assim, se definirmos o tamanho do corpo de fonte base (font-size) como 100%, os parágrafos, por exemplo, terão corpo igual a 16px, tags de título como h1 e h2 terão seus corpos iguais a 32px e 24px, respectivamente.

A entrelinha para o texto base tem uma pequena variação de acordo com o motor de renderização, o Gecko (Firefox) e o Webkit (Chrome e Safari) tem entrelinha de 20px e o Trident (Internet Explorer) de 19px.

Pode parecer muito pouco, mas analisando uma grande massa de texto podemos ter resultados bem diferentes na cor da mancha de texto, ainda mais acentuada pela diferença de hinting (instruções matemáticas contidas nas fontes digitais sobre como os sistemas de renderização vão melhorar a aparência da fonte) nos diferentes navegadores.

Exemplo da diferença de renderização de fontes entre os navegadores: Internet Explorer, Firefox, Chrome e Safari


Por isso, é tão importante o uso do css reset para remover os valores tidos como padrão dos navegadores. Existem alguns frameworks bastante utilizados, como: Yahoo reset e Eric Meyer Reset CSS. Eu uso o do Eric Meyer.

Veja a página de exemplo sem o uso do CSS Reset

Antes de aplicarmos as técnicas vamos fazer mais uma alteração em nosso css reset, a fim de facilitar o uso das técnicas de ritmo vertical. Ao usarmos valores relativos (em) temos que fazer cálculos o tempo todo para sabermos qual será o valor em naquele contexto, assim ao invés de fazermos os cálculos com 16px (corpo base) será mais rápida a aplicação desta técnica se o corpo base for 10px. Para isso vamos definir na tag body o parâmetro font-size como 62.5%.

100% = 16px, então 62.5% = 10px (regra de três :-p)

1
2
3
4
5
6
7
/* css reset */
 
body {
 
font-size: 62.5%;
 
}


Fazendo os cálculos e compondo a canção

Para criarmos nosso ritmo temos que definir um intervalo. Este intervalo é baseado na entrelinha, que por sua vez depende do tamanho do corpo do texto base. Como nosso corpo base é 62.5%, ou seja, 10px, a entrelinha não pode ser menor que 10px para não haver choque entre as ascendentes e descendentes dos caracteres. Este valor pode ser escolhido livremente pelo designer e deve ser sinalizado na tag body em unidade em.

No site Design Adaptável eu defini que o corpo do texto corrido será de 14px e a entrelinha 22px, então eu defini que minha “unidade rítmica” será a metade de 22px, ou seja, 11px. Assim, eu tenho um controle mais fino dos espaçamentos. Para isso nosso CSS ficará assim:


1
2
3
4
5
6
7
8
9
/* css reset */
 
body {
 
font-size: 62.5%;
 
line-height: 1.1em; /* 1em = 10px, então 1.1em = 11px */
 
}


Desta forma, atribuir valores em para a tipografia fica da seguinte forma:

CORPO DO TEXTO (px) / CORPO DO CONTEXTO (px) = CORPO DO TEXTO RELATIVO em

Exemplo 1: 12px / 10px = 1.2em

Exemplo 2: 24px / 10px = 2.4em

Dependendo da complexidade com que se organiza a estrutura HTML, pode se tornar bastante complexo o cálculo tipográfico, por isso, planeje e mantenha as coisas simples


A entrelinha não é um valor fixo para todo o site, pois cada tamanho de corpo deve ter uma entrelinha própria para que não haja colisões, e ainda sim, se mantenham no ritmo. No nosso exemplo deve ser múltiplo de 11.

O cálculo para encontrarmos a valor em da entrelinha que manterá a tipografia fluindo no ritmo estabelecido é:

ENTRELINHA BÁSICA (RITMO) (px) / CORPO DO TEXTO (px) = RITMO DA ENTRELINHA em

Exemplo 3: Se o corpo do texto equivale a 14px, ou seja, 1.4em, aplicamos a fórmula:
11px / 14px = 0.7857em

0.7857em neste contexto equivale a 11px. Para que o ritmo seja respeitado nossa entrelinha deve ser múltipla deste valor. Como 11 é um valor inferior ao corpo (14px) vamos multiplicá-lo por 2, resultando em uma entrelinha equivalente a 22px:
0.7857em x 2 = 1.5714em

Nosso estilo de parágrafo ficará assim:

1
2
3
4
5
6
7
p {
 
font-size: 1.4em;
 
line-height: 1.5714em;
 
}


Exemplo de como se trabalhar com tipografia na Web atribuindo o tamanho de fonte padrão como 10px e criando ritmo vertical


Exemplo 4: Para um título com corpo de 24px (2.4em) o cálculo da entrelinha será:
11 / 24 = 0.4583

0.4583em neste contexto equivale a 11px. Para não termos uma entrelinha negativa (inferior a 1em) vamos multiplicá-la por 3:
0.4583 x 3 = 1.3749em

1
2
3
4
5
6
7
h2 {
 
font-size: 2.4em;
 
line-height: 1.3749em;
 
}


Mantendo o ritmo em todos os elementos da banda

Bem, um site não é feito apenas de texto. Temos imagens e espaços entre os elementos criando hierarquias e separações, dando ordem as informações. Para que estes espaços não entrem em descompasso com o ritmo geral do site vamos utilizar a mesma fórmula utilizada para definir a entrelinha.

Exemplo 5: Para definirmos o espaço entre os parágrafos de texto vamos criar um intervalo que seja múltiplo de 11, neste caso 22:

11 (ritmo) / 14 (corpo do texto) = 0.7857em (nossa unidade rítmica)

1
2
3
4
5
6
7
8
9
p {
 
font-size: 1.4em;
 
line-height: 1.5714em;
 
margin-bottom: 1.5714em; /* 2 x 0.7857em = 22px */
 
}

Veja o exemplo da página com a técnica de Ritmo Vertical

Agora o exemplo acima com um grid vertical de referência


Conclusão

A técnica de ritmo vertical sempre foi um instrumento adotado pelos designers gráficos. Na construção de interfaces ela tem um papel importante, pois nos permite dar unidade ao projeto sem usar muitos elementos gráficos, a não ser a própria tipografia.

A utilização desta técnica através de valores relativos (em) permite que o site esteja em conformidade com os padrões de acessibilidade e usabilidade, permitindo também a construção de interfaces adaptáveis.

Para uma maior compreensão veja o vídeo abaixo (em três partes) onde eu exemplifico as técnicas acima citadas construindo um site de exemplo.

Parte 1 de 3 do vídeo de demonstração da técnica de Ritmo Vertical.

Parte 2 de 3 do vídeo de demonstração da técnica de Ritmo Vertical.

Parte 3 de 3 do vídeo de demonstração da técnica de Ritmo Vertical.

Até o próximo artigo!

COMPARTILHE ESTE CONHECIMENTO

  • GALERIA DO POST
  • Galeria #1
  • Galeria #2 Exemplo da diferença de renderização de fontes entre os navegadores: Internet Explorer, Firefox, Chrome e Safari
  • Galeria #3 Dependendo da complexidade com que se organiza a estrutura HTML, pode se tornar bastante complexo o cálculo tipográfico, por isso, planeje e mantenha as coisas simples
  • Galeria #4 Exemplo de como se trabalhar com tipografia na Web atribuindo o tamanho de fonte padrão como 10px e criando ritmo vertical

4 respostas para “Ritmo vertical: tipografia é música”

  1. Kleber Costa disse:

    Bom dia Bruno,

    Muito bom o seu blog, tenho aprendido bastante sobre design adaptável e pretendo adotar esta prática para o meu trabalho. Estava fazendo uma pesquisa a cerca de valores "em" e descobri um site muito bacana que mostra a relação de pixels com em: http://www.pxtoem.com e nele mostra que 1em é correspondente a 16px. Fica ai minha contribuição para que esse blog cresça cada vez mais e continue contribuindo para o conhecimento da galera.

    • webadaptavel disse:

      Fala Kleber!

      Cara, só tome cuidado com essa informação (1em = 16px). Isso é verdade quando deixamos o tamanho base da fonte como o padrão adotado pelos navegadores (16px). No meu caso eu adoto o tamanho base como sendo 62.5%, ou seja, 10px. Por isso, nesse caso, 1em = 10px.

      Faço isso para tornar as converções de "px" para "em" mais fácil.

      Bacana o site que você indicou. Com a prática eu acostumei a fazer os cálculos na mão, pois os valores são sempre relativos ao contexto, e as vezes o valor base da fonte em um determinado contexto é diferente da fonte base (body).

      Abraços!

  2. @magoopv disse:

    Muito bom Bruno…excelente tutoriaMuito bom Bruno…excelente tutorial
    Vou tentar aprender essa técnica e fazer alguns testes para conseguir implementar no meu cotidiano rsrs..
    Ajuda bastante não só para acessibilidade mais como também no desing ;-)

    abrcs e continue trazendo materiais de qualidade

Deixe uma resposta