Este tipo faz meu design parecer gordo?

Nada pode arruinar um design como tipografia que não se encaixa. Seja muito grande (ou muito pequena), o dimensionamento incorreto de tipos é um grande problema.

É um problema para mais designs do que você imagina. Demasiado comum, você visita um site onde o tipo processa lindamente em um navegador de desktop, apenas para revisitar mais tarde a partir de um telefone e achar difícil de ler. Isso acontece o tempo todo.

A questão é que o tipo não foi realmente dimensionado para cada dispositivo. É um problema totalmente evitável quando você considera uma escala tipográfica para projetos.

O que é uma escala tipográfica?

Uma escala tipográfica visual encapsula os tamanhos, o espaço e as proporções de elementos de tipo em relação a outro em um projeto. Isso inclui tudo, desde o estilo de texto do corpo principal até títulos, subcabeçalhos, legendas e qualquer outro elemento de texto.

A escala ajuda a determinar o tamanho e o posicionamento dos elementos de texto em relação uns aos outros. Para web design, em particular, a escala do tipo visual geralmente corresponde a tags no seu CSS (como h1, h2, h3, p e assim por diante).

Uma escala de tipos ajuda você a criar harmonia e ritmo no design. Ele também evita problemas de estilo, pois os elementos de texto correspondem aos elementos CSS, de modo que cada parte do design usa os mesmos elementos e consistência.

A escala deve ser baseada no tamanho do texto do corpo. (Sempre defina um tipo de letra e tamanho para aquele primeiro). Em seguida, construa a escala em torno dessa tipografia principal. Não sabe por onde começar? O Google tem um recomendação sólida :

1. Use um tamanho de fonte base de 16 pixels CSS. Ajuste o tamanho com base nas propriedades da fonte que está sendo usada.
2. Use tamanhos relativos ao tamanho base para definir a escala tipográfica.
3. O texto precisa de espaço vertical entre os caracteres; a recomendação geral é usar a altura de linha padrão do navegador de 1,2 em.
4. Restringir o número de fontes usadas e a escala tipográfica.

Crie harmonia e ritmo

Uma escala de tipos faz mais do que apenas ajudar os usuários a percorrer a cópia, ela cria harmonia e ritmo para o fluxo de texto. Isso é importante em qualquer dispositivo.

Então, onde você começa?

UX Matters tem algumas das melhores pesquisas disponíveis sobre o mínimo tamanhos de texto por dispositivo . Observe que esses tamanhos são mínimos e, como os tamanhos do corpo do texto continuam a aumentar (assim como o espaçamento entre linhas), você deve considerar os tamanhos de pontos maiores. Steven Hoober recomenda começar pelo menos 40 por cento maior que os mínimos recomendados. Além disso, os estilos de conteúdo aprimorados podem ir até 80% acima do mínimo, mas você também deve ser cauteloso com o tipo excepcionalmente grande.

Depois que o tamanho do corpo do texto for definido, você poderá determinar como dimensionar os elementos de texto de suporte. Há uma boa arte para isso e o teste do olho é muitas vezes um bom lugar para começar.

Quase não existe uma manchete grande demais. Diga o que você precisa dizer e dimensionar para dimensionar as palavras no espaço. Um título de duas linhas parecerá maior que uma linha, mesmo que o texto tenha exatamente o mesmo tamanho.

A maneira mais fácil de pensar no aumento de manchetes e outros elementos de teste maiores é trabalhar em porcentagem com base no texto do corpo. Embora todo designer tenha um ponto de partida diferente, 250% maior do que o texto do corpo é um bom exemplo para o título; 150 por cento para h2, 75 por cento para h3 e 50 por cento para elementos como cotações de bloco. (Isso não é uma regra, apenas um ponto de partida.)

Veja por que as porcentagens, em vez de tamanhos de conjuntos, são importantes: depois de definir o tamanho do tipo de corpo, as porcentagens ajustam os tamanhos de acordo, independentemente do tamanho da tela. Cada elemento de tipo é relativo ao tipo de corpo.

Diretrizes de caractere e espaçamento

Existem algumas outras diretrizes que os designers procuram quando se trata de digitar na tela. Quando se trata de espaçamento, uma das regras básicas é observar os caracteres por linha para garantir a legibilidade.

• Desktop e dispositivos grandes: 60 a 75 caracteres por linha
• Telefones e dispositivos pequenos: 35 a 40 caracteres por linha

Observe que a legibilidade em telas menores é baseada em ter menos caracteres (texto maior).

A mesma ideia se aplica também ao espaçamento. Você precisa de mais espaço entre as linhas de texto quando o tamanho da tela é limitado para facilitar a leitura e o conteúdo dos usuários. Considere adicionar mais 25% de espaçamento de linha em dispositivos menores do que na tipografia de desktop.

O tamanho e o espaçamento adicionais ajudam a aliviar a sensação de que os usuários podem se sentir ao tentar ler em dispositivos menores. Como a tela é pequena, o fluxo e a legibilidade do leitor são vitais para manter a rolagem dos usuários.

Dicas para começar

Há muitas maneiras de criar uma escala tipográfica e garantir que o texto não torne o design grosso. A maneira como você faz isso provavelmente depende do seu nível de conforto com o código e o desenvolvimento, além do design.

A melhor opção é usar um design responsivo com consultas de mídia. Essa é a opção designer-desenvolvedor que fornecerá o maior nível de controle sobre as especificações de texto. (Para mais, volte para as recomendações do Google, acima.)

Outra rota é projetar versões diferentes. Embora esse seja um conceito bastante desatualizado, ainda existem alguns lugares que usam URLs para dispositivos móveis e URLs de área de trabalho em seus sites. Não é recomendado na maioria dos casos, mas para alguns sites em que o design é radicalmente diferente ou os usuários experimentam coisas diferentes, pode ser uma opção.

A opção mais fácil é começar com um tema para o seu site. Apenas certifique-se de optar por uma opção totalmente responsiva. Quando você usa um tema responsivo de alta qualidade, a maioria das suposições é tirada disso para você. Tudo o que você realmente precisa pensar é no tamanho do texto do corpo. Apenas certifique-se de verificar tudo para garantir que os tamanhos dos tipos de celular atendam aos seus padrões.

3 ferramentas para criar uma escala de tipos

Há várias ferramentas disponíveis para ajudá-lo a ver o impacto exato de uma escala de tipografia visual. Aqui estão algumas das melhores e mais amigáveis ​​opções.

• Escala de tipos : Insira texto e reproduza opções como tamanho, escala e fonte diretamente na tela; grad o CSS ou edite o código diretamente da ferramenta;
• Escala modular : A escala funciona como uma regra para ajudar a determinar tamanhos para o tipo; então baixe os resultados como um plugin Sass ou JS ou os veja na tela;
• Calculadora de tipografia de proporção áurea : A ferramenta otimiza o tamanho, a altura da linha, a largura e os caracteres por linha usando a proporção áurea

Conclusão

A escala tipográfica correta manterá seu design com aparência elegante e esbelta. É a harmonia adicionada que os usuários podem não entender, mas contribui para a legibilidade e usabilidade gerais.

É provável que a escala esteja desativada se o design “simplesmente não parece certo”. O tipo de tamanho inadequado pode ser difícil de identificar, mas geralmente é um lugar para procurar quando algo sobre um projeto está fora de equilíbrio. Jogue com algumas opções diferentes de escala antes de escolher algo, e lembre-se que a tendência agora é do tipo que é um pouco maior do que no passado.

• ← Conheça o homem por trás do Comic Sans
• WeTransfer revela nova identidade de marca e interface do usuário →