Nada é mais importante do que a legibilidade quando se trata do texto em seu site.

Absolutamente nada.

Se você não consegue ler as palavras, então que bem você está fazendo? Quem está recebendo sua mensagem?

Tão importante quanto as palavras em si é o design do texto - de fontes, a hifenização, a como tudo é organizado na tela. Parte do design inclui as próprias palavras, como você compõe as “grandes palavras” em seu site também pode fazer a diferença.

Seleção de fontes

Existem tantas fontes para escolher. Pode ser muito grande.

Não deixe estar. A melhor coisa que você pode fazer quando se trata de legibilidade é mantê-lo simples.

Selecione um ou dois tipos para o seu site. Um bom lugar para começar é com uma fonte para a cópia do corpo principal e outra para as grandes palavras, como cabeçalhos, banners e texto de destaque. Usar uma fonte diferente para cada elemento é uma distração, confusa e difícil de ler.

Comece com uma fonte sem serifa para a cópia do corpo principal. Sans serifs são os mais fáceis quando se trata de leitura de tela e tendem a funcionar bem, mesmo em tamanhos menores. Fontes com serifas podem começar a “correr juntas” ou perder suas serifas dependendo do tamanho da fonte, resolução da tela e até contraste de cores entre o texto e o fundo.

Typecast

Tenha em mente que sua cópia do corpo será a coisa mais lida no site e precisa ser fácil de digerir em telas de computadores, tablets ou dispositivos móveis. Não há problema em usar diferentes estilos desse tipo de letra na cópia, mas não fique louco. Negrito e itálico são ótimos para pontos de ênfase, mas grandes blocos desses estilos podem ser difíceis de ler.

Se você precisar de ajuda para selecionar um tipo de letra tentando combinar fontes com ferramentas on-line, como o Google Web Fonts ou o Typecast.

Google webfonts

Hifenização

A hifenização é ruim. É feio. É ineficaz e confuso. (E esses problemas aumentam em todas as plataformas.)

Hyphenation

Fique longe disso.

No caso de você precisar de uma atualização, a hifenização ocorre quando uma palavra é dividida no final de uma linha, fazendo com que parte de uma palavra apareça no final de uma linha e o restante da palavra apareça no início da próxima. Usar a hifenização ficou fora de moda quando se trata de web design, mas você ainda se depara com isso de tempos em tempos. (É usado regularmente em publicações impressas, como jornais.)

O raciocínio por trás do uso de hífens era permitir que o texto fosse espaçado de forma adequada (e uniforme) pelas linhas. Ao trabalhar com texto justificado, você pode ter problemas de espaçamento ímpares quando a hifenização é removida.

Mas os hífens que quebram as palavras podem dificultar a leitura do texto. Ler um hífen pode fazer com que uma pessoa tropeça ou interprete mal uma palavra. O uso de hífens também pode alterar inadvertidamente a ênfase de certas palavras ou seu impacto no resto da cópia. Subconscientemente, um hífen diz ao leitor que a palavra é um pouco menos importante do que outras palavras que são inteiramente renderizadas.

Reserve hífens apenas para as palavras que precisam deles, como modificadores, e não para quebrar linhas. O texto parecerá mais limpo e mais profissional e terá maior legibilidade sem todos os traços irritantes nas extremidades das linhas.

Bad Racket

Justificação

Como a hifenização, a justificativa completa caiu fora da moda do design da web, embora ainda seja usada comumente na mídia impressa.

Justification

Digitar usando o ajuste completo preenche cada linha completamente da margem esquerda para a margem direita, de modo que cada linha tenha a mesma largura. Usar a justificação completa cria (e fecha) espaços entre as palavras para que o espaçamento não seja distribuído uniformemente. Usar esse tipo de alinhamento de texto pode funcionar para alguns sites, mas nem sempre é a opção mais visualmente atraente. Dê uma olhada em como o seu texto quebra e tente lê-lo algumas vezes para avaliar se a justificativa completa é uma opção viável.

Existem outros tipos de “justificação” ou alinhamento de texto também. Você pode definir o texto para alinhar na margem esquerda, na margem direita ou no centro.

Para sites em inglês, a justificação à esquerda é a prática mais comum. O texto alinha-se à margem esquerda e possui uma borda direita irregular. A sensação é amigável e fácil de ler. Como essa técnica é tão comum, muitos leitores nem percebem como o texto é configurado. Esta é sua melhor opção para trabalhar com grandes blocos de texto.

Nanozoom

Alinhamento à direita é outra opção, mas não funciona tão bem para trechos de texto. Com o texto alinhado à margem direita e irregular à esquerda, os pontos de início e parada estão localizados na tela de forma desajeitada. A ordem de leitura natural é invertida e apenas o pensamento de ler o texto dessa maneira (especialmente em grandes quantidades) pode deixar o leitor desconfortável. Reserve texto alinhado à direita para pequenas fugas, se você quiser incorporá-lo em seu esquema de design.

The paper mill

