Baseline, o ritmo vertical na web

O que é o ritmo vertical

Antes de avançar para a definição do conceito de ritmo vertical convém perceber que o ritmo é um padrão, uma repetição no tempo e/ou no espaço e tal como o percebemos na música também existe no design e quanto mais consistente é o padrão, melhor é o ritmo.

O ritmo vertical é constituído por linhas base (baseline) distribuídas uniformemente por toda a altura da página e são estas as responsáveis pela definição dos alinhamentos utilizados nos conteúdos apresentados na página.

Utilização de grelhas auxiliares em web design

No design para a web, a utilização de colunas é uma prática comum, tanto para programadores como para designers, e permitem definir e antecipar alguns comportamentos da página em relação às variadas dimensões dos ecrãs utilizados.

A conjugação das linhas verticais e horizontais formam uma grelha e esta é utilizada para garantir um design coerente com um ritmo consistente.
Da mesma forma que utilizamos colunas como guias para a construção gráfica e distribuição dos elementos numa página, também se recorre à baseline para efectuar o correcto alinhamento vertical dos textos, imagens e demais elementos.
Torna-se então imprescindível a utilização de uma grelha na composição de layouts para a web, seja para limitar o tamanho e o posicionamento dos objetos ou para definir o alinhamento destes.

A tipografia e o ritmo vertical

A tipografia é um dos elementos mais comuns e com maior importância numa página web (deixemos de parte as imagens) e é através da tipografia que grande parte do conteúdo chega até ao utilizador. É também através da tipografia que o ritmo vertical de um layout melhor se expressa.

A repetição da baseline definida pelas linhas horizontais das manchas de texto marcam o ritmo da composição gráfica e auxiliam o leitor a orientar o olho durante a leitura.

Importância da baseline

Para perceber a importância da baseline podemos recorrer a uma simples analogia –  imaginem-se a descer umas escadas em que cada degrau tem a sua própria altura. A simples tarefa de deslocar o pé para um novo degrau torna-se numa tortura pois somos incapazes de prever com exactidão onde o nosso pé assentará no passo seguinte.

O mesmo acontece durante a leitura, é importante, que a baseline do texto tenha um padrão constante, fornecendo dados ao olho para que este se desloque correctamente no layout. A consistência da altura em cada linha resulta numa leitura mais confortável e num layout mais equilibrado e harmonioso.

Como definir a baseline

O espaçamento vertical da baseline varia em função da formatação de um parágrafo (fonte, tamanho, espaçamento da letra e altura de linha) mas é a altura de linha deste que define o valor de espaçamento entre as linhas horizontais que compoêm a grelha vertical (baseline).
Vimos então que a altura da linha é um dos factores mais importantes para uma boa definição do ritmo vertical o que faz com que a selecção do tipo de letra a usar e a formatação prévia do parágrafo sejam fundamentais para a criação de um bom ritmo vertical.

Conclusão

Para a correta definição do ritmo vertical do layout devemos começar por selecionar o tipo de letra a usar e, no programa de edição de imagem ou directamente através de HTML e CSS, criámos uma mancha de texto e efetuamos todos os ajustes necessários até que esta mancha se apresente conforme o desejado, garantindo sempre a melhor experiência de leitura possível.
Após a formatação final do corpo de texto chega a vez de criar a grelha vertical que nos servirá como auxílio ao alinhamento de todos elementos a disponibilizar.

As guias horizontais devem então ser distríbuidas verticalmente com uma distância igual à altura de linha obtida anteriormente. As baseline em conjunto com as colunas criam a grelha de auxiliar onde todo o layout acentará – pessoalmente, gosto de dividir a altura da linha por dois e criar uma linha intermédia entre baselines a fim de aumentar o nível de detalhe do layout.

Tags:
Nelson Alves
nelsonalves@nqda.pt

UI/UX designer @ NQ Digital Agency, víciado na web e apaixonado pelo design de interacção, tipografia, fotografia e um verdadeiro apreciador do mundo natural.