Como escolher as fontes do seu site

As fontes certas dão personalidade e criam uma hierarquia visual ao seu site, de modo a agradar ao seu público-alvo e definir a personalidade da sua marca. É mais do que uma escolha de design; a fonte certa deixa o site mais inspirador e funcional. 

Para encontrar as fontes certas para o seu site, aprenda alguns princípios sobre as fontes. Você tomará decisões conscientes e criará um site impressionante e fácil de usar.

Tipos de fonte

A fonte certa faz toda a diferença, dando o tom perfeito para quem visita seu site. As fontes vêm em diferentes tipos de família de fontes. Confira os três estilos principais.

1. Serif

Já notou aqueles pequenos floreios no fim das letras em algumas fontes? São as chamadas de serifas (serif). Pense nelas como um toque decorativo que dão personalidade e elegância.

Um simples “A”, por exemplo, vira uma fonte serifada quando você lhe dá pés. Tradicionalmente, as letras com serifa são chamadas de “romanas”. Os principais recursos das fontes serifadas são:

• Autoridade: o tipo de letra Serif funciona melhor em sites que precisam transmitir um alto nível de profissionalismo, expertise e autoridade.

• Personalidade séria: essas famílias de fonte são ideais para firmas de advocacia, clínicas de saúde, consultores, corretores financeiros, serviços de negócios e outros. 

• Com foco no conteúdo: elas também são ótimas emara sites com muito conteúdo, como blogs.

• Estilo clássico: as fontes Serif deixam seu site um visual mais clássico e elegante.

2. Sans serif

A palavra “sans” significa “sem” em francês — assim, "sans serif" se refere às fontes sem esses traços extras. Em outras palavras, sem as serifas. Nosso blog, por exemplo, usa uma fonte sans serif. As fontes sem serifa têm alguns atributos comuns.

• Estilo moderno: a letra sem serifa é ideal em sites que querem ser simpáticos e acessíveis ou que desejam ter um clima moderno, inovador e direto.

• Criativas e abertas: essas famílias de fontes são ótimas para galerias de artistas, serviços técnicos, prestadores de cuidados, serviços domésticos, organizações educacionais e blogueiros. 

• Tom acessível: as fontes sem serifa deixam o seu site com um clima casual. Os visitantes se sentirão bem-vindos e confiantes, e a navegação fica mais simples.

3. Script

O tipo de letra conhecido como script é uma ótima opção para personalizar seu site com uma caligrafia natural. 

As fontes script podem não ser a melhor opção para parágrafos longos, mas dão um belo toque às manchetes. Algumas aplicações comuns para fontes script são:

• Ênfase: a letra script dá um toque especial e chama a atenção para o texto principal. 

• Estilo elegante: ela acentua elementos nos sites de viagens, casamentos, hospitalidade, bem-estar holístico e culinária.

• Caprichosas e delicadas: as fontes script dão um clima onírico ao site, afetando diretamente as emoções dos visitantes.

Aprenda a usar um código simples para adicionar uma fonte script

Ajustando o estilo da sua seleção de fontes

Escolher as fontes certas envolve mais do que escolher a família certa. Você também deve considerar o peso, o tamanho da fonte, o espaçamento entre letras e os estilos. 

Para os usuários entenderem sua mensagem, use o elemento visual para criar hierarquia e ordem. Se o texto for maior, mais ousado ou em uma cor ou texto diferente, por exemplo, é mais provável que ele chame a atenção; portanto, deixe-o no topo da hierarquia visual de uma página. 

Aprenda a ajustar o estilo das fontes no Squarespace

Pesos da fonte

Peso da fonte se refere à espessura das letras. Os valores variam de fino (100) a extranegrito (900). Geralmente, o peso da fonte dos títulos fica entre 500 e 900, e o peso da fonte dos parágrafos geralmente é 400.

Tamanho da fonte

O tamanho das fontes afeta o texto que chama a atenção em uma página da Web e a legibilidade do texto.

Escolha um tamanho entre 14 e 19 pixels para a fonte. É o tamanho ideal para leitura. Além disso, defina o tamanho da fonte do parágrafo em 2 para 1 rem. Todos os outros tamanhos de fonte são extrapolados a partir dessa base. “Rem” é uma unidade especial que ajuda o tamanho do texto a se ajustar automaticamente em telas diferentes.

O Squarespace ajusta automaticamente o tamanho das fontes, garantindo que elementos importantes, como os títulos, se destaquem.  Ele também lida com tamanhos correspondentes de forma nativa, mas vale a pena ter isso em mente ao personalizar seu site.

Espaçamento entre as letras

Ajustar o espaço entre as letras pode melhorar a legibilidade, principalmente nos títulos e grandes blocos de texto. Nos títulos e botões, você pode até tentar um espaçamento ligeiramente negativo entre as letras (até -0,06). Lembre-se de priorizar a legibilidade e a leitura rápida, que abordaremos em breve.

Estilos de fonte

Use itálico, negrito ou sublinhado com moderação para enfatizar palavras ou frases específicas. Você pode, por exemplo, usar o sublinhado para enfatizar a palavra “novidade” em um novo curso on-line ou para destacar um projeto importante que você acabou de adicionar à página inicial. O uso excessivo desses estilos pode deixar o texto confuso e difícil de ler.

