Como escolher fontes para um site ou um artigo

Este guia o ajudará a escolher a fonte certa com menos teoria
A fonte é muito importante. Usar a fonte certa é como respirar, você parece não perceber quando todas as condições necessárias estão perfeitas. No entanto, a maioria das pessoas não tem ideia do tipo de letra, dos nomes e das características (e não há problema nisso). No entanto, elas podem facilmente perceber que algo está faltando quando usam a fonte errada em seu site.
Neste artigo, explicamos alguns dos elementos essenciais que você precisa para fazer a seleção certa, considerando que está criando seu site no Tilda, a plataforma multifuncional que permite que qualquer pessoa crie um site sem contratar um desenvolvedor da Web ou um designer profissional.
Alteração e ajuste de fontes
Você pode alterar facilmente a fonte em um site e aplicar o efeito em todos os blocos e páginas. Esse recurso permite que você crie um estilo unificado e claro.
Você pode carregar no máximo duas fontes. O uso de um número limitado de fontes cria uma boa experiência visual. Além disso, o uso de fontes adicionais pode reduzir a velocidade de carregamento da página. É por isso que há apenas duas fontes.

Em "Site Settings" (Configurações do site), prossiga e clique em "Fonts and Colors" (Fontes e cores). Esse comando o levará às fontes básicas selecionadas por nossos designers profissionais. Depois de encontrar a fonte de sua preferência, clique em "Select" (Selecionar) e "Save changes" (Salvar alterações). Quando isso for feito, a fonte do site será alterada automaticamente.
Se nenhuma das fontes básicas for suficientemente adequada, clique em "Custom settings" (Configurações personalizadas). Isso abrirá uma lista de diferentes opções que permitem adicionar uma fonte preferida ao Tilda, como:

1) Selecione uma fonte da coleção de fontes pré-carregadas
2) Carregue sua própria fonte
3) Instale a fonte com o Adobe Fonts
4) Use o Google Fonts
5) Carregue seu arquivo CSS

Para obter guias detalhados de como fazer, siga os links acima.
Ao rolar a página para baixo, você encontrará as configurações de tamanho, peso e cor da fonte. Os parâmetros usados na fase serão aplicados em todo o site. Se quiser alterar a fonte, você poderá fazê-lo no editor especificado para cada bloco.
O que são pesos de fonte?
O Font-weight explica a espessura associada a cada fonte. As fontes têm dois estilos básicos - regular ou negrito - com uma espessura adicional que varia de superleve a supernegrito. O Tilda suporta cinco pesos básicos, como light, regular, medium, semibold e bold. Embora esses pesos sejam limitados, algumas fontes têm apenas dois pesos: Regular e Negrito.
Há sete variantes de font-weight para o Avenir.
Qual é o melhor tamanho de fonte para um site?
O tamanho da fonte que você pretende usar depende do volume de conteúdo usado no site. Se o site em que você está trabalhando tiver conteúdo como legendas e comentários, você poderá aumentar o tamanho da fonte para 22px (o tamanho padrão da fonte é 20px). Por outro lado, se o site exigir muito texto, você pode diminuir o tamanho da fonte (18px) para melhorar a legibilidade.
Como definir propriedades de fonte com base no projeto
Pergunte a si mesmo: em que tipo de projeto da Web você está trabalhando? É um artigo, uma postagem de blog ou uma leitura longa em que o conteúdo é rei? Pode ser um site, uma página de destino ou uma história fotográfica com poucos textos.
Definição de fontes para um site de acordo com a mensagem
Quando se começa a criar um site, é importante decidir se a fonte padrão está de acordo com as características do site. O fato é que não se espera que um site de acampamento esportivo para crianças e um site de arquitetura tenham a mesma aparência. E uma das melhores maneiras de expressar a diferença é com o uso de pesos de fonte.
A próxima fase é examinar os quatro pesos diferentes de fonte recomendados para o título e o texto. Esse recurso ajuda a encontrar um equilíbrio no tom de voz.

1
Título em semiboldes + texto normal
Essa é uma combinação básica que é compatível com a maioria dos sites. Recomendamos essa combinação se você pretende manter o estilo do site unificado e não chamar a atenção para nenhum elemento específico.

