solicite uma cotação

15.SETEMBRO.2017

Escolhendo a fonte certa: um guia prático de tipografia na Web

Escolhendo a fonte certa: um guia prático de tipografia na Web

A tipografia é um campo enorme. As pessoas dedicam anos de suas vidas a esse antigo ofício e, no entanto, sempre há algo de novo a aprender. Neste post, vou analisar os principais pontos que você deve considerar ao selecionar um tipo de letra para um site.


Tipografia Prática

Quando você cria para a web, você deve aceitar que o conteúdo mudará. É simplesmente fora de questão investir um tempo para ajustar espaços individuais para cada texto em um site. Em outras palavras, você desiste de algum controle.

O que eu vou focar hoje é a tipografia prática. Para mim, isso significa aceitar que você nunca terá controle total sobre o tipo em seus sites. Escolhendo um tipo de letra, decidindo sobre um tamanho, estas são todas as coisas em que nós, como designers, dizemos. A tipografia prática significa aprender como, e mais importante, por que, ajustar o que você controla. Vamos começar.
 

Legibilidade

O que você faz com o tipo? Você lê! Então, por que tantos sites tornam tão difícil de fazer exatamente isso? Seja minúsculo o tamanho da fonte, abarrotado de altura da linha ou simplesmente fontes feias, parece que muitos sites por aí estão determinados a não permitir que você aproveite seu conteúdo!

Ao tornar seu tipo legível, você imediatamente salta em frente de pelo menos metade da competição, o que é afortunado, realmente, porque não é tão difícil!
 

Tipos de letra

Ao decidir qual tipo de letra usar em seu site, é importante lembrar: não pense demais. Eu sei que muitos designers odeiam utilizar Helvetica, porque é extremamente usado. Eu sei, mas há uma informação muito importante que esta declaração deixa de fora: por quê. As pessoas abusam do Helvética porque é bom demais. Ele se encaixa perfeitamente com praticamente todos os projetos imagináveis, funciona bem em tamanhos pequenos, bem como enormes.

Embora possa ir contra suas crenças para definir seu tipo, se isso funcionar, então vá em frente.

Seu corpo é indiscutivelmente a parte do seu design que precisa ser mais legível, portanto, certifique-se de escolher uma fonte que funcione bem em tamanhos pequenos. O que eu quero dizer com isso? Se você pode configurar seu corpo em 10px e você ainda pode entender o que diz, então é uma boa indicação de que você escolheu um tipo de letra legível.

Isso abrange o corpo, mas e os títulos?

A legibilidade em grandes títulos é muito mais fácil de descobrir do que nos textos. Se você pode entender o que diz imediatamente, então é legível o suficiente.

O que é bom sobre tipos de letra é que, uma vez que você trabalhou em muitos projetos, você terá uma boa idéia do que funciona e do que não. A partir daí, você estará em uma posição melhor para fazer escolhas críticas sobre fontes.

Não existe uma fórmula para escolher as fontes corretas para o seu site. Muitas vezes, a melhor maneira de decidir sobre um tipo é apenas testar cada fonte que você acha que pode funcionar, e depois comparar. Escolher fontes é realmente um instinto, mas é importante lembrar que 90% do tempo, um usuário não estará pensando sobre o tipo de fonte usada, então, se for legível, então muitas vezes é bom o suficiente.
 

Emparelhamento

Há raramente (se alguma vez) uma situação em que apenas um tipo de letra é apropriado para uso em um site. O site médio tem muito texto. Não há como um tipo de letra funcionará para todos eles! A grande maioria dos sites bem projetados usa dois tipos de letra: um para textos e outro para manchetes.

Ao escolher um par de fontes, a coisa mais importante a considerar é como elas funcionam juntas. "Eles são semelhantes o suficiente?" "Muito semelhante?" "Não é o suficiente?" Tudo isso são perguntas que você deveria estar se perguntando. Eu acho que a melhor maneira de escolher um par de fontes que funciona é apenas colocar muitos deles lado a lado e decidir sobre o melhor. Não há como saber qual é o melhor até que você tenha tentado todos eles.

Às vezes, o mais apropriado seria dois sans-serifs, enquanto outras vezes, você quer um sans para manchetes e um serif para o texto. Não importa se eles parecem semelhantes, o que importa é se eles agem de forma semelhante. Isso, claro, depende do resto do seu design. Quaisquer fontes que você escolher deve transmitir sua mensagem fortemente, e se isso significa ter tipos de letra contrastantes, então vá para ele.
 

Tamanho

Como regra geral, os designers gostam de definir o seu corpo de texto no mínimo a 12px. A maioria, entretanto, escolheu um tamanho maior como 14px, o que é ainda melhor para legibilidade. Font-sizing é realmente muito fácil de decidir, mas são os títulos que começam a ficar complicados.

Quão grande devem ser seus títulos? Depende. Na minha observação e criação de sites, cheguei à conclusão de que um título só deveria ser tão grande quanto necessário. Isso significa que você deve experimentar diferentes tamanhos até encontrar um que seja o suficientemente grande para chamar a atenção que você deseja, mas se for o que você está procurando, nesse caso, vá em frente.
 

Hierarquia

A natureza de um título é grande. É um item importante na página, então, naturalmente, deve ser maior, certo? Sim e não. Sim, os títulos geralmente são maiores do que outros elementos, mas não, essa não é a única maneira de chamar a atenção para eles. Cor, peso e colocação são igualmente importantes para estabelecer uma hierarquia visual clara para suas páginas.

