5 dicas de tipografia para melhorar a User Experience

O usuário comum com um smartphone ou laptop e uma conexão estável provavelmente passa mais tempo interagindo com tipografia em um único dia do que com comida, música e família juntos.

A maior parte da web (e das nossas vidas) é type-based. Era o caso em 2006, continua sendo 10 anos depois, e continuará sendo verdade até o dia em que estivermos nos comunicando via emojis holográficos (2020?)

Enquanto esperamos pacientemente pela revolução dos HoloMoji™, é importante tratar a comunicação type-based com o respeito que ela merece. Cada um de nós tem um papel a desempenhar como autores, editores, desenvolvedores e designers, tendo a responsabilidade pelo material que criamos e compartilhamos com o mundo. Isto é especialmente verdade quando estamos sendo pagos por outras pessoas para fazer seu conteúdo comunicar com eficiência além de agradar visualmente.

Aqui vai uma lista de 5 maneiras fáceis de melhorar a qualidade e a efetividade tipográfica no design de qualquer site, email, post ou produto digital.

#Dica 1

Trabalhe com o espaçamento das linhas e dos parágrafos.

Pode não parecer grande coisa, mas é uma dica fácil que pode ser implementada com esforço mínimo.

O conteúdo acima seria mais eficiente se utilizasse um bom espaçamento vertical, agrupando mais claramente imagens e textos relacionados, ou títulos e textos relacionados.

Pode ser difícil para o leitor agrupar o conteúdo quando as linhas de texto estão uniformemente distribuídas, sem contraste de espaçamento, acima e abaixo de um cabeçalho ou imagem (especialmente em páginas longas de artigos com muito texto e imagens).

Quando leitores têm de se esforçar para entender a relação entre os conteúdos, o design se torna exigente e problemático. Acima de tudo, os leitores querem sentir-se confortáveis. Agrupar os conteúdos de forma clara utilizando bom espaçamento vertical é uma ótima maneira de garantir uma experiência mais positiva.

#Dica 2

Evite longas linhas de texto.

Acredito que este é o erro de design mais recorrente e incômodo afetando a responsive web atualmente.

Este exemplo mostra uma média de 179 caracteres por linha, mais do que três vezes o recomendado.

Já foi provado há muito tempo que os olhos do leitor cansam mais rapidamente quando forçados a ler linhas muito longas. Na verdade, este é um teste fácil de realizar a qualquer hora — apenas abra um email longo e ajuste a largura do browser. Compare como o mesmo texto se parece em uma janela mais estreita, ao invés das longas linhas criadas quando a largura é maior. O mesmo texto pode parecer confortável e convidativo, ou completamente desencorajante e incômodo. Nós aprendemos isto com o design editorial, e o mesmo vale para a web.

Linhas muito longas de texto são péssimas. As pessoas não precisam de ainda menos incentivo à leitura. Além disso, pega mal. É uma maneira rápida de dizer “Não nos importamos muito com o design do nosso material e experiência de leitura dos nossos usuários, ou somos muito cegos pra notar!” Fail!

Nem todo mundo está ciente disto (incluindo designers e desenvolvedores) porque ninguém costuma apontar o problema. Além disso, se sustenta pela conveniência dos frameworks elásticos e uma falta de consideração maior com os layouts responsivos.

Wikiwand é uma extensão de browser gratuita que entende sobre a fadiga dos olhos, e apresenta uma experiência de leitura mais confortável.

O número correto de caracteres no corpo de um parágrafo é entre 45 e 75, sendo 66 caracteres por linha (incluindo espaços) altamente recomendado como ideal. Siga este princípio e ajuste o design quando a contagem de caracteres para aquele tamanho de fonte sair da faixa recomendada. E claro que você não precisa contar os caracteres no olho, existem inúmeras ferramentas pra isso, só escolher!

#Dica 3

Seja autêntico com hand lettering.

É sempre interessante observar tendências visuais evoluindo e populando o cenário visual na web. Uma delas nasceu do desejo de ir contra a onipresença digital de telas inexpressivas e vetores gráficos: a inclusão do hand lettering e de uma energia romântica, até nostálgica, de uma cultura aparentemente em declínio de fazer as coisas manualmente.

Esclarecendo: nós amamos lettering e caligrafia. Texto escrito a mão, como muitas outras coisas, é bonito de se ver quando executado com habilidade. O problema hoje em dia é quando as pessoas querem transmitir aquela energia, mas por falta de tempo (ou preguiça) acabam optando por uma fonte manuscrita ao invés de dar vida a um processo mais autêntico.

Nenhum destes exemplos é muito convincente. É difícil para fontes manuscritas transmitir um sentimento de autenticidade.

O problema não é com o uso de fontes manuscritas (há muitas vantagens com o live text, como a acessibilidade e própria conveniência no desenvolvimento), mas sim com o fato de que essas fontes raramente parecem especiais e autênticas, além da forte impressão de que já as vimos em algum lugar (este pode ser o designer em mim falando).

