As regras de tipografia de web responsiva

Tipografia de Web responsiva é difícil - você precisa ter cores de design e know-how técnico. Mas, por mais complicado, pode ser errado não é uma opção, porque a tipografia é a pedra angular do web design.

Como você recebe o design e o código certo? Como seus desenvolvedores se comunicam com os designers de pixels? Como seus designers podem fazer desenvolvedores indiferentes preocupados com a tipografia? A maneira mais rápida e mais simples é fazer com que seus designers e desenvolvedores falem a mesma linguagem, respeitem um ao outro por seus ofícios e busquem compreender os princípios e limitações da tipografia da Web.

Este artigo tem como objetivo fornecer designers e desenvolvedores com a fundação para iniciar a comunicação sobre o assunto da tipografia. Vamos cobrir os princípios de design necessários e explorar soluções práticas para Tipografia responsiva .

O que é boa tipografia?

'Bom' é sempre subjetivo; Não é uma âncora fixa que podemos abrir as comunicações. Para designers e desenvolvedores para se comunicar de forma eficaz, devemos começar falando sobre um denominador comum que ambos os lados podem entender. Esse denominador é o propósito da tipografia.

Tipografia é a aparência do texto; Estamos vestindo texto para cima. O objetivo do molho é tornar o usuário atraente o suficiente para atrair uma conversa, mas não manter muita atenção que a outra parte se distraia da conversa.

Da mesma forma, o objetivo da tipografia é permitir que os leitores se concentrem e mergulhe no conteúdo do texto. Boa tipografia, por definição, é tipografia que ajuda o texto a cumprir seu propósito de comunicação.

Duas coisas devem acontecer para os leitores se concentrarem e mergulharem no texto. Primeiro, a tipografia deve transmitir a emoção apropriada (se houver). Em segundo lugar, o texto deve ser fácil de ler. Isso nos leva a quatro propriedades essenciais que você precisa para ir direto.

• Família de fontes
• Tamanho da fonte
• Altura da linha (também chamada de liderança)
• Largura de texto (também chamada de medida de texto)

Obter a família da fonte certa ajuda as emoções subjacentes do texto brilhar. Obtendo as outras três propriedades direito garantem que seu texto seja fácil de ler. Na maior parte, os designers são excelentes em encontrar a família da fonte certa. Então, para o resto deste artigo, vamos nos concentrar nos outros três fatores.

A arte do texto legível

O primeiro passo em qualquer projeto é definir o tamanho da fonte , altura da linha e largura do seu texto do corpo. Este processo é chamado de composição. Comece por startinging com uma página que contém informações que um usuário precisa. Tanto quanto possível, esta página deve conter vários elementos, como H1, H2, H3, texto e legendas, para os quais você deve fazer uma escolha consciente sobre o que funciona para o seu design. Quanto mais elementos sua página contiver, melhor suas chances de definir um esquema de tipo que funciona em todo o quadro.

Quando você seleciona o tamanho da fonte , altura da linha e medir o texto do seu corpo, certifique-se de usar conteúdo real. Se você não tiver conteúdo real, use o texto da Wikipedia em vez de Lorem Ipsum.

Você também precisa se colocar na mesma situação que você está textando, porque a distância entre os olhos de um leitor e a tela é diferente para diferentes dispositivos. Se você estiver composição para um dispositivo móvel, veja sua saída através de um telefone. Se você é tatilete para um laptop, sente-se na sua mesa com o seu laptop, e assim por diante.

Depois de se instalar no ambiente certo, inicie seu processo de tipografia pela primeira vez selecionando tamanho da fonte , seguido por medida e finalmente altura da linha . Tenha em mente que não há combinação perfeita - basta olhar para outras páginas que você sente ter boa tipografia e verá que nenhum deles usa o mesmo tamanho da fonte , altura da linha e medir. Então, o que você está apontando é simplesmente texto que é fácil de ler.

