Escolha a melhor tipografia para o seu site ~ Visual Dicas

Porque a tipografia é importante?

Um Web designer além de se atentar para o layout da página, o sistema de navegação e todas as suas ilustrações, precisa também prestar muita atenção na tipografia do site que está desenvolvendo.

Mas o que é tipografia?

Arte que compreende as várias operações conducentes à apresentação de textos, desde a criação dos caracteres à sua composição e impressão, de modo que resulte num produto visual ao mesmo tempo adequado, legível e agradável aos nossos olhos.

Veja o que diz o blog design.blog.br:

“No uso da tipografia o interesse visual é realizado através da escolha adequada de fontes tipográficas, composição de texto, a sensibilidade para o tom do texto e a relação entre texto e os elementos gráficos na página. Todos esses fatores são combinados para que o layout final tenha uma “atmosfera” ou “ressonância” apropriada ao conteúdo abordado. No caso da mídia impressa, designers gráficos costumam se preocupar com a escolha do papel adequado, da tinta e dos métodos de impressão.

O conhecimento da tipografia é essencial aos designers. O conhecimento adequado do uso da tipografia é essencial aos designers que trabalham com diagramação, ou seja, na relação de texto e imagem. Logo a tipografia é um dos pilares do design gráfico e uma matéria necessária aos cursos de design. Para o designer que se especializa nessa área, a tipografia costuma se revelar um dos aspectos mais complexos e sofisticados do design gráfico.”

Portanto, um site adequado além de ter um layout maravilhoso, precisa ter também toda a sua parte tipográfica em harmonia. Fontes adequadas, tamanhos adequados, cores, tons e formatação do texto em harmonia com o layout da página e o conteúdo a ser abordado.

A tipografia adequada deverá manter o texto legível, agradável e convidativo, com títulos que chamem a atenção do leitor, porém sem agredir o contexto da página onde ele será inserido…

Para facilitar este trabalho, apresentaremos o site Font Tester que permite você comparar e escolher a melhor configuração tipográfica para o seu site. O mais legal no site é que você poderá copiar o código completo CSS e HTML após definida a tipografia ideal.

Lembre-se, Tipografia é uma arte que necessita da sensibilidade, criatividade e principalmente de conhecimento técnico. Portanto é recomendável ao Web Designer que se aprofunde mais neste tema.

Compare e escolha a melhor tipografia

Acesse o site: Font Tester

1) Escolha o n. de colunas para comparar em [View].

2) Em [Edit] selecione a coluna que deseja alterar as configurações.

3) Defina as propriedades do estilo do texto.

Selecione a propriedade desejada e altere os respectivos valores de estilo de texto CSS.

Observe que a coluna selecionada para a edição muda automaticamente quando é alterada uma propriedade do estilo de texto.

Obs.: Para quem não sabe o que é CSS, leia o artigo: O que é CSS?

4) Se desejar comparação, repita as alterações nas outras colunas…

Se desejar, altere o texto para uma visualização mais real… Para isto, clique no link [Edit Text]. Selecione as colunas que desejar alterar, mude o texto e clique no botão [OK].

Veja o exemplo abaixo:

5) Para obter o código, clique no link [Get CSS Code].

Defina os parâmetros e a coluna desejada. Copie o código CSS e HTML e leve-os até ao seu site…

O site trás também um mapa de caracteres com dezenas de fontes disponíveis, onde o usuário poderá obter o código HTML, clicando em [Get HTML Code].

Opinião

O Font Tester é um aplicativo muito útil para todos que trabalham com sites ou blogs. Para os iniciantes nesta área ele é ideal, pois ajuda aos novatos conhecerem melhor os comandos do CSS para estilo de texto.

Pode-se testar modelos e cores, verificando instantaneamente os resultados que ocorrerão nos seus projetos de desenvolvimento.

O aplicativo é bem simples e funcional. Os códigos gerados facilitam muito o trabalho dos programadores de Web, dos iniciantes até os mais experientes.

O site possui um suporte de altíssima qualidade, explicando ao usuário todas as propriedades da linguagem CSS, além de um tutorial completo do site. Para acessá-lo, clique no botão [Help] do menu.