O ponto chave a lembrar sobre a hierarquia visual é que é tudo relativo. O texto no seu site apenas tem que se destacar em comparação com o outro texto em seu site.

O uso do tipo é uma ferramenta muito importante para estabelecer hierarquia visual, seja por tamanho, cor, peso ou mesmo colocação.
 

Conduzindo

Gerencie o espaço entre linhas de texto, é uma ferramenta inestimável para texto legível. Um bom ajuste pode fazer com que o pior tipo seja legível. Felizmente, não é tão complicado implementar.

Você pode facilmente atribuir espaço entre suas linhas de texto. De um modo geral, para grandes blocos de texto, 1,5 vezes o tamanho do texto é de bom tamanho. O texto mais pequeno deve ter uma liderança mais apertada, e o texto enorme deve ter muito. Na verdade, não é tão complicado.
 

Tracking

O tracking é o espaço entre caracteres no texto.
Geralmente, você não terá que se preocupar com isso por texto pequeno, é apenas para textos que apresentem problema.
 

Cor

Embora não seja tipicamente tipográfica, a cor é uma parte muito importante do tipo de cada site. Não falo sobre esquemas de cores, mas sim sobre o contraste necessário para assegurar a legibilidade em seu site. O texto preto em um fundo branco (ou fundo claro) é amplamente considerado como a cor mais legível para o texto.

Não estou dizendo que você deveria ir e colocar tudo em preto-em-branco, só que quando você estiver projetando, você deve estar ciente do contraste do seu texto. Isso pode voltar para mordê-lo se você não tiver cuidado.
 

O Grid

Na minha opinião, o uso da grade é a idéia mais importante para tipografia prática na web. Você pode ter excelentes tipos de letra, espaçamento e cores, mas se você não possui um bom layout, você também pode usar comic sans.

Usar uma grid quando você está projetando com o tipo fornece um equilíbrio claro e estrutura geométrica para o seu design. Não é a solução mágica para um design ruim, mas se você projetar com uma grade desde o início, você pode ter certeza de que, pelo menos, seu layout será sólido.

Então, o que um grid tem a ver com a tipografia? Simplesmente: tudo . Ele incorpora todos os ideais fundamentais da tipografia. É geométrico, consistente, utilizável e acima de tudo: fantástico.

Definir o texto com uma grade é uma maneira fundamental de estabelecer a hierarquia visual, e é um ótimo indicador de quão grande (ou pequeno) seu texto deve ser.

 

Destacando-se

Como eu disse antes, se você é tipográfico é legível, então você já está à frente de 50% da competição, então, e a outra metade? Se você chegou até aqui, juntos deixamos as regras claras e consistentes de legibilidade e entramos no mundo sombrio e misterioso de ser único.
 

Fontes

Você quer que o seu site se destaque? Use alguma tipografia única. Presumivelmente para você isso significa usar algumas fontes únicas. Mas o que faz uma fonte única? Para mim, não é uma que não é usada com freqüência, mas que tem uma mensagem ou sentimento que não é empregado por outros rostos.

Escolher uma fonte única é realmente sobre o sentimento. Essa fonte se sente diferente? Ou parece apenas diferente? Ao escolher tipos de letra para projetos, você deve sempre considerar a sensação do projeto. Como isso é totalmente uma opinião pessoal, não posso ajudá-lo a encontrar um tipo de letra única. O que posso dizer é, observe o conjunto.
 

Seja heterodoxo

Quantos sites você conhece cujo logotipo é tão grande quanto o conteúdo? E quanto a um título ultra-fino? Ao contrário do meu último ponto, ser pouco ortodoxo é ver o que os outros estão fazendo e fazer o contrário.

Mesmo que você visite seu site por apenas um momento, não pode deixar de lembrar seu nome.

 

Combine seu projeto

A tipografia não é algo próprio. É uma parte do design web como qualquer outro. O tipo é importante, sim, mas você não deve esquecer que isso é apenas parte do que faz um design web ótimo. Você deve projetar seu tipo com o resto do seu projeto em mente.

Se você usar um fundo altamente elaborado, então talvez um serif agradável seja bom para seus títulos.

O meu ponto aqui é simples: não esqueça o contexto. Design é um campo enorme, e hoje estou apenas falando sobre uma parte disso. Para um design bem sucedido do site, todas as partes precisam se juntar de forma bem sucedida. Esse é o objetivo: criar a experiência que alguém terá em seu site. Você não pode fazer isso com apenas digitar, ou apenas cor, ou mesmo apenas conteúdo!
 

Bem, você chegou ao final do post. Espero que, pelo menos, você tenha adquirido uma visão geral, ser legível . O resto seguirá.

 

Artigo inspirado: https://goo.gl/Mxi8aM
 

Vamos conectar as
melhores ideias?

Porto Alegre

51 3023.7878

Rua Joaquim Nabuco, 20 / 205
Cidade Baixa - CEP 90050-340
Porto Alegre - RS

São Paulo

11 3042.0323

Avenida Dr. Chucri Zaidan, 940 / 16º andar
Brooklin - CEP 04583-906
São Paulo - SP

solicite uma cotação
ou contato@agenciaready.com.br

© Copyright Agência Ready. Todos os direitos reservados.

Vamos conversar?

Informe alguns dados para entendermos melhor seus objetivos e seguirmos o bate-papo.

[fechar]

Solicite uma Cotação

Excelênte, este é o primeiro passo! Informe alguns dados para entendermos melhor seus objetivos e seguirmos conversando.

[fechar]