Tipografia

Alguma vez você já reparou como em alguns sites é muito mais fácil de ler textos longos que em outros? Ou alguma vez confundiu um h com um b ou um I com um l?

Estes são casos tratados pela tipografia, que além de deixar o site mais bonito, também aumenta sua usabilidade, porque facilita a leitura do conteúdo e da interface.

Neste post pretendo dar uma visão geral da tipografia e da sua importância no design de interfaces humano-computador.


O que é?

Este vídeo, feito por Ryan Uhrich e Marcos "Boca" Ceravolo da Vancouver Film School, é uma ótima e breve introdução à tipografia, apresentando rapidamente alguns conceitos básicos.

Em resumo, tipografia é a arte de apresentar texto de forma agradável e transmitir uma ideia através dele.


Por quê?

Raramente um desenvolvedor de software pensa especificamente na tipografia durante o design de interfaces, a não ser em equipes muito grandes, que contem com pelo menos um designer gráfico.

Claro que desenhar uma fonte não é necessário para o desenvolvedor de software, mas saber utilizar os elementos tipográficos para apresentar conteúdo de forma interessante é muito importante para qualquer um que vá projetar uma interface utilizando texto.

Isso tudo se torna ainda mais importante quando se quer apresentar conteúdo na Internet, já que praticamente toda a informação na Internet é apresentada através de texto. Nos próximos dois artigos, Oliver Reichenstein argumenta que tipografia é o elemento principal do web design.

Web Design is 95% Typography
Reactions to 95% Typography


Como?

Na maioria dos casos, poucos recursos estão disponíveis para o desenvolvedor de software, mas algumas dicas sempre são úteis:

A Guide to Web Typography
On Choosing Type

Resumindo, em primeiro lugar, o texto precisa ser legível. Por isso é fundamental prestar atenção no contraste e no tamanho da fonte. A regra de bolso realmente é ler o texto e é surpreendente a frequência em que isso não acontece.

O segundo ponto importante é conseguir distinguir os diferentes elementos e seções do texto. Para isso, tem-se que pensar na hierarquia do texto e no espaçamento entre as seções. A chamada hanging punctuation também é útil aqui.

Assegurados esses pontos, o passo seguinte é tornar o texto de leitura agradável. Esta é a parte mais complicada, já que é a mais subjetiva. Mas, ainda assim, algumas regras geralmente se aplicam, como estas (com exemplos em CSS).

Note que, apesar da maioria das páginas falarem sobre design de páginas na web, o que é dito pode ser aplicado a qualquer texto.


Exemplos

Um redesign muito interessante de um artigo do guru da usabilidade, Jakob Nielsen.

15 exemplos de sites que usam com sucesso esses conhecimentos.

Uma técnica de animação que surgiu no cinema e se tornou uma mídia independente é a tipografia cinética, isto é, texto em movimento.

Este vídeo sobre a crise do crédito usa a tipografia cinética para ajudar a explicar a atual crise econômica.

Dois vídeos que utilizam tipografia cinética para ilustrar diálogos de filmes famosos:
Oceans Eleven Project
Pulp Fiction in Motion Graphics

Duck and Cover - um vídeo usando um anúncio de segurança pública da década de 1950.


Links

O blog mais conhecido sobre o assunto. Visa apresentar a tipografia para leigos, portanto é bastante acessível. Atualmente não é atualizado com muita frequência, mas é uma grande fonte de informação sobre tipografia.

Estudos sobre legibilidade de textos.

Artigo da Wikipedia sobre tipografia. Tem links para várias definições de termos.

No final desta página já citada aqui existem muitos links interessantes.

Vídeo

Em uma atividade passada, gravamos um vídeo com uma avaliação da interface do Windows Live. Como tivemos alguns problemas técnicos e era a semana de provas, ficou bem mais curto do que planejávamos, mas ainda assim mostra algumas das coisas que mais nos irritam no aplicativo.

MC750 - Avaliação da interface do Windows Live

Primeiro post

Este é o blog do grupo G7 da disciplina MC750 no primeiro semestre de 2009.

Os integrantes do grupo são:

Bruno Marques Beraldo
João Paulo Pereira Zanetti
Marcelo Anderson Nagatomo
Pedro Henrique Del Bianco Hokama
Priscila Do Nascimento Biller