10 regras de tipografia da web que todo designer deve saber

Você pode incorporar muitos elementos em seu web design que criarão engajamento e manterão 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 leem para obter as informações que leem.

Se você deseja tornar essas informações mais fáceis de ler, visualmente interessantes e para que esse texto seja adicionado ao design geral de um site, você 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 o LoremIpsum após o processo de design inicial

Se o conteúdo é rei, por que não é considerado seriamente 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 fora de controle. Não é tão problemático nos estágios iniciais, por exemplo, quando você está criando uma variedade de layouts de página. No entanto, depois de restringir 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 tenha tanta importância quanto o layout e os elementos visuais.

Além disso, ter 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 seu cliente do escritor de conteúdo o mais rápido possível.

2. Faça o texto sem serifa

O texto com serifa é absolutamente lindo. Essas são ótimas fontes para impressão e para aplicativos de impressão maiores, como títulos, títulos e subtítulos. Infelizmente, na tela, as serifas não são bem dimensionadas quando se trata de exibições menores de conteúdo, como blocos de texto. As serifas que ficam bonitas em tamanho maior dificultam a leitura do texto quando a fonte fica menor. Por causa disso, é aconselhável salvar serifas para texto grande e confiar em sans quando a legibilidade puder ser um problema. Melhor ainda, adote a aparência limpa, elegante e moderna das fontes sem fontes e salve as serifas para a impressora. Dessa forma, você nunca terá que lidar com a degradação da legibilidade em favor de usar uma fonte que pareça bonita.

3. Pense em citações inteligentes e outros símbolos no início do processo de design

Provavelmente, você visitou um site onde certos símbolos não seriam exibidos corretamente. Às vezes, eles são substituídos por uma pergunta ou sequência de caracteres estranhos. Outras vezes, eles simplesmente não estão lá. Isso acontece frequentemente com citações inteligentes ou “curvas”. Isso geralmente é o resultado do texto sendo criado no MS Word ou outro pacote e depois portado para uma página da web. As coisas simplesmente não se traduzem como desejado. Também é comum o símbolo do Euro, caracteres de byte duplo e outros símbolos retirados de conteúdo estrangeiro.

Para evitar esse problema em seu projeto 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 mudar os símbolos para linguagem natural. Você também pode usar HTML para garantir que os símbolos sejam exibidos corretamente, em vez de apenas copiar e colar. Seja qual for a sua decisão, 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 de CSS, seus visitantes devem poder 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 grande continuidade quando se trata de tipografia. Claro, você não precisa usar muitos truques. Um bom CSS pode ajudá-lo a evitar pequenos problemas comuns, como alterar os tipos de letra e o tamanho da fonte de uma página para outra.

Por que a tipografia consistente é uma necessidade? Usar CSS para manter a 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 projetar cada página. Em vez disso, você apenas usa 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 são importantes

A microtipografia refere-se aos detalhes da tipografia relacionados à legibilidade. Por exemplo, o espaçamento é uma preocupação relacionada à microtipografia, assim como o dimensionamento 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.

A macrotipografia está relacionada à maneira como suas escolhas em relação à tipografia se vinculam ao seu design geral. Relaciona-se com a estética.

Uma boa tipografia leva em consideração tanto a micro quanto a macro tipografia. Você já visitou um site que usava uma fonte personalizada e de aparência muito 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 e 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 real quando se trata das fases posteriores do design. Ainda não terminamos. O conteúdo realmente é rei. Assim que o design final, incluindo o conteúdo, estiver pronto, você deve 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ídeo, cor 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 você deseja que os usuários sigam. Na verdade, se você tem uma página que não está convertendo, você pode querer brincar com a tipografia para ver se alguma alteração que você fizer ajudará a guiar os visitantes para 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 mais contrastantes que existem, preto e branco. Infelizmente, isso pode resultar em um design muito 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 um ou dois tons mais claros ou mais escuros é tudo o que você precisa fazer. Então, sua tipografia vai de ilegível para perfeitamente discernível e com uma aparência muito legal.

9. Abandone o Texto Centrado

Os problemas com texto centrado são numerosos. Em primeiro lugar, pode fazer com que suas páginas da web se assemelhem a panfletos mal projetados. Além disso, você quase sempre acaba com margens e textos estranhos que parecem ser um poema ou um encarte de um antigo álbum de rock. 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 fazem isso porque é uma luta para eles lerem seu texto no tamanho normal.

Seria ótimo se todos pudessem ver seu texto como pretendido, mas com os boomers muitas vezes 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 se 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 fontes que você encontra na internet. Esta é uma ótima ferramenta para ter quando você se deparar com uma fonte que realmente chama sua atenção. Este plug-in do Chrome ajudará você a identificar, encontrar e comprar qualquer fonte disponível comercialmente que você veja em qualquer site.
• TypePlate : Este é um framework de tipografia completo que é perfeito para web designers. O TypePlate pode lidar com letras maiúsculas, citações em bloco, dimensionamento, cores e uma variedade de outros desafios relacionados à tipografia.
• Escala Modular : Esta é uma escala que permite determinar a fonte ideal e o tamanho da fonte. Também ajuda você a criar um equilíbrio entre o tamanho da fonte de seus títulos e títulos e a fonte selecionada para seu 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 letras e números diferentes de uma fonte para outra.
• TypeWolf : Use este site para obter sua correção de algumas das fontes mais legais e uso mais inspirador de tipografia na internet. Esta é uma excelente fonte de inspiração, bem como de informação.
• Por que as fontes são importantes, Sarah Hyndman : Este é um excelente livro que explora a importância das fontes e as maneiras pelas quais 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

Esperamos que este artigo influencie 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 projetos.