O texto centralizado é uma ferramenta bastante popular, embora não seja recomendado para grandes blocos de texto. (As vantagens do alinhamento central são muito semelhantes àquelas associadas ao texto alinhado à direita - ele não tem início e parada “natural” e pode parecer estranho na página. O texto alinhado ao centro pode parecer um pouco formal (porque é frequentemente usado para itens como convites) e deve ser reservado para pequenos trechos de texto nos quais a ênfase é importante. Não é uma boa escolha para grandes blocos de cópias.

Outros efeitos de tipo

Traços ou contornos

Use com moderação em elementos de texto maiores como ponto de ênfase, mas evite em texto pequeno.

Tachado ou sublinhado

Ambos são comumente usados ​​- rasurados como uma notação de que algo não é mais válido e sublinhado para ênfase. Continue usando essas ferramentas, mas use-as com moderação. Ambos funcionam para pequenos trechos de texto, mas causam tremendos problemas de legibilidade quando abrangem mais do que algumas palavras.

53

Inclinação ou distorções

Esses efeitos são ótimos quando você usa a tipografia como uma forma de arte. Eles não são tão eficazes quando você está tentando transmitir uma mensagem. Você deve evitar manipulações de texto e distorções na cópia do corpo principal.

Cor

hip2save

O uso de cores pode ser uma ótima ferramenta para dar ênfase a uma única palavra em um bloco de texto. (As combinações de cores mais comuns e visualmente atraentes para blocos de texto são preto ou cinza escuro em branco ou branco em um fundo escuro.) Apontar para cores que estão em nítido contraste com o plano de fundo para facilitar a visualização e a leitura. As cores super brilhantes (pense em amarelo ou fúcsia) podem ser difíceis de ler, a menos que sejam usadas com um tipo de letra espesso e grande. Considere o tipo em negrito com cor para dar ênfase adicional, mas reserve essa técnica para um número limitado de palavras.

Manter o texto grande limpo

Embora a hifenização possa ser considerada uma questão de preferência na cópia corporal, ela deve sempre ser evitada no tipo grande. Estilos simples de justificação são obrigatórios; texto à esquerda ou alinhado ao centro são suas melhores opções.

Cabeçalhos, faixas, faixas e outros tipos grandes ou móveis precisam ser fáceis de ler. Essas palavras não são apenas usadas para navegação, elas também devem ser lidas para manter as pessoas passando pelo conteúdo do seu site.

Hífens são pedras de tropeço.

O alinhamento estranho não ajudará na navegação.

Existem algumas outras coisas em que pensar também ao traçar o design para o seu tipo grande.

Pense no tamanho do tipo em proporção à cópia do corpo principal. Manchetes e cabeçalhos que são significativamente maiores e mais ousados ​​falam alto aos leitores, enquanto os móveis menores e mais finos sussurram.

Dewey's Pizza

O contraste é da maior importância para palavras grandes. Ao escolher fontes, escolha algo para móveis que não seja muito semelhante à cópia do corpo. Considere uma fonte serif, tendo em mente que as serifas funcionam melhor em tamanhos grandes para que os terminais e detalhes de cada letra não se percam nos pixels. Outra opção é ir para a cor para estabelecer um estilo distinto e hierarquia de móveis.

Ethical Studios

Pense no espaço em torno das grandes palavras também. Certifique-se de que as grandes palavras repousem perto da cópia que descrevem. Adicione espaço extra acima de cada cabeçalho ou título e condense o espaço entre ele e a cópia.

Escreva para caber

Finalmente, pense em encaixar.

Veja como o texto se alinha quando você escreve a cópia para as grandes palavras. Isso preenche a linha? Quantas linhas?

Visualmente, você quer ir para cabeçalhos que tenham uma aparência consistente. Isso se aplica ao estilo de tipo e quanto tempo as palavras são. Evite itens que preencham uma linha completamente e apenas uma fração da linha seguinte. Pense em móveis em termos de pequenos retângulos; você quer que tudo caiba dentro do quadro sem abrir espaços em branco.

modernerd

Crie um estilo para as palavras grandes, seja um cabeçalho simples contendo apenas algumas palavras ou pensamentos completos de duas linhas acima de cada seção do texto. Considere parte desse estilo como o tipo de título que você usa - ele fará uma pergunta, será uma declaração de fato, dirá aos leitores o que fazer, mostrará como fazer algo ou será mais indireto e bonitinho com palavras e frases?

Tente escrever cabeçalhos e títulos que são apenas uma linha longa (dois no máximo), use palavras ativas.

Crafting Type

Isso pode ser difícil de realizar e desconfiar dos truques. Não pegue um dicionário de sinônimos e substitua uma palavra grande por uma curta só para fazer as coisas se encaixarem. (Você correrá o risco de usar a palavra errada ou usar um termo que seus leitores talvez não saibam o significado). Pense conversando ao escrever. Componha as palavras e, em seguida, revise (corte ou adicione) para manter a integridade daquilo que deseja expressar e produzir uma cópia limpa e fácil de ler.

Conclusão

Cópia limpa é mais do que apenas simples tipos de letra e hífens. Trata-se de escrever uma cópia que faça sentido e apresente de forma legível.

Pense no seu público ao juntar tudo. Você usaria uma técnica e um estilo diferentes ao escrever postagens de blog sobre ideias de casamento (tradicional, sensação feminina) versus blogs sobre tatuagens (provavelmente mais ousadas e sombrias). Seu público tem um impacto nos recursos visuais, eles também devem impactar sua cópia.

Mas o mais importante, pense em como tudo vem junto. Retire todo o resto do design do seu site, deixando apenas o tipo por trás. É fácil de ler? Você tem que ampliar ou reduzir? Você está apertando a tela? Essas são as perguntas reais que você precisa responder, porque no final das contas, a legibilidade é o que mais importa.

Que texto você acha difícil ler online? Quais técnicas você usa para manter seu texto legível? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, imagem de texto via Shutterstock.