Use os seguintes parâmetros nas configurações do site:
Peso da fonte do texto do corpo - Normal
Peso da fonte do título - Semi-negrito
Site Settings → Font and Colors → Size and Weight
Exemplo
Página da web de anúncio de emprego. Fontes: Open Sans (título) e Roboto (corpo do texto)
2
Título em negrito + texto normal
Recomendamos essa combinação se você estiver trabalhando em um projeto de acionamento e energia.

É recomendado em sites destinados a shows, promoções de turnês, bares, espaços de coworking, competições esportivas e assim por diante.

Use os seguintes parâmetros nas configurações do site:
Peso da fonte do texto do corpo - Normal
Peso da fonte do título - Negrito
Site Settings → Font and Colors → Size and Weight
Exemplo
Website para umespaço de coworking. Fontes: Ubuntu (cabeçalho) e PT Sans (corpo do texto)
3
Título em negrito + texto fino
Essa combinação é bastante rara; ela parece dramática devido ao contraste usado nas fontes. No entanto, é uma combinação perfeita de unidade e estilo. Por exemplo, títulos e textos destacados e fáceis de ler refletem um design esteticamente agradável nesse site de curso de landing page.

Use os seguintes parâmetros nas configurações do site:
Peso da fonte do texto do corpo - Light
Peso da fonte do título - Bold
Site Settings → Font and Colors → Size and Weight
Exemplo
Página da Web do estúdio de design. Fontes: Noto Sans (cabeçalho) e Open Sans (corpo do texto)
4
Título fino + texto fino
Essa é uma combinação perfeita para projetos que devem ser atraentes e fortes para chamar a atenção, como tecnologia de ponta, progresso ou alta tecnologia. Essa combinação de fontes parece perfeita quando usada em uma página com muito espaço em branco acentuado com pontos de cores brilhantes e belas imagens.

Adequada para sites que apresentam gadgets, joias, cafés ou restaurantes de luxo e salões de beleza.

Use os seguintes parâmetros nas configurações do site:
Peso da fonte do corpo do texto - Light
Peso da fonte do título - Light
Site Settings → Font and Colors → Size and Weight
Exemplo
Página de destino para um aplicativo móvel de processamento de fotos. Fontes: Open Sans (título) e Open Sans (corpo do texto)
Exemplos de belas combinações de fontes
A combinação de fontes diferentes nos cabeçalhos e no corpo do texto o ajudará a obter vários graus de impacto visual geral e a expressar o caráter e o tom de voz do seu site.
Escolha de fontes para um artigo
Você pretende que seus artigos sejam fáceis de ler? Então certifique-se de usar bons contrastes e uma fonte de tamanho médio que não seja muito grande.

Se o conteúdo com o qual estiver trabalhando for longo, tente usar uma fonte de 18px. Como alternativa, se estiver projetando um ensaio fotográfico que usa texto principalmente nas legendas, aumente o tamanho da fonte para 20px ou 22px.

Use os seguintes parâmetros nas configurações do site:
Peso da fonte do texto do corpo - Normal
Peso da fonte do título - Negrito / Semi-negrito
Tamanho da fonte do texto do corpo - 18px
Site Settings → Font and Colors → Size and Weight
Exemplo
Blog de moda
Exemplo
Blog corporativo
Exemplo
Artigo sobre marketing on-line
Com ou sem serifas?
Fonte Serif
Fonte sans-serif
As pequenas linhas laranja no exemplo à esquerda são chamadas de serifas. Baskerville Regular foi usado para a citação de Massimo Vignelli à esquerda e Helvetica Light à direita.
A fonte serif tem uma diretriz que permite que o olho deslize de forma suave e rápida. Quando surgiram os primeiros computadores, as fontes sem serifa se difundiram, pois essas fontes são mais legíveis quando usadas em uma tela de baixa resolução.

A maioria dos monitores modernos exibe ambas as fontes perfeitamente. É por isso que a escolha entre Serif e Sans serif depende exclusivamente da mensagem que você pretende transmitir e não da pontuação de legibilidade. Embora as fontes Serif sejam adequadas quando usadas em um ambiente formal, elas são recomendadas para marcas específicas.
Adição de fontes extras
Em todos os exemplos anteriores, usamos algumas das famílias de fontes mais comuns. Para alterar uma fonte, abra as Configurações do site e selecione a fonte na lista. Além disso, no Tilda, você pode carregar e usar qualquer fonte personalizada que desejar.
Onde comprar fontes ou encontrá-las gratuitamente
No Tilda, há cinco maneiras de adicionar fontes:
1
Em Site Settings (Configurações do site), escolha uma das 18 fontes que pré-selecionamos de fontes abertas.
2
Carregue seu arquivo com uma fonte que tenha comprado em outro lugar. Por exemplo, você pode comprar fontes aqui:

MyFonts.com
Os preços começam em cerca de US$ 19/29/49 por fonte. Algumas das fontes mais baratas custam US$ 2, enquanto outras podem chegar a US$ 89, e algumas são gratuitas. Você também pode ter acesso à avaliação de 30 dias das fontes da Web disponíveis.

Fonts.com
Um serviço baseado em assinatura. Você pode ter acesso gratuito a 3.000 fontes, enquanto o plano pago varia de US$ 5 a US$ 100 por mês.

Type.today
Os preços começam em cerca de US$ 25 por tipo de fonte.
3
Adicionar uma fonte por meio de Adobe Fonts. Essa é uma biblioteca de fontes.
- A coleção básica de fontes está disponível gratuitamente com uma Adobe ID;
- Os assinantes pagos da Adobe Creative Cloud obtêm acesso ilimitado à biblioteca completa de fontes.
4
Use o Google Fonts. As fontes são gratuitas. Confira nosso guia de instruções.
5
Carregue seu arquivo CSS. Consulte nosso guia de instruções.
Lista de nossas fontes recomendadas
Futura. Compre esta fonte: myfonts.com/fonts/paratype/futura-book
Proxima Nova. Comprar esta fonte: myfonts.com/fonts/marksimonson/proxima-nova
Franklin Gothic. Comprar esta fonte: myfonts.com/fonts/itc/franklin-gothic
Gráfico. Compre esta fonte: type.today/en/Graphik
Museu. Comprar esta fonte: myfonts.com/fonts/exljbris/museo-sans
Gotham. Compre esta fonte: typography.com/fonts/gotham
GT Walsheim. Compre esta fonte: grillitype.com/typefaces/gt-walsheim
Helvetica Neue. Comprar esta fonte: myfonts.com/fonts/linotype/helvetica-neue
21 Centavos. Comprar esta fonte: myfonts.com/fonts/letterheadrussia/21-cent/
Como aumentar a legibilidade em seu site
Independentemente da fonte escolhida, ela deve ser fácil de ler, especialmente se você estiver usando uma foto de fundo. Se você usar uma fonte fina em uma imagem com muitos elementos visuais pequenos, o texto poderá ficar difícil de ler. Tenha sempre isso em mente!
O que você pode fazer? Primeiro, use a foto certa no plano de fundo com elementos grandes e homogêneos. Segundo, aplique um filtro de desbotamento para suavizar a imagem. Isso ajudará a aumentar a legibilidade. Terceiro, você pode aumentar o peso da fonte para um bloco específico usando um estilo em linha. Isso significa que você pode atribuir configurações a uma seção específica do seu texto e não ao site inteiro. Destaque o texto usando o editor de site em linha.
Os estilos aplicados dessa maneira sempre têm prioridade sobre as configurações padrão. Por isso, se você modificar as fontes nas Configurações do site e as modificações não estiverem visíveis no site, isso significa que você definiu anteriormente o estilo em linha. Para remover o estilo inline, destaque o texto e clique em "Limpar toda a formatação".
O texto não é muito legível
O texto é fácil de ler
Na capa esquerda, o texto é muito difícil de ler. Para melhorá-lo, escolhemos uma foto sem muitos detalhes pequenos, usamos um filtro azul com 40% de opacidade e aumentamos o peso da fonte.
Se estiver interessado em aprender mais sobre tipografia, visite um site semelhante ao do projeto em que está trabalhando e verifique quais fontes são usadas. A extensão do navegador What Font o ajudará a identificar rapidamente as fontes nas páginas da Web.

Além disso, navegue por esse arquivo tipográfico independente. Ele apresenta uma coleção de sites e amostras impressas classificadas de acordo com o tipo de fonte utilizada.

Gostou do artigo? Compartilhe-o com seus amigos! Muito obrigado!
Veja também:
Livro de curso gratuito sobre como projetar, configurar e executar páginas de destino de alta conversão em

Guia prático gratuito para animação na Web com exemplos e técnicas,

e dicas sobre como usá-los