Tipografia: O melhor amigo do design para entregar a mensagem correta

Matheus Belli Sbompato
CI&T Design
Published in
4 min readJun 20, 2016
design by: https://dribbble.com/tokito

Ao longo dos anos já ouvi inúmeras pessoas dizendo: “Por que eu não consigo fazer um layout bonito? Eu sei utilizar o Photoshop® mas não fica bonito”. Se eu ganhasse 1 centavo por cada vez que já recebi tal questionamento, eu com certeza já teria uma piscina de moedas como a do Tio Patinhas. Seu layout não está ficando bom porque não está comunicando e para isso você precisa se preocupar mais em transmitir uma mensagem e realizar uma conexão com o público.

Design não significa você fazer algo bonito, mas sim algo que transmita uma mensagem e se conecte ao público que você quer atingir. E quando falamos de comunicação, precisamos falar de tipografia, um elemento que possui um papel vital no design: proporcionar clareza às informações e estabelecer um diálogo com as pessoas. Às vezes seu layout não se torna atraente simplesmente porque você não deu atenção suficiente para a tipografia.

Mas como escolher a fonte correta?

Infelizmente, não existe uma fórmula ou receita para esse tipo de questionamento. Se você pesquisar você vai descobrir que há muitas opiniões divergentes por aí. Porém, existe uma série de cuidados que você pode tomar para que você use a fonte escolhida a seu favor e não contra.

Otimizar a tipografia é otimizar a legibilidade, acessibilidade, usabilidade(!), sobretudo o equilíbrio visual. (Oliver Reichenstein)

Familia tipográfica: Who shot the serif?

Trocadilhos à parte, em primeiro lugar é preciso que você defina entre a pílula azul ou vermelha. Serifa ou Sem Serifa? Uma não é melhor que a outra, porém é preciso considerar algumas particularidades que cada uma oferece e usá-las a seu favor. Anatomicamente falando, as fontes sem serifas (Sans Serif) são consideradas mais modernas, amigáveis, claras e minimalistas. Fontes serifadas por sua vez proporcionam melhor legibilidade, pois a serifa conecta uma letra a outra, deixando a leitura mais prazerosa. E porque não utilizar as duas juntas? É possível fazer isso e obter um resultado muito positivo desde que seja utilizada uma de cada. Uma serifada, uma sem serifa.

Font-Size e Line Length

Você sabe quantos caracteres está usando em uma linha de bloco de texto? Não? Pois deveria saber, como designers temos o objetivo de melhorar a legibilidade das informações e considerar que a largura de um bloco de informação traga a melhor experiência de leitura ao leitor. Para que isso aconteça é preciso manter sua linha de texto entre 50–75 caracteres (“Typographie”, E. Ruder) para impressos e websites (desktop). Esse valor para dispositivos móveis muda para 30–40 caracteres.

Imagem: http://thinkingform.com/

Nas entrelinhas

Quando se trata de otimizar a legibilidade para o leitor, vale até mesmo usar a matemática para calcular o espaçamento entre linhas. A fórmula é simples: Line Height (pixels) ÷ Font-Size (pixels). Para outras unidades de medida basta realizar as devidas conversões. Idealmente, essa razão deve ficar em torno de 1,5 para manter o conforto do leitor.

Cores e Contraste

Com a utilização de cores e contraste consegue-se ajudar o leitor a ter uma melhor interpretação do conteúdo que ele está absorvendo. Em conteúdos extensos, o alto contraste é melhor, assim como vemos acontecer em livros e revistas. Agora, se o seu objetivo é atrair o olhar do leitor, considere utilizar cores de fundo em seu texto (ex: fundo escuro e texto branco) mas atenção: não utilize textos longos pois o cansaço visual certamente vai acontecer. Use sua imaginação e você se surpreenderá com o resultado.

Imagem: http://www.dzineblog360.com/

Após trilhar sobre alguns cuidados visando otimizar a experiência de leitura, é certo dizer que a tipografia é diretamente responsável pelo sucesso do seu design. É importe ressaltar que todos esses pontos citados acima são válidos não apenas para digital design mas também para UIs (User Interface) porque em ambos os casos estamos tratando de comunicação.

A tipografia é apenas um elemento do design, mas é muito importante que se tenha o mesmo cuidado com todos os outros elementos que envolvem o design, tais como paleta de cores, guides, proporção, etc.

E lembre-se: Design é para todos e não para você.

--

--