Pior que isto é quando as mesmas letras aparecem múltiplas vezes na mesma palavra ou frase. A essência do hand lettering e todo o seu charme se perde quando a fonte só tem um desenho de letra “e”. A beleza está na quebra de ritmo, na maleabilidade da consistência. Quando o usuário se dá conta, é difícil evitar a sensação de falta de originalidade, causando distração e desapontamento.

A primeira imagem é uma captura de tela de TSN’s Favela United. Hand lettering original contribui perfeitamente para a experiência. Tem energia e é visceral. Note como se perde o feeling quando a arte é modificada para uma fonte semelhante. A repetição dos caracteres e a aparência “padrão” diminuem completamente o impacto dos headings.

E que tal esta referência? Impossível substituir a energia e o interesse criados por uma execução manual genuína.

#Dica 4

Não use muitos estilos tipográficos diferentes.

Se o seu usuário estiver interessado em ler, já é um grande começo. Mas seu conteúdo só será lido se o texto for cativante o suficiente. Isso envolve muitos fatores, um deles é a clareza na legibilidade.

O que os leitores não precisam é de um pouquinho de tempero visual para ajudá-los a apreciar TOTALMENTE a comunicação.

Abusar de múltiplos estilos tipográficos é uma grande maneira de arruinar a experiência de leitura. Visualmente acaba com o bloco de texto, e torna mais difícil seguir com a compreensão do conteúdo agora que o tom de voz de alguém está interferindo na interpretação, além de relembrar um tom de insegurança e do old-fashioned marketing. Sem falar na dificuldade pra passar pro código tantas variações!

Outro problema comum é o uso de muitos estilos diferentes de modo geral nas páginas, não apenas na mesma frase. Procure usar no máximo três estilos tipográficos em textos longos, para evitar que seu post pareça mais um Frankenstein textual do que conteúdo de primeira.

Utilizar tamanhos diferentes, ou bold em algumas palavras que merecem destaque, pode dar um toque visual interessante e um ritmo legal para a experiência de leitura, além de hierarquizar o conteúdo. Mas lembre-se que Content is King, então confie na sua redação (ou contrate um redator melhor) e entregue sua mensagem com efetividade. Use estilos com moderação!

#Dica 5

Valorize a pontuação correta em textos de destaque.

Pontuação correta, bem como regras ortográficas e gramaticais, devem ser usadas em cabeçalhos e áreas-chave do texto, mesmo que tantas marcas (grandes e pequenas) falhem em usar propriamente. O problema mais comum é com o uso errado de caracteres como apóstrofos e aspas.

Sempre utilize aspas curvas e apóstrofos propriamente.

Aspas retas são bastões verticais erroneamente usados no lugar das aspas curvas (“ ‘ ’ ”) e apóstrofos (’). Aspas retas são essencialmente uma pontuação genérica criada pela simplicidade e economia de espaço durante a era da máquina de escrever. Foi efetivo naquele tempo, mas a tecnologia avançou um pouco desde então. É engraçado como muitas regras da cultura antiga da redação continuam aparecendo hoje no cenário digital.

A maioria das pessoas dificilmente vai notar a diferença entre estes caracteres em textos pequenos, mas erro de ortografia no seu H1 pega mal, além da chance de ficar visualmente poluído. Ao contrário das aspas curvas, que foram especialmente desenhadas para promover unidade e fluidez à leitura, aspas retas são desajeitadas e distraem a experiência de leitura. Elas devem ser reservadas para os desenvolvedores. Aprenda aqui como utilizá-las em cada uma das situações.

Problemas com edição de texto existem há muito tempo antes do desenvolvimento e das publicações na web. O mundo mudou, mas certas coisas persistem.

As recomendações que citamos aqui são importantes quando uma pessoa ou negócio está interessado em apresentar o seu melhor para os usuários, ou quando alguém quer expressar uma consideração pela User Experience, incluindo nisso a maneira como um leitor se sente enquanto lê ativamente seu conteúdo. Observe analiticamente por um momento, e tente considerar quanto tempo e esforço o próprio Medium desempenha nas suas nuances tipográficas.

Estas dicas exemplificam de que maneira a composição tipográfica contribui significativamente à experiência como um todo. UX é um conceito bem abrangente, que significa várias coisas pra muitas pessoas. Mas assim como em outras profissões, as pessoas nem sempre querem suar nos pequenos detalhes. UX pode ser linda e emocionante quando se trata de pesquisa com o público, direção de arte e estratégias de conteúdo, mas perde força rapidamente quando se fala em minúcias aparentemente insignificantes.

Nós acreditamos que o bom design vem dos pequenos detalhes, e a combinação destes detalhes é o que torna algo realmente especial.

Tipografia é um elemento praticamente imperceptível, mas que permeia quase todo aspecto de nossas vidas. Boa tipografia representa um papel fundamental na criação de soluções e experiências memoráveis para os usuários. Use com sabedoria!

Traduzido e adaptado por Rodrigo Roncaglio. Texto de Studio Function.