log - smart software development. great user experience

Dicas de tipografia para a web

in Taipei

Um dos elementos mais ignorados para um Webdesign de excelência tem sido a arte da tipografia. Uma grande parte desta falta de atenção deriva do ainda relativo pouco suporte que existe nos browsers.

Escolher o tipo de fonte apropriado para complementar o design tornou-se uma tarefa bastante difícil com a variedade de tipos de fonte que os browsers suportam actualmente.

Até há pouco tempo, utilizar fontes que não estavam por norma instaladas nos computadores, implicava recorrer a imagens, Flash, ou a qualquer outro truque. Mas com a implementação nos browsers mais recentes da propriedade @font-face, permitiu aos designers uma maior criatividade na composição dos seus designs.

Consequências na escolha da fonte

Algumas das fontes das quais ganhámos acesso nunca foram feitas para ser utilizada num ecrã, quer seja por serem esteticamente inadequadas ou porque simplesmente são inelegíveis.

Também existem problemas técnicos relativos à renderização das fontes. Existem diversas inconsistências entre os browsers. O tamanho dos ficheiros das fontes, pode fazer com que as páginas passem a pesar para cima da centena de Kb.

Robert Bringhurst, um conhecido tipógrafo disse que:

A tipografia existe para honrar o conteúdo

Legibilidade

O aspecto mais importante a ter em conta quando escolhemos um tipo de fonte é a sua legibilidade.

Muitos designers não gostam muito da ideia de usar unicamente as fontes que são usadas por defeito pelos browsers – algo que é compreensível – mas que tem uma razão de ser, é que essas fontes tornam o conteúdo de fácil leitura.

Quando se escolhe uma fonte para a nossa página, devemos optar por uma que seja simples. Devemos manter o aspecto simples e não enveredar por um tipo de fonte muito complexa.

Devemos ainda deixar a parte criativa para outros elementos como os cabeçalhos, mas devemos manter o conteúdo o mais simples e legível possível. Uma fonte com um peso médio que tem serifas simples ou idealmente sem serifas é a melhor escolha.

Diferenças entre fontes serif e sans serif

O contraste deve ser elevado, e nunca devemos utilizar fontes abaixo dos 13px. Também não é boa ideia reduzir o espaçamento entre linhas, pelo contrário, muitas vezes é aconselhável aumentar este espaço.

Um último aspecto importante para manter a legibilidade, é, não ter mais do que três tipos de fontes na mesma página.

Escolher as melhores Fontes

Escolher a fonte para utilizar num site é uma das chaves para o sucesso do design que muitas vezes é menosprezada. Ao escolhermos a família de fontes a utilizar devemos assegurar que estas são legíveis nos diferentes tamanhos utilizados no design do site.

Typeface

A escolha do tipo de fonte deve ir de encontro ao objetivo do site

Não vale a pena termos bom conteúdo no site se depois este não é legível. Também é importante escolher um tipo de fonte que vá de encontro ao “espírito” do site. Por exemplo uma fonte de estilo Gothic não seria a mais apropriada para um site infantil, mas talvez servisse para um site de um espetáculo Draconiano.

Definir o Contraste

O contraste é também ele um aspecto importante quando trabalhamos com tipografia.

Contrast

O contraste entre o texto e o fundo ajuda na leitura do conteúdo

Um texto a vermelho pálido sobre um fundo verde pálido, pode funcionar bem, por exemplo estampado numa t-shirt, mas nunca será muito legível.

O texto existe para ser lido e compreendido, o contraste deve ser suficiente para assegurar que o texto é legível. Se não tivermos certeza de que o contraste é suficiente, podemos fazer um screenshot da página, abrir num editor de imagem e transformar a imagem em tons de cinza. Conseguimos ter a percepção se o contraste é suficiente.

Escolher o Tamanho

Quando surgiu o conceito da Web 2.0 notou-se o surgimento de uma estranha tendência, a utilização de fontes de reduzida dimensão passou a ser moda. Alguns designers diziam que se adaptava ao estilo minimalista do design adoptado. Como a maioria dos utilizadores não possui uma visão raio-x, ou uma acuidade 10/10, o tamanho reduzido das fontes não serve o propósito de legibilidade.

Font size 200!

O tamanho do texto é muito importante para a legibilidade

Não devemos definir o texto abaixo dos 13px, devemos pelo contrário, optar por tamanhos superiores. Por exemplo o tamanho da fonte no site da I Love Typography está definido para 16px.

No entanto temos também de ter em conta que uma fonte demasiado grande força os utilizadores a fazerem demasiado scroll para conseguirem ler todo o conteúdo. Encontrar o equílibrio é normalmente possível escolhendo uma fonte de tamanho médio, outra opção, talvez mais correcta é fazer com que o tamanho da fonte se ajuste às preferências de cada utilizador.

Hierarquia

Variar o tamanho da fonte é a melhor forma de diferenciar o conteúdo. A utilização constante e consistente de diferentes tamanhos de fontes ao longo da página reforçam a importância de cada elemento para os utilizadores.

Moai, Ahu Tongariki, Easter Island

Uma boa hierarquia ajuda na identificação dos blocos de texto

Também serve para os utilizadores poderem fazer uma leitura de varrimento e captar as principais ideias que pretendemos comunicar — o que poderá servir para captar a atenção e levá-los a permanecer mais tempo no nosso site.

