Ritmo vertical / grade de linha de base em Web Design

Recentemente, li alguns artigos sobre a importância de um bom ritmo vertical / usando uma grade de linha de base para uma boa tipografia em web design. Decidi tentar usar uma grade de linha de base, como a grade 960 mostrada abaixo, como imagem de fundo para um tema de web design / WordPress no qual estou trabalhando atualmente.

Estou achando muito difícil alinhar tudo corretamente dentro da grade. Consegui colocar tudo dentro da grade vertical no tamanho de texto padrão (16px), mas quando começo a mexer no tamanho dos títulos, adicionando imagens, etc., os itens nem sempre ficam alinhados corretamente na grade.

Gostaria de saber como melhorar minha tipografia usando ritmo vertical. Alguém tem alguma dica ou técnica que devo usar?

A grade da linha de base em web design é um quebra-cabeça acadêmico necessário, mas principalmente impraticável do ponto de vista matemático codificado. Como o CSS não tem um conceito de linha de base para o tipo, é tecnicamente impossível obter linhas de base correspondentes.

Você pode aproximar-se de espaçar as coisas, mas, eventualmente, acaba com algo que pode fazer sentido quando se olha para os números, mas provavelmente está desligado visualmente e acaba se afastando da fórmula para garantir que as coisas pareçam corretas.

Portanto, em resumo, um ritmo visual é importante, mas crie-o a partir do seu intestino, e não de algumas equações que o deixarão mal implementado corretamente na Web.

Como um aparte, observe que o conceito de uma grade de linha de base vem do mundo do design de impressão ... especificamente layouts de várias colunas, como em um jornal onde você deseja que o tipo seja alinhado de uma coluna para outra como preferência. Para facilitar a digitação desse tipo de publicação, uma grade de linha de base faz sentido e é relativamente fácil de implementar no mundo dos aplicativos DTP.

O ritmo vertical não é difícil de implementar, especialmente se você começar com uma redefinição de CSS . Encontrei este link em http://24ways.org/2006/compose-to-a-vertical-rhythm há algum tempo e, desde então, tenho usado a técnica em todos os meus projetos.

O que eu descobri é que, depois de trabalhar com um conjunto "enlatado" de declarações de tipo no meu arquivo CSS (h1 - h6, p, etc. - especificamente, tamanho, altura da linha, margens inferiores), é muito fácil de implantar.

Aqui está uma imagem de fundo que me ajudou a ver as coisas um pouco mais claras ... especialmente quando eu estava usando o ritmo vert pela primeira vez.

Pode ser difícil de ver, mas quando repetido como imagem de fundo: você verá uma grade de 20x20.

HTH

Nota: Gosto da tipografia nos sites que usaram essa técnica melhor do que naqueles que não o fizeram. Nos dois casos, no entanto, sempre parece haver um ou dois elementos que precisam "enganar o sistema" para parecer "certos". Também descobri que prestar atenção à altura geral da linha (digamos 18px para uma base de fonte de 12px) torna a definição de margens e preenchimento em torno de imagens, cabeçalhos gráficos e coisas muito simples (18px). Além disso ... o desejo de calcular tudo desaparece ... você começará a notar um "ritmo vertical" sobre o layout e poderá extrair o preenchimento / margem / altura da linha certos a partir de uma lista muito curta de valores na sua cabeça.

Este artigo muito bom na Smashing Magazine sobre linha de base e ritmo vertical fornece algumas dicas sobre a importância das linhas de base no design da web e como implementá-las em seu css. Ele usa tamanho da fonte, altura da linha, preenchimento e margem nos elementos html padrão para alinhar tudo com a grade da linha de base.

Para ajudar a combinar tudo com a grade, uma imagem de fundo é muito útil, como sugere Dawson.

Eu tenho seguido essa técnica nos meus últimos designs e acho que realmente vale a pena.