7 dicas simples de tipografia para melhorar o visual de seu blog ou de seus documentos
|
Efetividade.net é a sua fonte de informações originais e atualizadas sobre produtividade pessoal,
efetividade, lifehacking, GTD e truques espertos para o seu dia-a-dia. Leia também:
|
Até mesmo os profissionais da área raramente conhecem com profundidade suficiente os preceitos da tipografia, e em geral agem “de ouvido” na hora de selecionar a melhor fonte true type, a largura de suas colunas, o espaçamento entre as palavras ou outros aspectos tipográficos envolvidos na criação dos textos mais comuns.
As tecnologias atuais da web com CSS e dos processadores de texto mais comuns permitem uma boa amplitude e profundidade de controle tipográfico, mas isto vale muito pouco se você não souber definir corretamente os seus parâmetros.
Eu mesmo não sou nenhum especialista no assunto, entretanto andei lendo sobre esta arte e abaixo compartilho com vocês (sem usar nada do vocabulário altamente especializado dos tipógrafos) algumas das dicas simples que encontrei para alcançar uma melhor composição visual ao preparar websites, blogs ou mesmo documentos impressos.
A maior parte do material abaixo teve origem no texto “Five simple steps to better typography“, de Mark Boulton. Se você lê em inglês, não deixe de olhar os detalhes adicionais e ricas ilustrações do texto dele!
Vamos às dicas:
- Largura das colunas de texto: A largura ideal é uma função do tamanho da fonte que você adotar, e a regra prática para buscar a melhor legibilidade é usar como base a largura ocupada por 2 ou 3 alfabetos completos – ou por uma frase de 50 a 80 toques.
- Altura das linhas de texto: O valor ideal é uma função do espaçamento entre as palavras do seu texto e da largura da coluna – a altura da linha deve ser maior que o espaçamento entre as palavras, e deve crescer na proporção em que você aumenta a largura das suas colunas de texto.
- Texto em reverso: Se o seu texto é em cor clara sobre um fundo escuro, você deve diminuir o peso da fonte, aumentar o espaçamento entre os caracteres e aumentar a altura das linhas.
- Espaçamento entre as palavras: Para melhor legibilidade, quanto mais estreita a coluna, menor o espaçamento entre palavras.
O exemplo da direita mostra bullets “pendurados”
- “Pendurando” os bullets: Quando você criar listas de itens e demarcá-las com “bullets”, como os desta lista que você está lendo (e que não está tipograficamente correta), a melhor legibilidade é obtida quando o texto fica alinhado verticalmente com o parágrafo acima da lista, e as marcações (“bullets”) ficam à esquerda, “pendurados” na margem. Veja exemplos na figura acima.
fonte ATF Antique
- Escolha fontes adequadas: Quanto menos variação de fontes, melhor. Não existe uma regra geral, mas o mais comum é escolher fontes com serifas (exemplos: Times, Garamond, Baskerville, Bodoni) para o corpo do texto, e fontes sem serifas (exemplos: Arial, Helvetica, Futura, Frutiger) para os títulos. O ideal é que haja diferenciação clara e contraste entre a fonte do corpo e a dos títulos. Para ver algumas fontes de boa qualidade que você pode usar sem pagar nada nem infringir direitos autorais, visite o artigo “25 Best Free Quality Fonts“, de Vitaly Friedman.
- Escolha tamanhos de fontes obedecendo a escala de tipos: Os tamanhos e proporções entre os diferentes elementos de texto são padronizados pelos tipógrafos há séculos, e se reproduzem nos livros e revistas que você lê, desde as primeiras cartilhas. Adotando os tamanhos e proporções padronizados, que são os da figura acima, você causa melhor impressão no leitor e aumenta a legibilidade.
Links comentados via del.icio.us - 6 » Japs comentou:
em October 31 2006 @
[...] O sétimo link de hoje: 7 dicas simples de tipografia para melhorar o visual de seu blog ou de seus documentos, artigo muito interessante, que recomendo fortemente a leitura. [...]
Luís comentou:
em November 2 2006 @
O legal é que o LateX faz tudo isso sozinho…
Links comentados via del.icio.us - 7 » Japs comentou:
em November 19 2006 @
[...] A terceira parte se refere a algumas dicas de tipografia no artigo 7 dicas simples de tipografia para melhorar o visual de seu blog ou de seus documentos, você encontra 7 dicas realmente muito interessantes sobre o assunto, e neste link, t.y.p.o.r.g.a.n.i.s.m : ASCII-O-Matic, um achado do Henrique, sobre ASCII Art, e neste outro, My favourite typography books, vale a pena visitar, excelentes dicas de livros. [...]
» Mais 5 belas fontes true type grátis para download e uso « Efetividade.net comentou:
em January 19 2007 @
[...] No artigo 7 dicas simples de tipografia para melhorar o visual de seu blog ou de seus documentos já demos dicas de como escolher boas fontes, inclusive com exemplos disponíveis para download grátis e uso liberado. [...]
Programming For Fun And Profit :: Quer aumentar seu portfolio de fontes? comentou:
em January 20 2007 @
[...] O blog efetividade.net, mantido pelo Augusto Campos do BR-Linux, publicou alguns tópicos relacionados ao uso de fontes para melhorar a apresentação de documentos e sites. Este tópico, sobre 5 fontes true type grátis para download, me chamou a atenção e embora eu ainda não tenha testado todas elas, pretendo faze-lo em breve. Seguindo os links do tópico você ainda pode encontrar ainda mais fontes true type grátis para download. Lamentávelmente poucas dessas fontes são razoáveis para programar, ainda assim convém conferir. [...]
::...Rascunho Digital...:: comentou:
em February 5 2007 @
Tipografia…
Esta dica veio do curso do Bruno Ávila de web design, excelente conteúdo para quem quer entender melhor sobre o assundo.
Recomendo, parabens pelo trabalho.
Fabiano
……
» Thinking with Type: Você sabe por que chamam as maiúsculas de “caixa alta”? « Efetividade.net comentou:
em February 25 2007 @
[...] Não sou tipógrafo nem designer, mas as técnicas da tipografia sempre me chamaram a atenção, especialmente porque são uma ferramenta a serviço da comunicação clara e direta. Já escrevi antes sobre tipografia aqui no Efetividade.net, sempre com foco nos documentos digitais: escolha de fontes, entrelinhamento, margens, marcadores e outras características tipográficas aplicadas a páginas web, folders, currículos, etc. [...]
» Fontes: conheça 10 alternativas originais para a Arial e a Helvetica « Efetividade.net comentou:
em February 28 2007 @
[...] – Thinking with Type: Você sabe por que chamam as maiúsculas de “caixa alta”? – 7 dicas simples de tipografia para melhorar o visual de seu blog ou de seus documentos [...]
» SEO no Brasil: otimizando seu site ou blog para obter melhores posições no Google - parte 2 - Efetividade.net comentou:
em August 4 2007 @
[...] ao design e à redação: Aspectos como a tipografia (não apenas a escolha da fonte – e a Verdana é a mais popular entre os top 100 do Technorati – [...]
Igor comentou:
em September 17 2007 @
Opa cara parabéns!
–
http://www.igordiniz.com.br
Tipografia: fontes e mais fontes, e o Oscar de typefaces « Efetividade.net comentou:
em March 11 2008 @
[...] 7 dicas simples de tipografia para melhorar o visual de seu blog ou de seus documentos [...]
Design, Web Standards e um copo de café » Blog Archive » Dicas para Tipografia comentou:
em March 27 2008 @
[...] O blog Efetividade.net possui um post muito interessante sobre tipografia, entitulado: 7 dicas simples de tipografia para melhorar o visual de seu blog ou de seus documentos. [...]
Semana da tipografia « Efetividade.net comentou:
em August 20 2008 @
[...] de artigos relacionados a tipografia já publicados aqui no Efetividade, tais como: “7 dicas simples de tipografia para melhorar o visual de seu blog ou de seus documentos” e “Fontes: conheça 10 alternativas originais para a Arial e a Helvetica“, entre [...]
José Antonio Meira da Rocha comentou:
em October 4 2008 @
Muito boas dicas. Mas o item sobre bullets pendurados — questão de gosto, claro — parece equivocado. Bullets indentados têm melhor legibilidade que pendurados.
Diego comentou:
em February 15 2010 @
Aquele “errado” está certo e aquele “certo” errado. Porque aquele “errado” está destacando justamente as listas que precisam de maior destaque.
Totalmente correto.