o que a fonte São ritmo Vertical e escala Modular?

qualquer pessoa que tenha ouvido falar de mim provavelmente ouviu minhas divagações sobre guias de estilo, e grande parte disso ultimamente tem estabelecido um ritmo vertical e usado uma escala modular. Mas de que Fonte estou falando? Neste artigo, vou explicar por que você deve se preocupar com ritmo vertical e escala modular, defini-los e terminar com uma demonstração de como integrá-los em seu próximo projeto.

Por Que Devo Me Importar?Eu queria começar com isso primeiro porque sinto que é benéfico entender o problema que estamos tentando resolver e a importância do ritmo vertical e da escala modular como partes de uma solução geral. Toda a razão pela qual este artigo está em ritmo vertical e escala modular é porque ambos contribuem para a harmonia visual de uma página. O ritmo Vertical engaja e orienta o leitor para baixo da página, o bom ritmo vertical torna um layout mais equilibrado e bonito, e seu conteúdo mais legível. A escala Modular fornece números ressonantes usando proporções culturalmente relevantes e historicamente agradáveis e incentiva a repetição ponderada. A repetição gera familiaridade e reforça um padrão que ajuda o usuário a entender o conteúdo e o layout. O exemplo anterior abaixo está usando os tamanhos de fonte padrão do navegador e as alturas das linhas, enquanto o exemplo posterior mostra como esse mesmo conteúdo mudou ao aplicar os conceitos que estou apresentando abaixo.

Antes e Depois de aplicar os conceitos de ritmo vertical e escala modular

Vertical Ritmo

Vertical ritmo é o espaçamento e arranjo de texto como o usuário desce a página. Ritmo Vertical . É contribuído por três fatores; Tamanho da fonte, altura da linha e margens verticais ou preenchimento. A unidade básica do espaço vertical é a altura da linha-normalmente a altura da linha da cópia do corpo, pois esse será o conteúdo dominante em qualquer página. Para ilustrar, vou pegar exemplos de um site recente em que tenho trabalhado. No início do projeto, recebemos designs que usam fonte Open Sans 15px com uma altura de linha de 25px. Portanto, neste exemplo abaixo da unidade base de ritmo vertical seria 25px.

Vertical Ritmo de Altura da Linha exemplo

Vertical Ritmo de Altura da Linha exemplo

Com a nossa unidade de base descobri, precisamos agora de garantir que é mantida ao longo de todo o corpo de cópia. Um lugar comum para perder o ritmo está nas lacunas de margem definidas entre os elementos do nível do bloco. O tratamento padrão do navegador de parágrafos é inserir uma margem superior e inferior de 1em e chamá-lo de um dia. Isso não é ideal se o ritmo for mantido, em nosso exemplo abaixo isso significaria que as margens seriam 15px em vez do 25px que precisamos. Também vale a pena notar que fontes diferentes têm diferentes alturas de linha embutidas nelas, causando espaçamento visualmente inconsistente. Portanto, margens e alturas de linha precisam ser redefinidas.

Um exemplo mostrando as lacunas de margens entre nível de bloco de elementos

Um exemplo mostrando as lacunas de margens entre nível de bloco de elementos

Essa é uma prática comum hoje em dia, mas eu queria note que é sempre melhor começar as coisas no nível do campo de jogo, precisamos certificar-se de todas as verticais de medições, incluindo a altura da linha, preenchimento e margens de reposição de um cross-browser compatível forma. Com esse campo de jogo nivelado, poderemos definir esses valores conforme necessário, mantendo o ritmo. Eu usei o Normalize.css, bom ol ‘ Redefinir CSS de Eric Meyer, e até mesmo o seguinte bloco com sucesso. O que você escolher dependerá das necessidades de seus projetos.

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p, blockquote,th,td { margin:0; padding:0; }

