XYZ – Um guia para escolher as suas fontes

30/09/2022

Famílias e tipos de fontes

O que você pensa quando ouve “web design”? O layout de um site? Diferentes estilos, cores e fundos? Web design é tudo isso mas também é sobre fontes e como elas se conjugam com outros elementos para tornar o site harmonioso. Olhemos em maior detalhe para as letras e glifos.

Tipos

As fontes são distinguidas em diferentes tipos, tipos de letra e famílias. Existem três tipos gerais, classificados de acordo com a forma como são usados.

Fontes Web

São as fontes que você vê em aplicativos web e sites. O Google Fonts e o Adobe Fonts (anteriormente conhecido como Typekit) oferecem uma ampla variedade de seleções.

Fontes do Sistema

Você tende a encontrá-las em programas no PC e em aplicativos no seu dispositivo móvel.

Fontes variáveis

São conjuntos de fontes que têm diferentes pesos (espessura) e larguras (distância entre as letras). Estes são usados hoje em dia por adaptarem automaticamente as suas propriedades.

As fontes variáveis adaptam-se a um certo espaço

Exemplo de como uma fonte variável pode se adaptar a um determinado espaço

Tipos de letra e famílias de fontes

O tipo de letra diz respeito a como as letras são projetadas. Isso inclui variações de peso (fino, negrito), inclinação (itálico) e largura (condensação).

Uma família de fontes, como Arial, pode ter vários tipos de letra com um novo nome de fonte, como, por exemplo, Arial Black e Arial Narrow.

Famílias de fontes e os seus tipos de letra

As famílias de fontes são destacadas a azul e abaixo estão os seus tipos de letra (fundo branco). Exemplos para fontes com e sem serifa.

Geralmente, as famílias de fontes são classificadas em tipografias: com serifa, sem serifa, display e script (escrita à mão). Existem ainda subtipos como serifas slab, modernas, monoespaçadas ou não proporcionais, por exemplo.

Com serifa, como Times New Roman, é o clássico cuja origem vem das impressões de jornais.

Uma serifa é um pequeno traço anexado a uma letra que corre paralela à linha de texto. As fontes com serifa são, portanto, mais fáceis de ler.

Já no que diz respeito às fontes sem serifa, as famílias mais conhecidas por você provavelmente são Arial e Calibri. São fontes claras sem decoração embelezadora ou serifas.

Script

Parece caligrafia. As fontes são divertidas, como a Snell Roundhand ou a fonte Edwardian.

Display

Fontes, como Cooper Black ou Fat Face, são ousadas e não convencionais. Você verá, por exemplo, letras maiúsculas e minúsculas misturadas e as dimensões das letras (altura e largura) invertidas.

Evergreens e tendências

Para você, o que é uma boa fonte? Lembra quando você rabiscou algumas anotações em um pedaço de papel e não conseguiu ler a sua caligrafia depois? Ninguém quer decifrar uma fonte.

Portanto, uma fonte deve ser:

  • escalável para todas as dimensões de cada meio, impresso e digital, sem perder qualidade
  • legível em termos de tamanho e design de escrita
  • compatível com outras famílias de fontes

Um site deve mostrar no máximo três fontes diferentes que combinem e se adaptem ao comprimento de linha necessário. Elas não precisam pertencer à mesma família de fontes, mas devem ser claramente legíveis em todas as telas e ficar bem com qualquer cor. Os seus tipos de letra devem ser igualmente legíveis.

Clássicos versáteis que nunca serão chatos, são fontes como:

  • Arvo
  • Roboto
  • Lato
  • Merriweather
  • Montserrat
  • Open Sans
  • Times New Roman
  • Playfair Display

As fontes nos construtores de sites

Quais as fontes que o editor do seu site oferece?

Os modelos que um construtor de sites fornece para você criar o seu blog, loja online ou site pessoal são projetados de forma que as fontes se adequem ao tópico do modelo. Convenientemente, você tem uma seleção distinta de fontes que pode escolher.

Tipos de fonte no editor Webnode

No editor Webnode, você encontrará os principais tipos de fonte listados nas reivindicações da linha de navegação.

A propósito, as fontes mais usadas pelos usuários da Webnode são:

  • Montserrat, Roboto ou Open Sans da família sem serifa
  • Playfair Display, Pt Serif ou Merriweather da família com serifa

É possível alterar todas as fontes de todo o seu site de uma só vez nas configurações de design do editor. Aqui você pode alterar a combinação de fontes e famílias de fontes.

Combinações de fontes no editor Webnode

Exemplos de diferentes combinações de fontes no editor Webnode

As combinações de fontes são automaticamente “melhor emparelhadas”, pois complementam-se de tal forma que combinam com o layout e outros elementos do site. São a cereja no topo do web design.

Tendências

A world wide web começou com fontes sem serifa, simplesmente porque as telas naquela época não tinham uma resolução nítida para trazer tipos de fontes manuscritas e experimentais. Agora, a criatividade está ao nosso redor e não existem fontes “erradas”.

A tipografia Web renasce e o Google Fonts é uma fonte para os designers desenvolverem ainda mais os tipos de letra.
Em 2020, as fontes sem serifa dominaram e as letras expressivas como Goldplay e Versus estavam crescendo. Este ano, a tendência é de solidez e clareza, no entanto, fontes sem serifa continuam em alta no mundo digital porque são:

  • Audaciosas
  • Afiadas
  • utilitárias
  • Sólidas
  • Minimalistas
  • Usam espaço negativo

