10 regras de tipografia da Web que todo designer deve saber
Você pode incorporar muitos elementos em seu web design que irão criar engajamento e manter a atenção de seus visitantes. Isso inclui imagens, vídeos e até som. No entanto, a parte mais importante de quase todos os sites é o conteúdo que os visitantes lêem para obter as informações que lêem.
Se você deseja tornar essas informações mais fáceis de ler, visualmente interessantes e adicionar esse texto ao design geral de um site, precisa entender a tipografia. Esta é a arte e a habilidade de tornar a palavra escrita funcional e esteticamente agradável.
Se você quer aprender a usar a tipografia a seu favor, confira essas 10 regras que todo designer deve ter em mente.
1 Pare de usar LoremIpsum após o processo inicial de design
Se o conteúdo é rei, por que não é levado em consideração no processo de web design? Ao usar conteúdo falso como espaço reservado, os web designers relegam o conteúdo a um papel secundário. Esta é uma grande indicação de que as prioridades de design estão todas fora de sintonia. Não é tão problemático nos estágios iniciais, por exemplo, quando você está simulando uma variedade de layouts de página. No entanto, depois de reduzir as coisas, é importante trabalhar com o conteúdo da Web real ao criar o design final. Isso garante que o que está sendo dito em uma determinada página da Web receba tanta importância quanto o layout e os elementos visuais.
Além disso, ter um texto real é importante em termos de design e layout. Você não quer estar na posição de ter projetado totalmente uma página da Web, apenas para descobrir que ela não funciona com o conteúdo real. É por isso que é extremamente importante obter o texto real do cliente do redator de conteúdo o mais rápido possível.
2 Faça Texto Sans Serif
O texto com serifa é absolutamente lindo. Essas são ótimas fontes para impressão e para aplicações de impressão maiores, como cabeçalhos, títulos e subtítulos. Infelizmente, na tela, as serifas não escalam bem quando se trata de exibições menores de conteúdo, como blocos de texto. As serifas, que ficam bonitas em um tamanho maior, dificultam a leitura do texto quando a fonte fica menor. Por causa disso, é aconselhável salvar serifas para textos grandes e confiar em sans quando a legibilidade pode ser um problema. Melhor ainda, adote a aparência limpa, elegante e moderna das fontes sem fontes e guarde as serifas para a impressão. Dessa forma, você nunca terá que lidar com a degradação da legibilidade em favor do uso de uma fonte bonita.
3 Pense em aspas inteligentes e outros símbolos no início do processo de design
É provável que você tenha visitado um site em que determinados símbolos não são exibidos corretamente. Às vezes, eles são substituídos por uma pergunta ou sequência de caracteres de aparência estranha. Outras vezes, eles simplesmente não estão lá. Isso acontece frequentemente com aspas inteligentes ou "encurvadas". Isso geralmente é o resultado de um texto criado no MS Word ou em outro pacote e depois transferido para uma página da Web. As coisas simplesmente não são traduzidas como desejado. Também é comum para o Euro símbolo, caracteres de byte duplo e outros símbolos retirados de conteúdo estrangeiro.
Para evitar esse problema em seu design final, você tem algumas opções. Primeiro, você pode modificar seu conteúdo para se livrar desses símbolos. Isso funciona se você estiver disposto a transformar os símbolos em linguagem natural. Você também pode usar HTML para garantir que os símbolos sejam exibidos corretamente, em vez de apenas copiar e colar. O que quer que você decida, certifique-se de testar a página da Web em todos os navegadores que puder. O que pode resolver um problema com símbolos em um navegador pode não ser eficaz em outro.
4 habilidades avançadas de CSS são extremamente importantes
Se você desenvolveu boas habilidades em CSS, seus visitantes poderão navegar pelas páginas do seu site de maneira absolutamente perfeita. Se você criar suas folhas de estilo corretamente, poderá até ter várias versões da mesma página, mantendo uma grande continuidade quando se trata de tipografia. Claro, você não precisa usar muitos truques. Um bom CSS pode ajudá-lo a evitar problemas pequenos, mas comuns, como ter os tipos de letra e o tamanho da fonte alterados de uma página para outra.
Por que a tipografia consistente é uma necessidade? Usar CSS para manter uma tipografia consistente dá ao seu site uma aparência profissional e nítida. Isso também significa que você não precisa pensar em tipografia ao criar cada página. Em vez disso, basta usar a folha de estilo apropriada. Se você decidir, em uma determinada página, que vai quebrar a norma e fazer algo diferente com a tipografia para criar um efeito ou chamar a atenção para algo, ela se destacará mais graças ao uso de CSS.
5 A tipografia micro e macro é importante
A microtipografia refere-se aos detalhes da tipografia relacionados à legibilidade. Por exemplo, o espaçamento é uma preocupação relacionada à microtipografia, assim como a escala e o contraste. Os ajustes que você faz para garantir que um bloco de texto seja legível em qualquer dispositivo ou navegador estão todos relacionados à microtipografia.
Macrotipografia refere-se à maneira como suas escolhas em relação à tipografia se relacionam com seu design geral. Relaciona-se com a estética.
Uma boa tipografia leva em consideração a tipografia micro e macro. Você já visitou um site que usava uma fonte personalizada de aparência realmente elegante que também era quase impossível de ler? É o que acontece quando se dá atenção à macrotipografia, mas não à microtipografia.
6 Conheça o conteúdo, bem como o design
Como você sabe, um bom site tem fluxo. Parte disso é a legibilidade do conteúdo que está na página. Já discutimos como isso é afetado por coisas como serifas e discutimos como o texto fictício não substitui o texto real quando se trata das fases posteriores do design. Ainda não terminamos. O conteúdo realmente é rei. Depois que o design final, incluindo o conteúdo, estiver pronto, você deverá ler a página da web.
Ao ler o conteúdo após a conclusão do design, você pode determinar se há ou não problemas de espaçamento ou quebra de linha. Isso pode tornar o conteúdo confuso ou até mesmo alterar involuntariamente o significado do conteúdo. Corrigir esses problemas usando alguns truques de tipografia pode garantir que seu produto final comunique exatamente o que você ou seu cliente pretendem.
7 Entenda a importância da hierarquia
Hierarquia é o roteiro que você dá às pessoas que visitam seu site. Você pode usar imagens, vídeos, cores e (é claro) tipografia para criar essa hierarquia.
É simplesmente uma questão de guiar o visitante desde a primeira coisa que você quer que ele veja até a próxima, e assim por diante. Com a tipografia, você pode usar tamanho, alterações na fonte e espaçamento para ajudar a definir a hierarquia que deseja que os usuários sigam. Na verdade, se você tiver uma página que não está convertendo, convém brincar com a tipografia para ver se as alterações feitas ajudarão a guiar os visitantes até o botão de chamada para ação.
8 Seja criativo, mas cauteloso com as cores
A maneira mais fácil de garantir que você nunca tenha problemas de legibilidade devido a problemas com a cor da fonte e a cor do plano de fundo é usar as cores de maior contraste existentes, preto e branco. Infelizmente, isso pode resultar em um design bastante chato.
Não tenha medo de usar cores. Na verdade, não tenha medo de usar combinações de cores que não parecem funcionar. Às vezes, simplesmente ir um ou dois tons mais claros ou mais escuros é tudo o que você precisa fazer. Então, sua tipografia vai de ilegível a perfeitamente discernível e com uma aparência muito legal.
9 Ditch Centrado no Texto
Os problemas com o texto centralizado são numerosos. Em primeiro lugar, pode fazer com que suas páginas da Web se pareçam com folhetos mal projetados. Além disso, você quase sempre acaba com margens e textos estranhos que parecem ser um poema ou encarte de um álbum de rock antigo. Embora não haja problema em usar texto centralizado para títulos, geralmente é melhor evitá-lo completamente. Fique com o texto ajustado à esquerda e seus leitores acharão seu conteúdo muito mais fácil de ler.
10 Considere a aparência do seu texto ampliado
Quer usem o polegar e o indicador ou cliquem no botão de zoom, as pessoas vão aumentar o seu texto. Às vezes, eles fazem isso para compensar uma tela menor. Outras vezes, eles simplesmente o fazem porque é difícil para eles ler seu texto no tamanho normal.
Seria ótimo se todos pudessem visualizar seu texto como pretendido, mas com os boomers geralmente precisando de ajuda extra para ver o texto, isso simplesmente não é possível. Tenha cuidado para não usar um tipo de letra que degrada se for ampliado.
Ferramentas e recursos úteis
Aqui estão algumas ferramentas e recursos úteis para ajudá-lo a fazer mais com a tipografia:
- FontFace Ninja: Este utilitário ajuda você a identificar as fontes que você encontra na internet. Esta é uma ótima ferramenta quando você se depara com uma fonte que realmente chama sua atenção. Este plug-in do Chrome ajudará você a identificar, encontrar e comprar qualquer fonte comercialmente disponível que você veja em qualquer site.
- TypePlate: Este é um framework de tipografia completo que é perfeito para web designers. O TypePlate pode lidar com capitulares, citações em bloco, escala, cores e uma variedade de outros desafios relacionados à tipografia.
- Escala Modular: Esta é uma escala que permite determinar a fonte e o tamanho da fonte ideais. Também ajuda a criar um equilíbrio entre o tamanho da fonte de seus títulos e cabeçalhos e a fonte selecionada para o texto.
- TIFF: Esta ferramenta permite que você abra duas fontes diferentes. Em seguida, ele exibe as diferenças entre cada uma das duas fontes para você. Ele ainda permite que você compare diferentes letras e números de uma fonte para outra.
- TypeWolf: Use este site para corrigir algumas das fontes mais legais e o uso mais inspirador de tipografia na Internet. Esta é uma excelente fonte de inspiração, bem como de informação.
- Por que as fontes importam, Sarah Hyndman: Este é um livro excelente que explora a importância das fontes e as maneiras como a tipografia pode influenciar o estado de espírito. É um ótimo livro para pessoas apaixonadas por tipografia, mas também para pessoas que precisam ser convencidas da importância de escolher o tipo certo de trabalho.
Conclusão
Esperançosamente, este artigo influencia os web designers a pensar um pouco mais na tipografia e também a encontrar maneiras de usar o tipo de forma mais eficaz e criativa em seus designs.