Inspirações Tipografia para web

Tipografia para web

Por Priscila Vasconcelos

tipografia é poderA tipografia é a alma de um trabalho gráfico, seja ele em ambiente físico ou virtual. Ela tem muita importância no peso da informação e na forma que os utilizadores perceberão o conteúdo que se pretende transmitir. De acordo com Oliver Reichenstein, o Web design é 95% tipografia. Um tipo mal escolhido pode acabar com todo o processo anterior de elaboração da estratégia visual. 

O primeiro ponto é saber que a tipografia para web é distinta da escolhida para o papel. O meio, o tempo e forma de interação são diferentes, por isso, os tipos tem que ser escolhidos criteriosamente para que o usuário tenha a melhor experiência com o site, seja através do telefone, tablet ou desktop. Dito isso, é bom lembrar que a tipografia não é apenas escolher o tipo, e sim analisar todo o conteúdo textual que será apresentado: o contraste, o comprimento, o tamanho, a hierarquia, a legibilidade, a leitura, o espaçamento e a composição final da estrutura textual.

tumblr_m57rpejU0d1rs73t7o1_400

Sendo assim, vamos seguir por partes (estruturadas de acordo com a criação de conteúdos dos sites) e tentar entender as melhores formas de utilizar a tipografia em cada passo da concepção do site.

Headline (Manchete)


O headline do seu site é extremamente importante, já que de acordo com as pesquisas, a maioria das pessoas lê apenas os títulos quando está na internet. O certo é apostar nos headlines destacados para conquistar a atenção do utilizador, incentivando a leitura posterior do corpo de texto.

De acordo com um estudo feito em 2013 pela Smashing Magazine, os tipos sem serifa lideram com 51% as posições de utilização em headlines dos sites. No entanto, nos últimos tempos os tipos com serifa passaram a ser mais utilizados devido a uma crença de que se destacavam nas manchetes, criando uma estrutura mais legível. 

Os tipos com serifa mais populares para headlines são a Georgia e a Chaparral Pro, enquanto os sem serifa são a Arial e a Freight Sans Pro.

A tendência, que já vem sendo utilizada há alguns anos e que permanece em 2015, é a de sites com tipos muito grandes e em negrito, com forte impacto visual, simples e eficaz, justificando a atenção voltada a questão do headline do site.

Corpo de texto (body)


O corpo de texto é uma das partes mais importantes do conteúdo do seu site, visto que é onde o utilizador irá absorver as informações que você necessita repassar. Apesar de nos headlines a diferença entre a utilização de tipos com e sem serifa serem pequenas, de acordo com pesquisas, no corpo do texto a questão é diferente. Aproximadamente 61,5% dos sites utilizam tipos com serifa no corpo de texto contra 36,5% da utilização sem serifa.

O mesmo estudo indica que a maioria dos sites hoje em dia, não utiliza tipos padrão nem no headline, nem no corpo de texto. Isso deve-se a necessidade que as marcas tem de se diferenciar na escolha dos tipos, optando por serviços como o Fontdeck, e o TypeKit que fogem das possibilidades uniformizadas de utilização d tipos para a web.

Você pode utilizar também o serviço do Adobe Edge Web Fonts ou o FontSquirrel para mais opções de tipos não padronizadas.

Fundo (Background)


Uma boa escolha de fundo para um site é a baseada numa cor que permita o destaque do texto em contraste. Isto faz com que seja fácil e rápido do utilizador ler o headline e o corpo de texto de forma mais clara. É importante ressaltar que atualmente muitos sites estão apostando em contrastes menos “duros” e ainda assim legíveis, proporcionando uma leitura confortável que permite a identificação simples de cada linha de texto.

Quando se trata do corpo de texto ainda é muito comum o padrão de fundo branco e texto preto ser utilizado, pois tem bastante contraste e remete ao formato clássico de cor nos jornais, tornando-os mais populares.

Tipografia Responsiva


É inevitável: tudo em web design tem que ser pensado na ótica do design resposivo. Não existem mais larguras fixas e a palavra de ordem é adaptar-se. Hoje em dia 42% dos websites já são pensados com tipografia responsiva. Eles estão preparados para mudar as formas e escalas quando o tamanho dos navegadores mudar. Estas mudanças incluem reposicionamento e ajuste de imagens, menus sendo substituídos por ícones, múltiplas colunas se transformando numa só e fontes sendo reposicionadas e redimensionadas.

Existem várias metodologias para aplicar uma tipografia responsiva num website, especialmente se escrever o seu CSS em SASS, no entanto, para os mais novos nesse mundo, existe uma plataforma chamada Flowtype.js que utiliza javascript para ajustar o tamanho da fonte e a altura da linha do texto de acordo com a largura dos containers específicos. Apesar de funcionar muito bem e ser uma excelente ferramenta para prototipagem, otimização e ajustes, o Flowtype não oferece o controle refinado sobre a tipografia que seria necessário às exigências de um projeto grande e complexo.

Considerações finais


O web design não fará sentido se o seu público não entender ou não se sentir atraído pelo seu conteúdo. Na tipografia para a web existem quatro elementos básicos que devem ser considerados: O tipo, a cor, a textura e a imagem.

Todos estes elementos terão um grande efeito no resultado final do seu website. A mensagem será bem transmitida se a relação entre estes elementos for harmoniosa e escolhida com base no público e na ação que este público terá com o site em questão. Tendo em conta isso e sabendo que grande parte do seu projeto está nas mãos da tipografia, esteja atento a fluidez, hierarquia, textura, ritmo, peso, composição e contexto em que encaixa os tipos no seu projeto.

tipografia para web

Veja abaixo alguns links para aprofundar ainda mais os conhecimentos sobre a utilização da tipografia:

Elliot jay Stocks na conferência Generate London 2014 fala sobre tipografia avançada para web. Stock é diretor criativo da Typekit e fundador da revista de tipografia 8 Faces. (http://www.elliotjaystocks.com/)

Palestra no Event Apart de Jason Santa Maria, fundador do Typekit, Typedia e co-fundador do A Book Apart e do Studio Mighty (http://jasonsantamaria.com/)

Mais alguns links úteis para tipografia web:

Confira também

Deixar um comentário

Portal Design Culture

O Design e a educação movem nossas vidas.

Orgulho de ser de Pernambuco.

Uma empresa embarcada no Porto Digital

Hospedado na Imaginare Digital.

inspiração Em seu e-mail

© Portal Design Culture 2024  – Termos de uso e política de privacidade

Layout por: Estúdio IP/M

Desenvolvido por: O Plano A