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?
fonte
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.
fonte
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.
fonte