design

Como escolher a fonte certa
para um site ou artigo

Essas diretrizes o ajudarão a escolher uma fonte -
sem entrar em muita teoria.
A fonte é muito importante. Ela é como o ar, você não a percebe quando tudo está bem. A maioria das pessoas não tem a menor ideia sobre fontes, seus nomes ou características (e não há problema nisso), mas certamente perceberão que algo está errado se você estiver usando uma fonte inadequada em seu site.
Com o Tilda, a plataforma multifuncional, qualquer pessoa pode criar um site sem contratar um desenvolvedor da Web ou um designer profissional.
Alteração e ajuste de fontes
As fontes podem ser alteradas nas configurações do site e aplicadas em todos os blocos e páginas. Isso cria um estilo unificado e claro para seu site.
Você pode adicionar no máximo duas fontes. Por um lado, o uso de um número limitado de fontes cria uma boa impressão visual. Por outro lado, cada fonte adicional reduz a velocidade de download da página.

Vá para "Site settings" (Configurações do site) e clique em "Fonts and Colors" (Fontes e cores), que o levará aos pares de famílias de fontes. Essas são as combinações de duas fontes recomendadas por nossos designers. Role para baixo até encontrar o par de que você gosta. Clique em "Select" (Selecionar) e "Save changes" (Salvar alterações). As fontes em seu site serão alteradas.
Se as combinações que fornecemos não forem adequadas para você, clique em "Custom settings" (Configurações personalizadas). Você verá uma lista de outras opções para adicionar uma fonte ao Tilda, como:
1) Selecione uma fonte do conjunto padrão
2) Carregue sua própria fonte
3)Instale uma fonte com o Typekit
4) Use o Google Fonts
5) Carregue seu arquivo CSS
Para obter guias detalhados de como fazer, basta seguir os links acima.
Se você rolar a página para baixo, encontrará configurações de tamanho, peso e cor da fonte. Os parâmetros que você definir ali serão aplicados em todo o site. Se precisar alterar as fontes em um bloco, você poderá fazer isso no editor de cada bloco.
O que são pesos de fonte?
O Font-weight define a espessura de cada fonte. Normalmente, as fontes têm dois estilos: regular ou negrito. Elas podem ter graus adicionais de espessura, de superleve a supernegrito. O Tilda suporta cinco pesos básicos, como light, regular, medium, semi-bold e bold. Nem todas as fontes têm muitos pesos, algumas têm apenas dois: regular e negrito.
Há sete variações de peso de fonte para o Avenir.
Qual é o melhor tamanho de fonte para um site?
O tamanho da fonte depende da quantidade de texto em seu site. Se você não tiver muito texto e usá-lo principalmente para legendas e comentários, aumente o tamanho da fonte para 22px (o tamanho padrão da fonte é 20px). Se você tiver muito texto, diminua as fontes (18px) para melhorar a legibilidade.
Como definir as propriedades da fonte de acordo com seu projeto
Pergunte a si mesmo: qual é o seu projeto na Web? É um artigo, uma postagem de blog ou uma leitura longa em que o texto é rei? Ou você tem um site, uma página de destino ou uma história fotográfica com apenas um pouco de texto?
Definição de fontes para um site de acordo com sua mensagem
Quando estiver começando a criar um site, decida se a fonte padrão é adequada à aparência do site. Você não faria sites para um acampamento esportivo infantil e para uma arquitetura com a mesma aparência, faria? Você pode expressar a diferença com os pesos das fontes.
A seguir, examinaremos quatro pesos diferentes de fontes em títulos e textos. Elas ajudam a definir o tom de voz de um site para que suas páginas pareçam equilibradas e corretas.
1
Título em negrito médio + texto normal
Essa é a combinação mais básica que funciona bem para a maioria dos sites. Use-a se quiser simplesmente criar uma página da Web com boa aparência sem chamar a atenção para nenhum elemento específico. Ela é adequada para qualquer site.

Use os seguintes parâmetros nas configurações do site:
Peso da fonte do texto - Normal
Peso da fonte do título - Semi-negrito
Configurações do site > Fonte e cores > Tamanho e peso
Exemplo
Página da web de anúncio de emprego. Fontes: Open Sans (título) e Roboto (texto)
2
Título em negrito + texto normal
Recomendamos o uso dessa combinação popular se o seu projeto for sobre impulso e energia.

Ela é especialmente adequada para sites de bares, espaços de coworking, promoções de shows e turnês, competições esportivas e assim por diante.

Use os seguintes parâmetros nas configurações do site:
Peso da fonte do texto - Normal
Peso da fonte do cabeçalho - Negrito
Configurações do site> Fonte e cores > Tamanho e peso
Exemplo
Website para umespaço de coworking. Fontes: Ubuntu (título) e PT Sans (texto)
3
Título em negrito + texto fino
Essa é uma combinação menos comum; parece dramática devido ao contraste das fontes. Ela funciona muito bem quando você precisa combinar unidade com estilo. Por exemplo, títulos e textos destacados e fáceis de ler refletem um design esteticamente agradável neste site de curso de marketing.

Use os seguintes parâmetros nas configurações do site:
Peso da fonte do texto - Light
Peso da fonte do título - Bold
Configurações do site> Fonte e cores > Tamanho e peso
Exemplo
Página da Web do estúdio de design. Fontes: Noto Sans (título) e Open Sans (texto)
4
Título fino + texto fino
Essa combinação funciona muito bem para projetos sobre alta tecnologia, progresso, tecnologia de ponta ou algo que deva ter uma aparência bonita e forte. Ela é particularmente boa quando há muito espaço em branco, acentuado com pontos de cores brilhantes e belas imagens.

