Quando esquematizamos um projeto aqui na Agência Liquid, seja um layout para um site, um design para impressão ou logotipo, damos grande importância à escolha da fonte que será utilizada. Além de uma boa leitura, o desenho da fonte deve harmonizar-se com a proposta e o estilo abordado no layout como um todo. Como principal elemento de comunicação de um design, o estudo da tipografia deve ser um fator de imprescindível importância quando criamos.

Para nós, designers de web, o estudo tipográfico é ainda mais desafiador. Encontramos ainda diversos obstáculos que não nos permitem uma escolha 100% livre, graças a diversos fatores (por exemplo, não podemos construir um site text-based com uma fonte fantasia sem utilizarmos artifícios de inclusão, uma vez que, sem hacks, não conseguimos anexar aquela tão sonhada fonte a um projeto para que ela seja exibida corretamente nos navegadores de todos os usuários. Falando em hacks, o mais funcional, até o momento, é o sIFR, que trabalha com Flash e Javascript). Temos que usar e abusar da criatividade com as chamadas fontes “web-safe”, ou seja, fontes padrão naturalmente já instaladas nos principais sistemas operacionais e garantidas de serem vistas por quase todos os usuários. Fontes usadas em imagens, por exemplo em títulos de página, tendem a conferir um visual mais bonito ao projeto, mas não são tão recomendáveis se o interesse é colocar em prática táticas de SEO.

Fontes web-safe:

Arial, Arial Black, Comic Sans, Courier, Georgia, Impact, Times, Trebuchet e Verdana.

Existem diversos “tipos” de fonte. Vamos comentá-los e exemplificá-los brevemente a seguir.

1. Fontes serifadas:

Estilo muito antigo de tipografia, caracterizam-se por ter cantos trabalhados que, entende-se, aumentam a legibilidade do texto impresso. De acordo com Jason Beiard em seu livro The Principles of Beautiful Web Design, existem quatro categorias de fontes serifadas:

a. Serifadas “old-style” (por exemplo, Garamond);
b. Serifadas “transitional” (por exemplo, Baskerville);
c. Serifadas modernas, como é o caso da Didot;
d. Serifadas retas, onde não verificamos as tradicionais “curvinhas” na união entre as serifas e a base das fontes. Fontes como Rockwell possuem este estilo, de aspecto industrial e legíveis à distância.

Apresentamos detalhes de um projeto criado pela Agência Liquid onde utilizamos a fonte Georgia. Trabalhamos com a fonte graças ao seu estilo clássico, sóbrio e tradicional, qualidades ideais para representar a imagem do escritório de advocacia Vilela & Berbel Advogados Associados.

2. Fontes sem serifa (sans-serif):

Durante o trabalho com fontes serifadas retas, os tipógrafos tiveram a idéia de simplesmente eliminar estes artifícios e surgiram as primeiras fontes sans-serif. Na década de 20, com o movimento modernista e os processos industriais em pleno vapor, a modernidade e limpeza das fontes sans-serif ganharam popularidade e passaram a fazer parte do novo estilo de comunicação.

Fontes sans-serif são as favoritas na construção de páginas da web. São muito legíveis em tela e extremamente versáteis.

Alguns exemplos de fontes sem serifa:

Confira abaixo um estudo feito pela Agência onde usamos fontes sans-serif:

3. Fontes manuscritas (handwritted):

São fontes que simulam a escrita manual. Apesar de belas, estas fontes são muito difíceis de trabalhar. Encontramos problemas de leitura em boa parte delas e não há qualquer tipo de compatibilidade com browsers até o momento. No entanto, são fontes por muitas vezes imprescindíveis quanto o assunto é criar um projeto temático. Por exemplo, convites formais (como os de casamento) quase sempre pedem sua presença.

Alguns bons exemplos:

Veja um estudo que fizemos na Liquid com uma fonte manuscrita para um rápido logotipo:

4. Fontes de largura fixa (fixed-width):

São fontes construídas para que cada caractere possua largura idêntica, seja ele um “a” ou um “M”. A história dessas fontes remete às limitações de antigos tipógrafos e à construção de máquinas de digitação, e eram fontes-padrão nos primeiros sistemas operacionais (ainda podemos vê-las, por exemplo, no MS-DOS).

Exemplo:

5. Fontes fantasia (decorativas ou novelty):

Fontes fantasia correspondem ao grande volume de fontes gratuitas que encontramos na web hoje. São fontes que não se enquadram em nenhuma das caraterísticas anteriores e apresentam uma enorme variedade de padrões. Elas podem fazer alusão a etnias, conter elementos ilustrativos em seus traços, etc. Algumas delas são ilegíveis e não devem ser usadas em grandes blocos de texto.

Fontes fantasia são ideais para compor chamadas temáticas (um logotipo para uma loja de roupas infantis, ou anunciar um evento de rally, por exemplo).

Bons exemplos:

Observe uma aplicação de fonte fantasia no logotipo de um cliente da Agência:

Confira dois sites legais para baixar fontes de graça:

DaFont – Site francês (com suporte para língua inglesa) muito popular entre designers do mundo todo. Uma variedade imensa de fontes por categoria, para PC e Mac.
1001 Fonts – Mais de 2000 fontes para download gratuito.

Por enquanto é só! Esperamos que você aproveite este artigo para melhorar ainda mais a qualidade visual e o poder de comunicação dos seus trabalhos.

Grande abraço e até a próxima!

Tags: agência Liquid, Desenvolvimento, fontes, logotipos, marca, portfolio, tipografia, Web Design

Esta entrada foi postada em 07-10-2009 às 10:20 e está arquivada como Coisas da Agência..., Desenvolvimento, Dicas, SEO, Web Design. Você pode seguir as respostas a esta entrada através do feed RSS 2.0. Comentários e pings estão fechados.