Ritmo Vertical

Ritmo Vertical na Tipografia

Por que o ritmo vertical é uma prática importante para a tipografia?

Se você já pesquisou um pouco sobre tipografia na web, com certeza já ouviu falar em ritmo vertical (ou espaçamento vertical). Quem tem experiência com tipografia com certeza sabe da importância da propriedade line-height no CSS e por isso sabe do impacto que ela tem em um parágrafo, frase ou até mesmo um simples botão.

O que é ritmo vertical?

Ritmo vertical é um conceito que originalmente veio da tipografia impressa. Nele nós tentamos manter os espaços verticais consistentes entre os elementos de uma página.

Basicamente, quando se trabalha com materiais impressos, utiliza-se uma grid para delimitar os espaços verticais, como na imagem abaixo:

Ritmo vertical de tipografia impressa
Ritmo vertical de tipografia impressa

Já os espaços verticais da tipografia na web funciona de um modo diferente, sendo definida pela propriedade CSS line-height e visualmente ela se comporta desta forma:

Ritmo vertical de tipografia web
Ritmo vertical de tipografia web

Mesmo parecendo diferentes, o princípio do ritmo vertical se mantém aplicado nas duas grids. Desse modo, já se sabe que esta técnica necessita de uma grid base, mas afinal, como a determinamos?

Fácil! Nós a determinamos pela propriedade line-height do corpo do texto. No exemplo acima eu apliquei uma line-height de 24px, ou seja, sua grid é de 24px.

Implementar o ritmo vertical a partir deste ponto é simples, só precisamos de duas regras:

Defina o espaçamento vertical entre os elementos com múltiplos de 24px.
Defina a line-height de todos os textos com múltiplos de 24px.

Abaixo um exemplo de como as duas regras devem ser aplicadas:

Seguindo essas simples regras, o resultado é este:

Antes e depois de aplicar o ritmo vertical.
Antes e depois de aplicar o ritmo vertical.

Qual aplicação parece melhor? Melhor em coisas como: organização, harmonia, facilidade de leitura, fluidez, mais profissional…?

Certo, mas o que faz essas duas regras serem tão poderosas e imediatamente mudar o modo de percepção entre os dois simples designs?

Olhando novamente para as regras, note que há algo em comum, os múltiplos de 24px.

Essas duas regras possuem conexão com um princípio básico do Design chamado de Repetição.

O princípio da repetição

Repetição é simplesmente repetir um ou mais aspectos de um design. Por exemplo: tipografia, peso da fonte, tamanho da fonte, cor, bordas, linhas, formas, botões e afins…

Você pode até mesmo repetir espaços brancos, como o exemplo do ritmo vertical que demonstrei, estou repetindo o espaço de 24px por toda a página.

Mas então o que a repetição faz?
Repetição gera familiaridade! Ela tem a capacidade de fazer as coisas pareçam pertencer uma a outra, dando a sensação de que alguém pensou em tudo aquilo, como se fosse parte do plano.

Tome como exemplo um único círculo no meio de nada:

Ponto verde

O que este círculo está fazendo aí? O que deveria significar? O que o designer está querendo dizer?

Você começa a pensar, tentando encontrar algo coerente para responder às suas perguntas, mas infelizmente, você não encontra nada.

Então, o que acontece se você adicionar mais círculos ao grupo?

Conjunto de 15 círculos verdes alinhados em 3 filheiras

O círculo agora não parece mais estar fora de lugar, parece? Não parece mais ordenado agora? E se você adicionar ainda mais círculos ao grupo?

65 círculos verdes alinhados em 5 filheiras

Agora começa a parece uma pattern, não?

Agora como você se sente ao olhar para esta imagem? Como ela se compara com as duas imagens anteriores?

Parece quando você compara o antes e depois do ritmo vertical, não é?

Sim! Mas por que?
Por que sua mente subconscientemente estabeleceu uma resposta. Você vê que estes círculos são parte de um plano. Alguém estabeleceu isto com cuidado. Está tudo lá por uma razão. Você pode não necessariamente saber a razão, mas você sabe que está lá. Você se sente mais seguro agora. É por isso.

O ritmo vertical trabalha pela mesma razão. Nós estamos simplesmente repetindo mesma base por toda a página ou layout.

Há um truque com o ritmo vertical. O truque consiste na determinação da linha de base. Pense nisso. Por que, de todos os números, nós escolhemos 24px como nossa linha de base?

Há apenas uma razão: é o valor que se repete na página.

Dê uma olhada na grid base novamente. Observe o que você vê agora:

Simples, não?

Mind blowing

Agora que sabemos o que é o princípio da repetição, como podemos aplicá-lo para o resto do nosso projeto? Repita mais! Você pode também variar as repetições.

Variando repetições

Não podemos separar tudo por 24px. Vai ser uma m&rd@. Precisamos jogar em algumas variações em algum lugar. Mas como?

A resposta pode ser encontrada dentro das duas regras do ritmo vertical:

Defina o espaçamento vertical entre os elementos com múltiplos de 24px.
Defina a line-height de todos os textos com múltiplos de 24px.

Você pode multiplicar 24px com qualquer proporção que desejar. A chave é manter a coerência. Como já estamos utilizando a base de 24px, trabalharemos seus múltiplos para não quebrar o entendimento do artigo.

Aplicando este processo de multiplicação e você eventualmente acabará com uma escala de 12px, 24px, 36px, 48px, 60px, 72px e assim adiante…

Usando qualquer um desses números como uma margin ou padding para qualquer elemento e o conceito do ritmo vertical será aplicado devidamente, fazendo com tais elementos participem de forma harmônica de seu design.

O título possui um margin-top de 72px ao invés de 24px
O título possui um margin-top de 72px ao invés de 24px

Conclusão

O ritmo vertical é importante porque segue um dos princípios de design, a repetição.

Repetição tem a capacidade de fazer as coisas parecerem pertencer umas as outras. Ela dá a sensação de que alguém tenha pensado em tudo, como se fosse parte do plano.

Depois de descobrir a ligação entre ritmo vertical e repetição, fui percebendo várias maneiras de replicar a grid e trabalhar suas variações dentro de meus designs.

Caso tenha interesse em estudar mais sobre assunto, separei três links para se aprofundar. Orientação de design para iOS, métricas e pontos-chaves do Google e por último, um excelente artigo de como compor ritmo vertical.

Published by

Felipe Dutra

Oi! Meu nome é Luiz Felipe Dutra de Toledo, tenho 27 anos e trabalho há 7 como designer. Meu foco é criar soluções e experiências inteligentes por meio do design e interação.

Leave a Reply

Your email address will not be published. Required fields are marked *