Escolher uma fonte

Chega de fatos. É a sua vez! Como decidir qual é a melhor fonte para contar a sua história?

Significado das fontes

Famílias de fontes

Famílias de fontes e os seus caracteres típicos.

As fontes têm caráter e transmitem um estado de espírito. As fontes script manuscritas fluem com elegância e paixão e, devido aos seus traços estendidos, linhas arredondadas e enfeites em forma de arco, elas são mais decorativas. Fontes como Edwardian Script são a Cinderela das fontes.

Se um restaurante francês com classificação Michelin apresentar um novo prato de assinatura, as fontes de script são a melhor opção.

Já as fontes display são o camaleão mudando de divertido para único ou brincalhão. A fonte saltitante na caixa de feijão Jelly Belly sabe como atraí-lo para o canto direito na loja de doces, certo?

Os tipos de fontes modernas são elegantes e ousadas. Você reconhecerá a fonte Futura na marca de moda de luxo Dolce & Gabanna, bem como na sua conta PayPal.

Devido à antiga herança das impressões jornalísticas, as fontes com serifa carregam tradição, confiança e respeito. A famosa revista de moda Vogue usa Bodoni, uma fonte com serifa. Também a Apple originalmente citou “Pense diferente” na mesma família de fontes.

Por outro lado, a fonte sem serifa Trade Gothic é usada pela Nike e a Helvetica pela The North Face. Uma fonte sem serifa transmite estabilidade, força, clareza e transparência, que muitas vezes é abraçada por empresas desportivas.

Você está começando a ter uma noção das nuances ténues entre tipos de fontes? Que família de fontes irá apresentá-lo melhor? Uma boa maneira de começar é esclarecer qual é a sua missão e o que seu negócio representa. Se você tem um site pessoal ou um blog, incline-se para uma fonte que represente melhor o seu carácter.

A melhor escolha para a sua marca

A maioria das fontes 2-3 guia o seu visitante através das seções das suas páginas, como capítulos de um livro. Será mais claro quando uma nova seção começar com um título em uma fonte mais ousada ou mais decorativa e terminar com um texto de tamanho normal.

Diferentes fontes também permitem destacar conteúdos diferentes ou alterar o tom de voz como, por exemplo, se você quiser citar alguém ou chamar a atenção para novas ofertas. As fontes também diferenciam melhor as linhas de produtos da sua loja online.
Escolha a fonte certa para você e para a sua marca, respondendo às seguintes perguntas:

  • Quem é o meu público e o que é importante para ele?
  • Existe uma fonte que se relaciona com a experiência dos meus clientes?
  • A fonte funcionará no contexto em que será vista?
  • Que fonte captura a personalidade da minha marca?
  • As minhas cores funcionarão com a fonte selecionada?

Por exemplo, se o seu site complementa o seu canal no YouTube e você tem um monte de miniaturas numa página que leva aos seus vídeos, ou se você é um artista e tem muitas imagens, o seu público está olhando para o seu conteúdo em vez de lê-lo. Como tal, a sua fonte não deve distrair do conteúdo visual.

Se você é um advogado ou consultor, provavelmente quer refletir confiança e responsabilidade. Uma fonte de script, mais emocional, não seria a mais adequada e pareceria desenquadrada.

Lembre-se: uma fonte também deve ser compatível em todos os navegadores. Examine a sua escolha de fonte e a sua acessibilidade em navegadores usados em vários dispositivos, antes de tomar a sua decisão final.

Piores erros no uso de fontes

Misturar muitas famílias e tipos de fontes é um dos piores erros no uso de fontes

Muitas famílias e tipos de fontes misturadas podem arruinar o fundo e o contexto.

Finalmente, às vezes saber o que evitar ao escolher a sua fonte é mais fácil do que lembrar o que fazer. Aqui estão os pontos mais importantes a ter em conta:

Respeite a família

Mantenha-se fiel a uma só família de fontes e varie apenas o tipo de letra. Uma família de fontes como Helvetica, Verdana, Open Sans possui variações suficientes nos tipos de letra para distinguir passagens no seu texto.

Nem todas as misturas combinam

Você pode misturar, mas tenha cuidado ao experimentar tipos de letra opostos, como Times New Roman e Edwardian Script. Elas não vão combinar.

Aprimoramento

Utilize as fontes de script embelezadas ou fontes display complexas para destacar apenas os títulos. Não as use para passagens de texto num parágrafo.

Espaço

Não seja mesquinho com os tamanhos. Um bom tamanho de fonte, acessível para que todas as pessoas possam ler, é 16pt. Abaixo disso, você excluirá pessoas com deficiência visual pois elas não conseguirão ler a sua história.

Filas longas

Evite frases longas ou fontes que tenham muito espaço em branco entre as letras. Normalmente, em modelos de construtores de sites, o layout é codificado de tal forma que as quebras de linha são introduzidas antes que se tornem necessárias.

Formatação

Por último, mas não menos importante, lembre-se: mesmo que você tenha a melhor fonte para o seu site, certifique-se de que todo o texto está alinhado corretamente. Isso significa manter o texto centralizado ou alinhado à direita numa página. Se você tiver caixas de texto com linhas de texto começando na parte superior central e inferior direita, o leitor terá problemas para seguir o texto. Organize o texto e use espaços em branco para dar uma pausa ao leitor.

Se tem interesse em web design, este artigo sobre design web fornecerá algumas informações adicionais sobre como tornar o seu site incrível.