Planos a partir de R$ 39/mês Inscreva-se Agora

A Importância da Tipografia para a Web

Por que Tipografia é importante para web?

Tipografia muda completamente o seu layout, da forma mais simples possível.

Em 2006 o pessoal da empresa Information Architect Inc, fizeram um post polêmico afirmando que web design era 95% tipografia. Ou seja, a maior parte do design de um site é influenciada totalmente por como a tipografia é trabalhada nele.

Eles não poderiam estar mais corretos. Não só a maior parte do conteúdo da web é textual como a maioria das interfaces dependem de textos para serem usadas.

E é fácil perceber como tipografia tem um papel principal, basta entrar nos principais sites que você acessa no dia a dia para perceber que a maior parte deles é composta por textos.

E você pode até querer argumentar, aaaaa mais meu Facebook é cheio de postagens com fotos, sim fotos estão em todos os lugares, mas me diz uma coisa, quantos formatos diferentes de fotos você vê por dia? Não são todas quadradas ou retangulares?

Quantos formatos de imagem você vê em um site? E agora, quantas variáveis tipográficas você consegue contar? Títulos, subtítulos, botões, corpo de texto e +

Agora vê a quantidade de variáveis tipográficas que o Facebook tem? Percebeu? Tem o texto dos botões (que são diversos e em diferentes formatos), tem o texto do comentário, da postagem inicial, o nome da página, o nome do seu amigo, texto de anúncios e por ai vai.

Aaaaa, mas tem também as caixas, linhas, ícones e etc que acompanham a organização do layout. Sim, tem sim, mas cada um desses elementos são criados de forma que se comuniquem e respeitem 100% a tipografia do site. E lembrando que tipografia não é escolher fonte. É definir escala, altura, largura, estilo, cores e mais.

Trafego Mobile - 33% em 2015

Se em 2006 era 95% agora é 99%

O mobile está cada vez mais forte.

Ai você pensa: “Antigamente tudo bem, mas agora com a internet mil vezes mais rápida que a de 2006 isso muda, pois vamos poder usar mais imagens e tal”. Não, não mudou e na verdade a tipografia só ficou mais importante.

Sabe do responsivo né? Aquela palavra que hoje em dia é mais falada do que web design em si. E sabe por quê? Simplesmente por que em 2015 já são mais de 33% o total de acessos na internet através de dispositivos móveis.

Para você ter uma noção, eu conheço pessoas que nunca tiveram acesso a um computador, mas agora possuem em mãos um smartphone com total acesso a internet.

Mas e o que isso tem com Tipografia Para Web? Se você é como eu, uma das primeiras coisas quando você acessa um site novo é ver se ele é responsivo. Já percebeu o que acontece quando o site está em sua versão mais compacta (a mobile)? Some grid, some algumas imagens, some efeitos e o que fica? Texto, texto por toda a parte, de ponta a ponta. Agora percebeu? Que a importância é maior ainda agora?

O que eu devo fazer?

Como faço para melhorar as minhas escolhas tipográficas?

Acho que em qualquer área bastam essas três coisas para você aprender:

Estudo

Você tem que saber que tipografia é um assunto muito antigo e de extrema importância para o mundo. Para você ter uma noção, eu já vi um documentário que listava as 100 invenções que mudaram o mundo. Como você pode prever a Roda era a número 1, e a segunda era a Prensa de Gutenberg, a mesma que revolucionou o uso da tipografia.

Isso quer dizer que existem milhares de publicações sobre o assunto. E os conceitos não mudaram tanto do impresso para a Web. Os fundamentos continuam os mesmos e o que deveria ser seguido no impresso continua sendo muito bem visto na Web.

Indico os livros:

Exatamente por eu nunca ter achado nenhum curso online sobre o assunto, direcionado diretamente para a web que eu criei o curso de Tipografia Avançada para Web. Acho ser também uma ótima fonte de conhecimento para quem tem interesse no assunto. (E até o momento todo mundo está adorando).

Você é o que você vê. Se você se cercar de bons trabalhos certamente terá um impacto direto nos seus projetos.

Referência

Se você quer ser um bom jogador de futebol, você tem que ver o Neymar, Ronaldinho, Messi, Pelé, Garrincha e outros gênios do futebol jogar. Não adianta querer inventar passes, chutes e jogadas novas se você não conhecer o que já existe.

Por isso referência é essencial e eu nunca vou cansar de bater nesta tecla. Se você é cercado de sites ruins, sites mal construídos, feitos sem nenhum critério ou processo de design, você não vai saber diferenciar o bom do ruim.

É um trabalho simples, basta observar. Ache uma fonte de inspiração boa e use ela incansavelmente. Um único site, um único projeto bem feito pode servir como referência para uma vida toda. A boa notícia é que existem milhares de sites bem feitos (mas bilhares mal feitos).

Fontes de referência.

Eu não canso de ver o Typewolf, a curadoria de Jeremiah Shoaf é genial. São, na maioria das vezes, sites simples que possuem escolhas tipográficas impecáveis.

Prática

Agora não adianta nada você ver todos os vídeos de futebol, se não praticar. A pratica é essencial e quanto mais projetos você fizer melhor você ficará. Faça projetos pessoais, projetos fictícios e mais.

Tente sempre utilizar novas técnicas e métodos, não fique sempre no mesmo estilo de layout ou tipografia. Depois que você ler sobre o assunto e ver referências, quando for colocar no papel tudo muda, parece que existe um bloqueio entre você e o que é bom. Mas isso é normal, e a prática que vai mudar isso.

E o melhor de tudo. Tipografia é fácil. Ninguém precisa desenhar a sua, existem milhares. Você só precisa aprender como utilizá-las. E isso é uma questão de escolhas bem simples.

Se você entende inglês, da uma olhada nesse vídeo do Ira Glass. Aqui ele fala exatamente sobre a questão da prática levar a perfeição.

Está mais interessado no assunto, da uma olhada no vídeo de introdução do curso completo de Tipografia Avançada para Web, para entender o que eu ensino nele.

Mais Dicas

Código

CSS Display Inline vs Display Block

Código

CSS com SASS

Código

Como adicionar uma barra de loading igual a do YouTube com JavaScript

Código

O Box Model

Código

Como usar a função Calc de CSS