com qualquer site, deve haver algumas variações nos tamanhos de texto para elementos como manchetes e citações de bloco, todos esses tamanhos de texto diferentes também devem ocupar múltiplos da unidade base. Continuando nosso exemplo, isso significaria que cada desvio do tamanho do texto do parágrafo ainda deve levar múltiplos de 25px. É aqui que começa a verdadeira diversão, ajustando a altura da linha e a margem desses elementos de acordo. Vamos mergulhar em mais detalhes sobre isso na última seção sobre como integrar esses conceitos em seus projetos.

Ilustração de múltiplas variações no tamanho do texto

Ilustração de múltiplas variações no tamanho do texto

Modular Escala

Modular escala é uma seqüência de números que se relacionam de uma forma significativa.

“uma escala modular, como uma escala musical, é um conjunto pré-arranjado de proporções harmoniosas.”

-Robert Bringhurst,

você começa com uma proporção e um número. Como o ritmo Vertical, a melhor maneira de garantir a eficácia do seu número inicial é usar a cópia do corpo. Como isso está definindo a escala, queremos usar seu tamanho de fonte em vez de sua altura de linha. Continuando com o mesmo exemplo de antes, usaríamos 15px como nosso número base. A proporção é mais difícil de encontrar, mais comuns são a proporção áurea (1,618) e a quarta perfeita (1,333). Ambos são culturalmente relevantes; o primeiro sendo um favorito na matemática clássica grega e renascentista, arquitetura e arte, e também encontrado na natureza; o último era popular na música do início do século XX. Uma boa regra é considerar quanta variedade tipográfica e de layout você precisa. Se você precisar de etapas para todos os seis cabeçalhos, provavelmente desejará escolher uma proporção que permita mais sutileza entre as etapas.

na web, usar uma escala modular significa escolher números da escala para tamanhos de tipo, alturas de linha, Comprimento da linha (a largura de uma linha de cópia), margens, largura da coluna e muito mais.

com uma proporção e um número escolhidos, você pode multiplicá-los e dividi-los para obter muitos números ressonantes. Abaixo, está uma lista de ressonância números, nós tínhamos de usar o 15px base e a “proporção dourada” de 1:1.618 para a multiplicação/divisão, eu estou usando o super útil modularscale.com site para fazer esses cálculos para mim e me mostrar visualmente que a seqüência resultante parece.

Um exemplo de modular escala aplicada com a Razão de Ouro

Um exemplo de modular escala aplicada com a Razão de Ouro de modularscale.com

o Que isso fez foi tirar o número inicial de 15 e

  • Multiplicá-lo pela razão de ouro de 1.618 para obter de 24,27
  • a seguir, que multiplicado por 1.618 para obter 39.269, e assim por diante
  • também dividido 15 por 1.618 para obter 9.271
  • , em Seguida, dividido que por 1.618 para obter 5.73 e assim por diante

, Para fins de comparação, abaixo é o mesmo 15px base e a “Quarta Perfeita” proporção de 1 para 1,333 mencionado anteriormente. Como você pode ver, essa proporção tem mais sutileza entre as etapas do novo conjunto de cálculos. Como a proporção é menor, os passos entre a escala estão mais próximos e mais sutis.

Um exemplo de modular escala aplicada com a Quarta Perfeita Relação de

Um exemplo de modular escala aplicada com a Quarta Perfeita Relação de modularscale.com

Você também tem a opção de definir um segundo da base de dados de número e proporção de gerar o que é chamado de double-stranded modular escala. Isso combina dois conjuntos de números ressonantes para fornecer mais opções de medição que preenchem as lacunas da primeira escala. Para o segundo número base, vi pessoas usarem texto de legenda menor e números maiores, como a largura de uma coluna na grade de 12 colunas que estão implementando. Contanto que seja um número “importante” para o layout, não há resposta errada. Veja como seria adicionar uma segunda base de 95px (o tamanho de uma coluna em um layout de 1140px de largura).

um exemplo de escala modular aplicada com a proporção áurea e dois números de base

um exemplo de escala modular aplicada com a proporção áurea e dois números de base de modularscale.com

óptimo! Agora temos muito mais opções para trabalhar!