Definir os tamanhos certos é mais difícil de explicar por escrito, então eu fiz alguns vídeos para ajudá-lo com tamanho da fonte , medir e conduzindo .

Aqui estão algumas diretrizes rápidas para ajudá-lo a garantir que você tenha um bom tamanho de fonte, liderando e medir.

Sua fonte é pequena demais se:

• Você tem que se concentrar para ler o texto
• Você tem que apertar seus olhos
• Você tem o desejo de aumentar o zoom

Sua fonte é muito grande se:

• Você começa a perceber letterforms em vez de ler o conteúdo
• Você só pode ler uma a três palavras de cada vez
• Você tem o desejo de diminuir o zoom

Sua medida de texto é muito longa se:

• Você tem que virar a cabeça para ler o texto
• Você perde a concentração no meio do caminho

Sua medida de texto é muito curta se:

• Você se sente irritado quando o texto quebra para a próxima linha
• Seus olhos se cansam de saltar à esquerda e direita rapidamente

Sua liderança é muito estreita se:

• O texto se sente denso e esmagador
• Você leu a linha errada de texto acidentalmente

Seu principal é muito grande se:

• Você se distrai com o espaço branco entre filas de palavras

Lembre-se sempre da definição de boa tipografia: você não é depois da perfeição, você é simplesmente atirando para o texto que é fácil de ler. Ao fazê-lo, você vai querer testar suas escolhas com o seu público (amigos e colegas de trabalho também de testadores) para ter certeza de que está certo. Somente siga para definir os tamanhos de outros elementos quando terminar o texto do corpo.

Composição de outros elementos

Muitos designers e desenvolvedores escolheram o tamanho da fonte Para elementos como H1 e H2 visualmente, e simplesmente esperam que esses números mágicos funcionem bem em seu design. Mas não há necessidade de apenas puxar números fora do ar fino; Os tipógrafos usaram escalas de tipografia por séculos para ajudar com isso. O que você faz é escolher um número da escala de tipografia como o tamanho do seu elemento. Infelizmente, essas escalas não podem ser usadas diretamente para a web porque são construídas para design de impressão.

Tim Brown, um especialista no campo da tipografia, surgiu com uma solução chamada escala modular. Ele funciona exatamente como uma escala de tipografia, exceto você construa a escala modular com o texto do corpo que você decidiu.

Para criar a escala modular, você pega o texto do corpo tamanho da fonte (Também chamado de tamanho de fonte de base) e multiplique-o por uma proporção numerosas vezes até obter uma escala. Muitas vezes, a proporção que você usa é derivada da música (já que a música tem raízes em harmonia). Acima é um exemplo de uma escala criada com a ajuda de um Calculadora de escala modular .

Quando terminar de construir a escala modular, você pode seguir em frente para o restante de seus elementos, escolhendo um número da escala como seu tamanho da fonte . Em seguida, defina a principal e a medida com o mesmo processo até obter um bom equilíbrio de elementos legíveis.

Ritmo vertical

O próximo passo é ajudar a gel os elementos individuais usando uma técnica chamada ritmo vertical. Para um elemento fluir harmoniosamente para o próximo, precisamos ajustar a coisa que os une: o espaço branco. Este espaço branco deve ser grande o suficiente para diferenciar um elemento do próximo distintamente, mas deve ser pequeno o suficiente para garantir que o fluxo não esteja quebrado.

Quanto espaço branco você deve usar? Muitos designers escolhem uma figura como 10px que é fácil para eles projetar. Muitos desenvolvedores, por outro lado, tendem a arrancar um número aleatório (como 6px) de outro sistema de grade ou um artigo que leram on-line. Não admira que esses dois não possam se comunicar.

Como você pode imaginar, não há necessidade de confiar em um número mágico para o espaço branco; podemos usar um múltiplo do altura da linha valor do nosso texto do corpo. Isso ocorre porque instintivamente reconhecemos padrões de espaço em branco dentro do texto. Quanto mais forte o padrão, mais seguro nos sentimos, e mais fácil é permitir que nossas mentes vagarem no conteúdo.