Adequado 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 texto - Light
Peso da fonte do título - Light
Configurações do site> Fonte e cores > Tamanho e peso
Exemplo
Página de destino para um aplicativo móvel de processamento de fotos. Fontes: Open Sans (título) e Open Sans (texto)
Exemplos de belas combinações de fontes
A combinação de fontes diferentes em títulos e textos 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
Deseja que seu artigo seja fácil de ler para os usuários? Então, verifique se ele usa bons contrastes e se as fontes não são muito grandes.

Se você tiver uma leitura longa ou um artigo com muito texto, escolha o tamanho de fonte de 18px. Para um ensaio fotográfico que usa texto principalmente para legendas, aumente o tamanho da fonte para 20px ou até 22px.

Use os seguintes parâmetros nas configurações do site:
Peso da fonte do texto - Normal
Peso da fonte do título - Negrito / Semi-negrito
Tamanho da fonte do texto - 18px
Configurações do site > Fonte e cores > Tamanho e peso
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 serifas. A Baskerville Regular foi usada para a citação de Massimo Vignelli à esquerda e a Helvetica Light à direita.
As serifas criam uma linha de orientação que ajuda os olhos a deslizar de forma mais suave e rápida. Quando os primeiros computadores surgiram, as fontes sem serifa se difundiram porque as fontes sem serifa pareciam mais legíveis em uma tela de baixa resolução.

Os monitores modernos exibem ambas as fontes igualmente bem. É por isso que, atualmente, a escolha entre serifa e sem serifa é determinada pela natureza de sua mensagem, não pela legibilidade. As fontes com serifa às vezes sugerem um tom bastante formal e são adequadas a algumas marcas, mas não a todas.
Adição de fontes adicionais
Em todos os exemplos anteriores, usamos alguns conjuntos de fontes muito básicos. Se você quiser alterar o conjunto de fontes, acesse as configurações do site e selecione uma fonte da lista ou adicione qualquer outra fonte que desejar (porque, no Tilda, você pode!)
Onde comprar fontes ou encontrá-las gratuitamente
No Tilda, há cinco maneiras de adicionar uma fonte:
1
Nas configurações do site, escolha uma das 13 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 custar US$ 89. Alguns conjuntos incluem fontes gratuitas. Também está disponível um teste de 30 dias para fontes da Web.

Fonts.com
Opera um sistema de assinatura. Você pode receber acesso gratuito a 3.000 fontes, enquanto os planos pagos custam de US$ 5 a US$ 100 por mês.

Type.today

3
Adicione uma fonte por meio do Adobe Typekit. Essa é uma biblioteca de fontes.
- Plano gratuito: 940 fontes
- O plano pago custa US$ 49 por mês e dá acesso a 5660 fontes.
- O acesso a essas 5660 fontes é concedido aos assinantes da Adobe Creative Cloud. Se você pagar pela Creative Cloud, não precisará pagar a mais pelo Typekit.
4
Use o Google Fonts. As fontes são gratuitas. Nosso guia de instruções.
5
Carregue seu arquivo CSS. Nosso guia de instruções.
A lista de fontes boas
Futura. Compre esta fonte: myfonts.com/fonts/paratype/futura-book
Proxima Nova. Compre esta fonte: myfonts.com/fonts/marksimonson/proxima-nova
Franklin Gothic. Compre esta fonte: myfonts.com/fonts/itc/franklin-gothic
Graphik. Compre esta fonte: type.today/Graphik
Museu. Compre 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. Compre esta fonte: myfonts.com/fonts/linotype/helvetica-neue
Como garantir a legibilidade do seu site
Qualquer que seja a fonte escolhida, ela precisa ser legível. Especialmente se você usar uma foto de fundo. Se você colocar uma fonte fina sobre uma imagem que contém muitos detalhes pequenos, o texto será muito difícil de ler. Tenha sempre isso em mente!
O que você pode fazer? Primeiro, use uma boa foto de fundo com elementos grandes e homogêneos. Segundo, aplique um filtro de esmaecimento para suavizar a imagem. Isso facilitará a leitura de seu texto. Terceiro, você pode aumentar o peso do bloco de design usando um estilo em linha. Isso significa que você atribui configurações a uma seção específica do texto, e não a todo o site. Destaque o texto que você deseja e atribua as configurações usando o editor do site.
O estilo aplicado dessa forma sempre terá prioridade sobre as configurações padrão. Portanto, quando você altera as configurações de fonte do site e essas alterações não são visíveis no site, isso significa que elas estão "em linha". Para remover essas alterações, basta destacar o texto e clicar em "Clear" (Limpar).
O texto não é muito legível
O texto é facilmente lido
Na capa esquerda, o texto é muito difícil de ler. Para corrigir isso, escolhemos uma foto sem muitos detalhes pequenos, usamos um filtro azul de 40% e aumentamos o peso da fonte.


Se estiver interessado em aprender mais sobre tipografia, encontre sites semelhantes ao que você está projetando e descubra quais fontes são usadas neles. A extensão do navegador What Font o ajudará nisso.

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

Gostou do artigo? Compartilhe-o com seus amigos! Muito obrigado!
Feito em
Tilda