Cada elemento na página deve guiar progressivamente o utilizador pelo conteúdo que o site pretendo transmitir. A forma como a página é apresentada pode reforçar a hierarquia através da utilização de diferentes tamanhos, negritos, sublinhados, etc. A mistura entre fontes com e sem serifas também pode servir para criar um efeito harmonioso.

Usar uma escala para definir os diferentes tamanhos pode conseguir uma boa hierarquização. Por exemplo, a escala pode ser de 14px para o corpo de texto, e ir aumentando de tamanho, 16, 18, 21, 24, 36, 48, 60 até 72 px para os maiores cabeçalhos.

Podemos utilizar os nossos próprios padrões, tendo sempre em atenção a consistência entre as páginas.

Espaço Branco

O espaço branco é o espaço negativo que existe entre os diferentes blocos que compõem uma página, não necessariamente branco, mas os “espaços” que permitem que o conteúdo respire. Devemos deixar o texto respirar. O espaço branco deve ser algo sempre presente nas páginas. Este espaço ajuda a que a nossa atenção se focalize no conteúdo, e se é o texto que deve falar mais alto, então devemos “ouvi-lo”. Devemos deixar espaço branco nas margens, nos cabeçalhos e nos rodapés.

Podemos usar propriedades das CSS para conseguir este espaço, como o line-height, este deve ser pelo menos 140% do tamanho do texto.

Os tipógrafos costumam passar horas a trabalhar no “micro espaço” que existe entre cada caracter. Passam muito tempo a tentar encontrar a melhor harmonia entre o negro do caracter e o espaço branco que o rodeia. Cabe aos web designers, pensar no espaço macro, nos “buracos” que existem entre os blocos de texto das páginas.

Alinhamento

Uma grelha bem planeada é sempre uma boa base para um design sólido. As páginas devem ser divididas num sistema de colunas, linhas, cabeçalhos, barras laterais e rodapés, de modo a conduzir o olhar do utilizador para o conteúdo mais importante.

Deve-se usar sempre o texto alinhado à esquerda

Na web não é boa ideia usar um alinhamento justificado. Vai separar as palavras de uma maneira pouco natural, dificultando a leitura. No exemplo utilizado podemos ver que na primeira linha as palavras estão muito mais “arrumadas” que nas linhas 2 e 3, em que a separação das palavras é enorme.

Limitar o número de fontes

Não devem ser usadas mais do que três tipos de fontes no design de uma página, e preferencialmente devemos usar apenas duas. Com duas fontes é possível criar muitas variações que servem o nosso propósito. Se forem necessárias três fontes, esta última deve ser usada com decoro de forma a que não acrescente confusão ao design.

Outras dicas úteis para uma melhor tipografia

  1. Não utilizar aspas verticais. As aspas verticais (também conhecidas como ambidestras), foram concebidas para reduzir o número de teclas num teclado, basta apenas uma tecla para abrir e fechar as citação. Para contornarmos esta limitação, devemos usar as aspas normais, para isso devemos colocar do lado esquerdo da citação: “, e do lado direito ”, o browser irá reproduzir assim: “O meu pequeno pónei”.
  2. Utilizar um traço em vez de dois hífens. Dois hífens consecutivos (–) parece algo descuidado e na realidade interrompe o fluxo natural da mensagem. O leitor, fica preso no meio dos dois hífens a tentando perceber o significado. Para contornar este atentado ao sistema cognitivo do leitor, devemos usar, um traço N ou um traço M.O primeiro tem o comprimento de um N maiúsculo e deve ser usado para:- Intervalos de valores (1–10)- Relações e conexões (Benfica ganha ao Sporting, 3–0)- Adjetivos compostos (MS–DOS)

    Escrevemos um traço N (En Dash) no html com: –

    Um traço M tem o comprimento de um M maiúsculo e é usado para indicar uma mudança temporária no raciocínio, quer no meio quer no final de uma frase. Escrevemos um traço M (Em Dash) no html com: —

  3. Ajustar o espaçamento das letras, palavras, e espaço entre linhas nos cabeçalhos. Podemos, com recurso às CSS, ajustar o espaçamento dos cabeçalhos. Por defeito existe muito espaço branco entre cada letra, palavra e linha se o tamanho da letra for maior que 16. Quanto maior for o tamanho da fonte, mais parece que as letras se separam umas das outras. Devemos ajustar esta fragmentação com letras mais estreitas, palavras mais juntas e um espaçamento de linha mais reduzido.
  4. Usar a unidade EM para redimensionar o texto. Dimensionar o texto na Web não é uma tarefa fácil. Na web os utilizadores tem a hipótese de redimensionar o texto de forma a que se adapte melhor às suas necessidades.Se estamos a usar pixeis (px) estamos a usar uma medida que é estática, e desta forma a retirar a oportunidade para os utilizadores redimensionarem o texto.Se usarmos EM, que é uma medida relativa, o site irá adaptar-se à medida que o utilizador usar o zoom para aumentar ou diminuir o texto.
  5. Adicionar espaço extra entre as linhas. Um espaço entre linhas generoso irá tornar a leitura mais fácil. Como medida padrão para um bom espaçamento é definir a altura de cada linha para 150% do tamanho do texto. Exemplo: line-height: 1.5em
  6. Usar as reticências corretamente em vez de três pontos Quando terminamos uma frase com reticências, normalmente usamos três pontos para indicar uma interrupção. Devido ao comprimento do ponto final, três pontos, não parecem uma interrupção. O símbolo correcto a usar é uma elipse. Para usar uma elipse usamos … que fica assim: …

Fontes

Artigos

Tutoriais