Considerações sobre a acessibilidade

As fontes devem ser fáceis de ler para todos. Confira algumas considerações importantes sobre acessibilidade.

• Contraste: veja se há diferença suficiente entre a cor do texto e a cor do plano de fundo. Se o contraste for baixo demais, será difícil ler. 

• Legibilidade: as fontes devem ser fáceis de ler nas telas de qualquer tamanho. Fontes mais simples e de bom tamanho garantem que os visitantes possam ler seu conteúdo.

Em resumo:

• Mantenha o tamanho da fonte-base entre 14 e 19 px.

• Mantenha o parágrafo 2 em 1 REM.

• O peso da fonte do título deve ser de 500 a 900, idealmente 600.

• Quanto ao peso da fonte do texto principal, comece com 400, espaçamento entre letras 0 e altura de linha em torno de 1,4 a 1,9.

Essas configurações otimizam a legibilidade das páginas, algo crucial para angariar um público, pois é mais provável que os visitantes interajam com conteúdo de qualidade quando ele é fácil de ler.

Escolhendo as fontes: fatores a considerar

Agora que você saber o que é serif e sans serif e entende melhor sobre pesos, tamanhos e estilos das fontes, é hora de analisar o panorama geral. Quais fatores considerar ao escolher as fontes?

Identidade da marca

As fontes devem refletir a personalidade e os valores da sua marca. Você é divertido e moderno? Ou é clássico e sofisticado? Deixe suas fontes contarem essa história.

Um moderno estúdio de HIIT, por exemplo, que tem personalidade e um tom forte, pode usar fontes sem serifa e peso pesado. Em comparação, um massagista pode escolher uma fonte serif ou sans serif com peso leve e, assim, passar o mesmo clima espaçado e tranquilo da empresa dele.

Legibilidade

Em última análise, as melhores fontes para o seu site são as fáceis de ver. Se os visitantes precisarem apertar os olhos para ler seu conteúdo; ou se a fonte for sofisticada demais, é provável que desistam.

Para manter os visitantes interessador, facilite a leitura e o reconhecimento de cada letra e palavra. Em vez de escolher algo chamativo, priorize fontes altamente legíveis, principalmente no texto principal. 

Se você está indeciso entre duas fontes, teste cada uma em uma página de amostra que você está criando e se pergunte: “É fácil ler o texto?” Escolha a mais fácil de ler. 

Emparelhamento das fontes

Combine fontes para criar um design visualmente atraente e coeso. Uma fonte sem serifa e em negrito com uma fonte serifada, por exemplo, pode ficar elegante e moderno.

Sempre mantenha um padrão, um equilíbrio e um fluxo de cima para baixo ao combinar fontes na página. 

Os pares de fontes integrados do Squarespace são um ótimo ponto de partida para você combinar com a identidade e às metas da sua marca. Eles trazem combinações com curadoria profissional, que certamente trarão um visual sofisticado e profissional. 

Rapidez na leitura

As pessoas geralmente não leem tudo na página. Elas passam o olho, procurando informações importantes. Se encontrarem, podem então voltar e ler o texto com mais atenção. 

Use uma fonte que facilite que as pessoas percorram a página até encontrarem o que precisam. Use títulos, subtítulos e marcadores claros para melhorar essa leitura rápida da sua página. 

Tamanho em diferentes aparelhos

Sua fonte pode ficar ótima no desktop; mas será que ela passa no teste dos aparelhos móveis? Suas fontes precisam ser flexíveis e ficarem legíveis nas telas menores. Confira uma prévia do seu site em tablets e aparelhos móveis, mas também nas telas grandes, como nos monitores de desktop.

Confira outras dicas para escolher os recursos de design para seu site

Encontre a fonte perfeita

O Squarespace tem uma grande variedade de fontes para você criar o visual perfeito para o seu site. O menu de estilos do site é sua porta de entrada para um mundo de belas fontes. Teste e descubra às que dão vida à visão do seu site. 

Para você começar, selecionamos os que dão um toque moderno e envolvente ao seu site.

Sans serif

• Nunito Sans

• Manrope

• Dela Gothic One

• Work Sans

• Inter

• DM Sans

• Poppins 

• Fairwater Sans

Serif

• Young Serif

• Monitor Baskerville PT

• Fino

• Dapifer

• Linótipo Didot

• Sirene Eighteen MB

• Playfair Display

• Ohno Fatface

Para conferir as fontes script e outras “joias escondidas”, clique no texto de um site Squarespace e selecione Família e Conferir todas as fontes. 

Script

• Imperial Script

• Scriptorama Markdown JF

• Luxurious Script

• Livermore Script ATF Rough No. 1

• Sketchnote Text

Joias escondidas

• Outfit 

• Arboria

• DM Sans 

• Ambroise Std Francois 

• Alverata

• Arno Pro Display

• Cabin condensed

• Lexia Advertising

• Worthington Arcade

• Worker

• Space Grotesk

• Runda

• Sora

• Objective Mk2

Ao escolher as fontes para o seu site, você tem que expressar a personalidade da sua marca, mas garantir que seus visitantes tenham uma ótima experiência. 

Teste combinações até encontrar a perfeita para seu site. Com as fontes certas, seu site não só ficará deslumbrante como deixará uma impressão marcante.