Preocupado com Tipografia? Veja esse pequeno guia em 5 passos! | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Preocupado com Tipografia? Veja esse pequeno guia em 5 passos!

Publicado na categoria Artigos com 8.163 visualizações e 2 comentários

Sempre que eu visito um site ou leio um livro, a primeira coisa que nos chama a atenção é a fonte utilizada. Se a fonte ou a tipografia não for atrativa, não me sinto encorajado a continuar a leitura mesmo que o conteúdo seja excelente. Concordo que a “beleza reside no olhar de quem observa”, e algumas fontes são mais bonitas do que outras, mas, é um fato conhecido que se a fonte de seu site não é legível, você terá grandes problemas em criar e manter a audiência da sua página.

Para lhe auxiliar na escolha da tipografia mais adequada para seu projeto, nós colocamos juntas algumas dicas e conceitos que você deveria considerar quando decidir qual tipografia deseja utilizar. E por falar nisso, veja o artigo anterior do autor sobre “tipografia no design responsivo (http://speckyboy.com/2012/11/12/typography-responsive-web-design/)”.

1º Passo – Legibilidade

O que define o conceito de “boa legibilidade”? Naturalmente, uma fonte que respeita e dê assistência, e até mesmo inspire o usuário a lê-la. Uma fonte é inútil se ele prejudica a leitura ou faz o nosso visitante exercer um esforço descomunal para tentar decifrar o que está escrito lá. Então, na hora em que for escolher uma tipografia, você primordialmente deve concentrar-se na legibilidade antes de qualquer outro aspecto!

As regras para definir a legibilidade não são difíceis: evite fontes cheias de detalhes, fique longe de cores que agridem os olhos dos seus leitores, e por aí vai. Entretanto, se o seu projeto demanda o uso de fontes especiais ou uma fonte “detalhada”, obviamente terá de utilizá-la. Porém, use com parcimônia e se puder, em locais que não afetem a leitura ou entendimento. Assim como, procure não promover um esforço absurdo para que o leitor entenda o que ali está escrito.

Talvez o melhor exemplo de legibilidade na tela é testemunhado na fonte Open Sans. Afinal, o WordPress não iria favorecê-la sem motivo, certo? Se quiser, faça um teste de legibilidade, utilizando a fonte Arial/Helvetica e a Open Sans para um mesmo texto. Veja diferença entre ambas e dê sua própria opinião sobre o assunto!

Se você estiver utilizando um monitor gigantesco, você poderá dizer que não vê problemas em utilizar a família Arial/Helvetica em seus projetos. Mas experimente ler o mesmo texto utilizando um dispositivo móvel, como um celular com tela de 480px de resolução. A Open Sans permite uma legibilidade superior em dispositivos menores.

2º passo – Cores

colors

Cores são um dos aspectos mais discutidos no design e devem ser cuidadosamente escolhidas. E elas merecem mesmo uma atenção especial; afinal de contas, nós definimos o que enxergamos utilizando a teoria das cores.

Em se falando de tipografia, você deve escolher uma cor que não atrapalhe a leitura de seu usuário, e ao mesmo, ela precisa se destacar e complementar o design.

Agora, nesse ponto, você precisa exercitar um pouco de sua precaução: sua escolha de cor deve ser inteligente o bastante para ser notada, mas sóbria o bastante para que não passe aquele apelo de “olha, estou aqui! Me leia!”. Em outras palavras, um bom conjunto de cores vai apenas somar à sua tipografia, e deixe que a fonte e o conteúdo façam a comunicação. As cores são um aspecto importante no design, mas nunca devem ser apenas o mais importante.

3º passo – Tamanho, espaçamento e posicionamento

size-placement

O tamanho do texto é algo que você não pode ficar experimentando em demasia. Claro, você pode inserir um título que seja imenso, e se estiver criando um site pessoal ou de portfólio, você pode empregar as fontes de maneira mais liberal. Entretanto, se estiver criando um site do tipo “Portal de Notícias”, seu texto precisa deve ter um tamanho de fonte legível; não imenso ou ínfimo.

Dê uma olhada no site da Denise Chandler´s (http://www.denisechandler.com/). A fonte escolhida pôde ser uma cheia de detalhes, pois obviamente se trata de um portfólio e não de um site de assistencialismo. Porém, o posicionamento e espaçamento do texto (visível se você rolar a página um pouco pra baixo) cheira a escolha inteligente. As linhas precisam ter um espaçamento adequado: se for grande demais, você corre o risco de deixa-las “longe uma das outras”; se pequena demais,  corre-se o risco de deixar um amontado de texto que dificultaria a leitura.

4º passo – Espaço para inovação

innovation

Como designers e artistas criativos que somos, precisamos ter um espaço próprio para inovar, certo? Exatamente, eu concordo, absolutamente!

Agora, obviamente, eu não posso “dizer” à você como inovar ou experimentar, mas aqui estão alguns pontos e normas que você deveria observar e ter em mente quando criar um conjunto de tipografia.

  1. Tenha sempre em mente que o propósito básico da tipografia é auxiliar na leitura. Experiências tipográficas devem ser conduzidas no intuito de auxiliar a tarefa da leitura, e apenas para isso!
  2. Tenha seu público-alvo em mente. Se for um site de notícias, utilize fontes que exalem profissionalismo. Se o projeto for voltado a uma danceteria, utilize uma fonte menos sisuda para a mesma.
  3. Se você pensa na inovação com seriedade, tente deixar os estereótipos para trás. Um site de notícias deve obrigatoriamente ter uma fonte profissional, mas sem precisar ter uma fonte Old Text para o logo ou um Times New Roman para o texto principal.
  4. Tenha certeza que as cores selecionadas façam um conjunto harmonioso com o design em si, mas que não atrapalhe a boa leitura de seu conteúdo! Você deve escolher suas cores baseando-se no design principal, e nunca o contrário.
  5. Nem preciso dizer, mas vamos lá: fique longe da Comic Sans. Ah, um notinha sobre outras fontes que devem ser evitadas estão aqui: http://www.cracked.com/funny-5647-fonts/

5º passo – A mensagem

Qualquer coisa associada com criatividade deve transmitir uma mensagem. Uma novela transmite a ideia do autor para seus telespectadores, uma pintura expressa os sentimentos do pintor; até mesmo um panfleto ou um pôster contém uma informação para seus leitores. Naturalmente, web design não foge disso.

Agora, a fim de fazer suas decisões tipográficas se misturar bem com a mensagem principal do site, você deve se questionar repetidamente: “qual é o principal objetivo do site e qual a mensagem que ele deve transmitir?”.  Se estiver criando um site para levantar fundos para alguma ação social, a tipografia deve ser impactante e passar essa ideia; não deve se comportar como um site de esportes, por exemplo.

Deixe-nos considerar, por exemplo, o site The Peach Design. Desde que o website seja de um artista criativo que pretende exibir projetos web, a tipografia deveria passar o aspecto criativo de uma maneira que represente essa qualidade. Em outras palavras, utilizar uma fonte “mundana” ou muito engessada é uma má escolha aqui.

message

A legenda enorme retrata a criatividade e visão de design do artista; assim, quando visitar o site, você descobre que está lidando com uma pessoa disposta a oferecer-lhe sites e ilustrações, e a opção de fontes que vão abaixo dos elogios da passam essa impressão também.

Conclusão

Chegamos ao final desse artigo que trouxe 5 passos para melhorar suas escolhas tipográficas. Espero que lhe ajude bastante. Para finalizar, eu gostaria de dizer que, independentemente da escolha tipográfica que fizer, tenha certeza de que ela se adequará ao seu projeto e que respeite o seu público-alvo. Os aspectos estéticos de web design são melhores retratados em seleções de tipografia e, portanto, você nunca deve esquecê-lo.

Quais são seus pensamentos sobre tipografia? Por favor, compartilhe-os conosco nos comentários abaixo!

Traduzido do original: Worried About Typography? Check Out This Five-Step Guide!

Voltar à página anterior!

  • Eu gostei de ler sobre escolha de fontes.

    Geralmente surgem dúvidas ao publicar textos.

    Vou digitar o mesmo texto nas fontes sugeridas e observar o resultado.

    Muito obrigado pela dica.