Lição de História

Um metal de classificação ilustração
Um tipo de caso, onde o metal tipos foram armazenados em pequenos compartimentos de gavetas

A origem do estabelecimento tipográfico escala veio tanto da necessidade prática como estética julgamento. Quando a impressão era feita via tipografia, o tipo móvel era composto manualmente para cada página usando tipos de metal fundido (canto superior direito). Era impraticável fabricar e armazenar conjuntos de caracteres inteiros de cada tipo de letra em todos os tamanhos possíveis. Com o tempo, os tipógrafos se estabeleceram em uma gama utilizável de tamanhos que funcionavam harmoniosamente juntos.

Cartas Bônus foram organizadas e armazenadas em pequenos compartimentos de gavetas (canto inferior direito) em uma caixa de tipo. As letras maiúsculas eram tradicionalmente armazenadas em uma gaveta separada, ou caso colocado acima do caso segurando as outras letras. Esta é a origem dos Termos “maiúsculas” e “minúsculas”.”

Semelhanças e Diferenças

Agora vamos ir rapidamente sobre algumas semelhanças e diferenças entre o Vertical, o Ritmo e a Escala Modular

Como mencionado no início, este artigo inclui tanto vertical ritmo e modular escala, porque ambos estão inter-relacionados e contribuem para a harmonia visual de uma página. Tanto o ritmo vertical quanto a escala modular costumam usar a cópia do corpo primário para seus números básicos iniciais.

onde eles diferem mais está em sua aplicação-o ritmo vertical se preocupa apenas com a tipografia, onde a escala modular fornece um conjunto de números ressonantes para usar para tipografia, colunas, comprimentos de linha, etc. Outra diferença fundamental é o quão rigorosos eles devem ser seguidos. Com o ritmo vertical, quanto mais consistentemente você seguir o padrão, melhor será o ritmo. Por outro lado, a escala modular é mais uma ferramenta que pode ser improvisada conforme necessário. A citação abaixo é em referência à matemática envolvida com escala Modular.

“a matemática não substitui o olho de um designer experiente, mas pode fornecer dicas e restrições para a tomada de decisões.”

– Tim Brown,

integração

espero que agora eu tenha convencido você de que essas metodologias são benéficas e valem o seu tempo para implementar porque tenho duas más notícias.

primeiro, uma suposição generalizada é: “Posso conectar alguns números a um gerador e tudo funciona!”Embora existam ferramentas on-line que ajudam com muita matemática e adivinhação, ainda haverá alguma tentativa e erro. Cada projeto é diferente, então uma solução perfeitamente viável para um não é necessariamente adequada para outro.Segundo, todos os materiais que encontrei online relacionados a esses tópicos vieram da mentalidade de design ou design-dev, onde a pessoa que determina a escala modular e o ritmo vertical é a responsável por tomar essas decisões tipográficas. No nosso caso, na maioria das vezes, recebemos designs que precisam ser convertidos de Sketch/PSD para web.

mas há esperança! Em meus projetos mais recentes, tomei com sucesso o que foi fornecido por uma equipe de design e fui capaz de trabalhá-los em um ritmo e escala que se encaixam nas diretrizes mencionadas até agora, mantendo também a integridade do design. O truque é colocar os cálculos o mais próximo possível e configurar uma página de exemplo que ilustra claramente os benefícios antes de entrar em contato com a equipe de design para que o OK avance com as mudanças. Na minha experiência, eles foram nerds do tipo ainda maiores do que eu e apreciaram o esforço extra envolvido.

este artigo falou com você? Você está confuso com a perspectiva de uniformidade e consistência inspiradas na matemática no trabalho de design? Além de soluções completas de ponta a ponta, como revisões de sites e dispositivos móveis, temos os melhores designers em todos os projetos, garantindo consistência e tornando os sonhos dos clientes uma realidade. Confira nossa recente contribuição para builtinchicago.com na contratação de designers e nossas posições de design aberto.

Deixe uma resposta

O seu endereço de email não será publicado.