Tipografia para a web

Tipografia para a web

A escolha de um tipo de letra pode ser feita por praticamente qualquer pessoa – basta escolher um nome numa lista de um software. E ainda assim, escolher a fonte certa, é uma das decisões mais trabalhosas no processo de design.

Os designers de tipografia dedicam as suas carreiras à elaboração de formas de letras. Nesses pequenos formatos, os especialistas equilibram coisas como emoção e neutralidade, personalidade e praticidade, legibilidade e flexibilidade. Selecionar um tipo de letra para um determinado design acarreta uma longa lista de considerações.

Tradicionalmente, os designers gráficos sempre estudaram os fundamentos da tipografia em termos de design de impressão. Mas como o papel do designer agora abrange também todos os tipos de mídias digitais, a tipografia é uma fera maior de domar. No espírito de aperfeiçoar os fundamentos, use as dicas de tipografia para web que eu seleccionei, juntamente com um infográfico do site Toptal.

Os desafios da tipografia digital

Quando se trata de design de impressão, existem poucas variáveis ​​na interacção com o utilizador. Uma página impressa não mudará de forma dependendo de quem a estiver a segurar – as cores podem ser rigidamente controladas e o tipo de letra permanecerá estático. A tipografia digital é muito mais fluida. Quando a tipografia aparece no ecran, há muitos fatores que contribuem para a forma como ela é exibida, alguns dos quais incluem:

  • Tamanho de ecran: é impossível prever o tamanho do ecran do utilizador, no entanto, o design responsivo visa acomodar qualquer pequena alteração nas dimensões. Mas isso significa que, às vezes, a paginação pode ser alterada. É preciso acautelar esta questão, tanto no design como na programação.
  • Resolução de ecran: a densidade de pixels desempenha um papel importante na legibilidade do texto. Os avanços tecnológicos tornaram os ecrans de alta resolução mais acessíveis às massas, mas os designers devem ter em mente os utilizadores com tecnologia mais antiga.
  • Calibração do ecran: os níveis de brilho determinam como as cores aparecem no ecran. As opções de cores para web design precisam acomodar todos os tipos de configurações de ecran.

Escolher a melhor fonte para se lêr no ecran

O design digital é uma arte em desenvolvimento – há muito pouco tempo estávamos limitados a apenas algumas fontes compatíveis com monitores de baixa resolução.

Fomos evoluindo aos solavancos, nas nossas opções de tipos de letra. Agora elas são criadas para ecran e são projetadas com certas nuances que aumentam a legibilidade. Assim como as fontes impressas enganam o olho para aumentar a legibilidade, boas fontes para web fazem o mesmo.

Um designer não precisa de estar limitado aos tipos de letra universalmente padronizados (como a Times New Roman ou Arial). Existem inúmeras opções de fontes seguras para a web disponíveis em sites como a Google Fonts, a Font Library e o Adobe Typekit. E nem precisam de ser todas, fontes pagas.

Formatar para uma experiência de leitura agradável

Selecionar um tipo de letra é apenas o começo. Decisões em torno do comprimento e altura da linha podem melhorar ou estragar um design digital. Há dicas simples: nunca usar letras maiúsculas no corpo de texto e manter o número de fontes diferentes no mínimo (de preferência, 2 fontes por site), mas muitas decisões de formatação dependem de tentativa/erro.

O tamanho ideal do texto depende do tipo de letra escolhido porque factores como altura e a abertura afectarão a legibilidade. O tamanho do texto determinará a altura e o comprimento da linha. Uma maneira fácil de testar a relação entre essas decisões é usar ferramentas como o Grid Lover, que usa controles deslizantes para alterar a aparência de cada medida.

Escolher a cor de fundo por trás de um bloco de texto é tão importante quanto a cor da própria fonte. O contraste entre os dois determinará a legibilidade do texto. O Contrast Checker do WebAIM ajuda a determinar facilmente a taxa de contraste das combinações de cores, para que uma paleta de cor responda aos padrões de acessibilidade.

Nunca fuja ao teste

Sempre que estiver a desenhar para web, teste os seus blocos de texto no máximo de ecrans possíveis. Desde ecrans antigos e um pouco baços, sem contraste de cor ou brilho, até aos ecrans mais recentes de grande qualidade e com cor e contraste muito vibrante.

Um Guia Para a Tipografia na Web

Há muitos pormenores a considerar ao desenhar para ecran e, à medida que a tecnologia e os produtos avançam, as condições para projetar mudarão continuamente. No entanto, quando se trata de tipografia, há certos detalhes que se mantêm inalterados.

A seguir, um guia completo para escolher o tipo correto e formatá-lo para facilitar a leitura e optimizar a experiência do utilizador. Trouxe este guia do site Toptal, traduzi e adaptei.

ricardosalesgomes

Related Posts

Read also x