Ritmo vertical / grade de linha de base em Web Design


9

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.

960 grid

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?

Respostas:


7

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.


2
Exatamente - você está misturando maçãs e orangotangos. É como tentar obter a capa de um livro de bolso para reproduzir um vídeo em Flash. A menos que você faça tudo como uma imagem e todo o site seja um JPG com mapas de imagens, isso simplesmente não acontecerá.
Lauren-Clear-Monica-Ipsum

Não é tão difícil fazer com que o css e o html correspondam à grade 960. Afinal, a codificação é simplesmente matemática. Além disso, basicamente todos os designers de (por exemplo) themeforest.net o usam. Não é tão difícil quanto você diz. E sim ... o conceito de grade vem do mundo da impressão. No entanto, o sistema de grade 960 é convertido para a Web para corresponder a uma resolução mínima de 1024x768.
Luuk

2
a grade 960 é principalmente para a criação de grades horizontais e algo que eu recomendo em sites de tamanhos moderados. É uma ferramenta muito útil. No entanto, estamos falando de uma linha de base do tipo vertical. Sim, codificar é matemática. Infelizmente, os navegadores e as especificações de CSS não fizeram nenhuma acomodação específica para descobrir linhas de base de formas de letra. Você pode equilibrar isso com a sua matemática, mas está à mercê de navegadores individuais, sistemas operacionais, fontes instaladas e preferências do usuário; portanto, não é de forma alguma 'matemática simples' fazer com que o aspecto da grade do tipo de linha de base funcione.
DA01 20/09

Além disso, o design nem sempre é pura matemática. De fato, raramente é matemática pura. A matemática nos leva a um ponto, mas, além disso, o julgamento estético do olho precisa se encaixar. Criei sites usando um sistema de grade de linha de base tanto para mim quanto para outros designers e, na maioria das vezes, temos que desfazer a grade de linha de base no final para fazê-la parecer correta. Decidi que, por causa disso, geralmente é um esforço desperdiçado fazer com que a grade da linha de base funcione, pois geralmente é uma coisa arbitrária.
DA01 20/09/11

11
Hmm, minha falta de leitura;) Eu não percebi que é apenas sobre o ritmo vertical. Eu tenho que concordar que eu também não uso realmente a 960gs para o ritmo vertical. Somente para horizontal. A única coisa que eu uso verticalmente é "a dobra". O resto eu alinhar (mais uma vez na vertical) pelo "olho".
Luuk

4

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.

insira a descrição da imagem aqui

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.


2

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.