Para usar ritmo vertical, tudo o que você faz é:

1. Defina o espaço branco entre elementos para um múltiplo da base altura da linha
2. Colocou o altura da linha de todos os outros elementos para um múltiplo da base altura da linha

O múltiplo em questão não precisa ser um inteiro. Você pode usar valores como 0.5x e 1.25x da base altura da linha para fornecer mais flexibilidade. Esses valores funcionam porque o ritmo vertical usa o princípio da repetição.

Grade de linha de base ou não?

Sempre que mencionamos o ritmo vertical, o conceito de uma grade de linha de base inevitavelmente entra na imagem. Embora a grade de linha de base possa ser útil, é principalmente um desastre de trem porque os iniciantes concentram muita energia em fazer texto sentar entre (ou on) baselinas que sentem que é impossível obter o direito de ritmo vertical.

Honestamente, você nunca terá grades de linha de base para funcionar perfeitamente na web porque a matemática na tipografia sempre contém subpixels (como 24,8px), e todos os navegadores lidam de subpixels de forma diferente. Por exemplo, alguns navegadores fazem com que cada elemento na página seja desligado pelo 1PX. Esses erros de 1PX se acumulam e pressionam quaisquer elementos colocados abaixo da página ainda mais fora da grade. Como resultado, eu recomendo contra o uso de uma grade de linha de base.

Seguindo, vamos entrar no reino de práticas responsivas e projetar para várias telas.

Tipografia para várias telas

Projetar tipografia para telas múltiplas não é uma façanha média. Existem três coisas que precisamos fazer de uma perspectiva de design.

Primeiro, a distância entre os olhos de um usuário e sua tela depende de que tipo de dispositivo eles estão usando. Geralmente, o usuário colocará o dispositivo mais longe ao usar uma tela maior. Esse fenômeno significa que você precisa aumentar seus tamanhos de fonte à medida que a largura do dispositivo aumenta.

Em segundo lugar, queremos manter as proporções entre o texto do corpo e outros elementos consistentes. Isso significa que temos que aumentar os tamanhos de todos os elementos à medida que aumentamos o tamanho do texto do corpo.

Terceiro, em pontos de interrupção específicos, queremos aumentar o tamanho da fonte de elementos específicos (como o H1) escolhendo um número diferente da escala modular. Fazer isso nos permite controlar a hierarquia visual e garante que os elementos Garnerjam apenas atenção suficiente para puxar um usuário para ler.

Codificação para tipografia responsiva

Sabemos que precisamos aumentar nossos tamanhos de texto proporcionalmente. A maneira mais fácil de fazer isso é aumentar o tamanho da fonte dentro do html. seletor. Também queremos usar unidades relativas para respeitar um usuário tamanho da fonte preferência.

 html {font-size: 100%;}
@media (min-width: 40em) {
 html {font-size: 112,5%;}
} 

Também queremos usar uma unidade relativa para outros elementos, então eles escalam de acordo com o HTML tamanho da fonte ( H2. no exemplo abaixo). Se você precisar alterar o tamanho da fonte para um número diferente na escala modular, tudo o que você faz é mudar o tamanho da fonte adequadamente ( H1. abaixo de).

 H1 {font-size: 2.369EM;}
@media (min-width: 40em) {
 HTML {font-size: 3.147EM;}
}

H2 {font-size: 1.777EM;} 

Embora o processo pareça simples, novos desenvolvedores podem enfrentar uma tonelada de dores de cabeça por causa das matemáticas envolvidas, e é por isso que recomendo usar funções e mixinas para ajudar. Eu costumo usar em() de Biblioteca de escala modular . Com isso, você pode escrever MS (4) ao invés de 3.157EM. e MS (3) ao invés de 2.369EM. .

Um exemplo de uma função que pode aliviar a carga de cálculo do ritmo vertical é: