Você não precisa de milhares de fontes para criar um site com ótima aparência. Mas você precisa ter certeza de que as fontes que você usa estão visíveis para todos que visitam seu website. E é aí que entram as fontes seguras na web.
E se você pudesse encontrar fontes seguras na web que são a) 100% livres para uso e b) não precisam ser hospedadas em outro lugar para que seus visitantes as vejam, seria um homerun para você.
É exatamente para isso que este post foi escrito: vamos cobrir as 31 melhores fontes seguras da web e mostrar-lhe exatamente como implementá-las em seu site WordPress.
Use os links ao lado para navegar até a seção que mais lhe interessa, ou pule diretamente para nossa lista de fontes seguras na web.
Quais fontes são seguras para a Web?
Incluindo variações, há mais de 650.000 fontes diferentes disponíveis on-line. As fontes que são suportadas pela maioria dos navegadores e sistemas operacionais da web são consideradas seguras para a web. O sistema operacional inclui automaticamente os arquivos de fontes, para que os visitantes não tenham que baixar as fontes de seus servidores.
Um exemplo é a onipresente fonte Arial que deu origem a milhares de “spin-offs”.
As fontes Web Safe Fonts são necessárias em 2024?
Claro, a grande maioria dos usuários agora usa o Google Chrome, tanto no celular quanto no desktop. Mas isso não significa que as fontes seguras para a web sejam coisa do passado.
De fato, as fontes suportadas variam de acordo com os sistemas operacionais, incluindo a versão atual que um usuário possui. Portanto, se você projetar um website com uma fonte suportada apenas pela mais nova versão do Windows 10, a maioria dos usuários verá algo mais.
Além disso, se você optar por usar e hospedar uma fonte local personalizada, ou uma fonte hospedada por terceiros, isso pode diminuir a velocidade de seu website. Portanto, a mudança para fontes seguras na web pode acelerar seu website. E isso é uma coisa ótima. Porque quase 70% dos consumidores dizem que a velocidade da página influencia suas decisões de compra.
As fontes do Google são seguras na web?
Google Fonts não são inerentemente suportadas por seu sistema operacional, portanto, por definição, elas não são fontes seguras para a web. Em vez disso, como o Google, um terceiro, as hospeda, uma fonte do Google é chamada de fonte web. Confuso, nós sabemos, mas a diferença é que seu navegador precisa carregar um arquivo antes de poder mostrar as fontes do Google.
As fontes seguras na Web já têm arquivos de fontes prontos na maioria dos dispositivos. Mas, não se preocupe com a falta da palavra “seguro”. As fontes do Google são completamente seguras para serem usadas para melhorar o design de seu website. Mas, as solicitações HTTP extras a um servidor externo podem diminuir a velocidade de carregamento de sua página.
31 Melhores fontes seguras na Web
Compilamos uma lista de mais de trinta fontes diferentes e de grande aparência que você pode usar para projetar seu website.
Vamos direto ao assunto.
1. Arial
Arial é uma fonte clássica sem serifa, adequada tanto para parágrafos quanto para manchetes. Há muito tempo tem sido um ponto de partida no design da web. Embora nos últimos anos tenha sido usado com freqüência como um recurso em uma pilha de fontes, e não como a principal fonte-família.
Pilha de fontes recomendada
Font-family: Arial, Helvetica Neue, Helvetica, sans-serif.
2. Baskerville
Baskerville é uma fonte de serifa relativamente grossa, originalmente desenvolvida como uma fonte tipográfica por John Baskerville em 1750. O design é bem equilibrado, usando uma mistura de traços grossos e finos para suavizar as bordas duras de uma tipografia típica de serifa. É bem suportado pelas novas versões Apple e Microsoft OS.
Pilha de fontes recomendada
Font-family: Baskerville, Baskerville Old Face, Garamond, Times New Roman, serif.
3. Bodoni MT / Bodoni 72
Bodoni MT é uma fonte serif, como Times New Roman, mais adequada para texto de parágrafo do que manchetes da maioria dos websites. O Bodoni MT está disponível por padrão com Microsoft 10 e algumas versões mais antigas. O Bodoni 72 está incluído com MacOS Sierra e versões mais recentes.
Pilha de fontes recomendada
Font-family: Bodoni MT, Bodoni 72, Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif.
4. Calibri
Calibri é a fonte padrão da Microsoft sem fonte serif e tem sido desde seu lançamento com o Microsoft Office 2007. Tem um visual suave e moderno, com bordas arredondadas para elevar a típica sensação de sem serifa, tornando-a mais quente que robótica.
Pilha de fontes recomendada
Font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif.
5. Calisto MT
Calisto MT é uma fonte serif com serifas ligeiramente mais macias e menos pronunciadas do que a maioria das fontes similares. É uma fonte padrão da Microsoft, incluída com a maioria das versões mais recentes do Windows. A fonte macOS ou equivalente iOS é a fonte Bookman Old Style.
Pilha de fontes recomendada
Font-family: Calisto MT, Bookman Old Style, Bookman, Goudy Old Style, Garamond, Hoefler Text, Bitstream Charter, Georgia, serif.
6. Cambria
Cambria é uma fonte de serifa ainda mais suave, com, em muitos casos, serifas quase imperceptíveis mesmo para letras maiúsculas. Isto lhe dá uma sensação mais moderna e também mantém um alto nível de legibilidade nas telas.
Pilha de fontes recomendada
Font-family: Cambria, Georgia, serif.
7. Candara
Candara é uma fonte sans serif. É parte da coleção de fontes ClearType da Microsoft. O equivalente em macOS e iOS é Optima Regular. Os pesos irregulares fazem com que se sinta um pouco menos moderna e corporativa que outras fontes sans serif.
Pilha de fontes recomendada
Font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif.
8. Century Gothic
Century Gothic é uma fonte geométrica sem serifa, com um aspecto muito limpo e equilibrado. É uma ótima fonte para a web, especialmente para cabeçalhos e subtítulos. Ela foi originalmente projetada para competir com a fonte Futura. Está incluída na maioria dos sistemas operacionais da Microsoft e da Apple.
Pilha de fontes recomendada
Font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif.
9. Consolas
Consolas é uma fonte sans serif com uma abordagem única ao design. Todos os caracteres têm a mesma largura, e é por isso que usa serifs apenas para a letra “I” e a letra minúscula “l”. Faz parte da coleção ClearType.
Pilha de fontes recomendada
Font-family: Consolas, monaco, monospace.
10. Copperplate Gothic
A placa de cobre gótica é uma fonte de inspiração gótica, com ligeiras serifas glifosas em certas letras. Como é inspirada nas runas góticas, não há uma fonte em letras minúsculas.
Pilha de fontes recomendada
Font-family: Copperplate, Copperplate Gothic Light, fantasy.
11. Courier New
Courier New é uma fonte serif de laje monoespaçada, com texto regular muito mais fino do que a maioria das outras fontes serif e sans serif. Tem cobertura quase perfeita tanto pela Microsoft como pela Apple, tanto em computadores como em dispositivos móveis.
Pilha de fontes recomendada
Font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace.
12. Dejavu Sans
Dejavu Sans é uma fonte sans serif com linhas limpas e retas, quase um retorno para as fontes clássicas sans como Arial e Verdana.
Pilha de fontes recomendada
Font-family: Dejavu Sans, Arial, Verdana, sans-serif.
13. Didot
Didot é uma fonte inspirada na fonte original Didot, utilizada pela gráfica francesa do século XIX, a família Didot. É um suporte principal da Apple, apoiado pela maioria de seus sistemas operacionais e dispositivos.
Pilha de fontes recomendada
Font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Calisto MT, Times New Roman, serif.
14. Franklin Gothic
Franklin Gothic é uma fonte sans serif com letras invulgarmente espessas, quase como se fosse a versão em negrito de outra fonte. A fonte original foi desenvolvida no início do século 20 por fundadores americanos. É uma boa escolha de fonte para manchetes, mas pode não ser uma boa escolha para texto corporal.
Pilha de fontes recomendada
Font-family: Franklin Gothic, Arial Bold.
15. Garamond
Garamond é uma fonte serif, inspirada nas fontes tipográficas feitas pelo gravador parisiense do século 16, Claude Garamond. Tem bordas mais suaves e arredondadas do que algumas das fontes de serifas mais padronizadas, como a Times New Roman. As versões modernas do Microsoft e Apple OS incluem suas próprias versões da fonte Garamond.
Pilha de fontes recomendada
Font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif.
16. Georgia
Um parente próximo de Garamond, Georgia, é outra fonte serif com bordas em sua maioria arredondadas e uma sensação bastante quente. Foi desenvolvida para a Microsoft em 1996 e ainda é uma das fontes mais difundidas da MS. É suportada por praticamente todas as versões Windows e macOS.
Pilha de fontes recomendada
Font-family: Georgia, Times, Times New Roman, serif.
17. Gill Sans
Gill Sans é uma fonte sans serif, com linhas afiadas e limpas que lhe dão um visual moderno. Não é ideal para texto de parágrafo fora da caixa, devido à sua falta de contraste entre letras, e espaçamento fechado. Mas, como você pode ver no texto de exemplo, ele faz uma manchete com grande aparência. A maioria dos dispositivos iOS, macOS e Windows o suportam.
Pilha de fontes recomendada
Font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif.
18. Goudy Old Style
Goudy Old Style é uma fonte serif de estilo antigo suave, com serifas fortes e um visual e toque antiquado. Os períodos são em forma de diamante em vez dos círculos redondos regulares e perfeitos da maioria das fontes de serifas. Está incluída com a maioria das versões mais recentes do Windows.
Pilha de fontes recomendada
Font-family: Goudy Old Style, Garamond, Big Caslon, Times New Roman, serif.
19. Helvetica
Helvetica é talvez a fonte mais famosa de todos os tempos, e definitivamente uma das únicas fontes a ter seu próprio documentário dedicado. É uma fonte moderna sem serifa, inspirada em outras fontes suíças e alemãs modernas do final do século XIX e início do século XX.
Em vez de um design suave, arredondado e quente, é equilibrado e focado em linhas e formas limpas. Isto o torna uma das poucas fontes adequadas tanto para cópia corporal quanto para manchetes. Todos os dispositivos da Apple incluem fontes Helvetica, enquanto que a Microsoft tem como padrão a Arial, seu equivalente em MS.
Pilha de fontes recomendada
Font-family: Helvetica Neue, Helvetica, Arial, sans-serif.
20. Impact
Impact é uma fonte realista sem serifa, com uma aparência em negrito muito grossa como padrão para todos os textos, maiúsculas e minúsculas. A ousadia faz com que se destaque do texto normal e o torna perfeito para manchetes ou CTAs (chamadas à ação), mas não é ideal para cópia corporal.
Fez parte do núcleo original fontes para o pacote em 1998. Ainda hoje é amplamente incluída e suportada tanto por computadores e telefones Apple e Windows.
Pilha de fontes recomendada
Font-family: Impact, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif.
21. Lucida Bright
Lucida Bright é a fonte serif na linha de fontes Lucida da Microsoft, desenvolvida para a MS em 1991. Uma das coisas que o faz se destacar é o uso de serifas mais quadradas e robustas, por exemplo, na letra “T” e “L” maiúscula. Ela está incluída por padrão na maioria das versões mais novas do Windows, enquanto o MacOS normalmente inclui apenas a fonte sans serif Lucida Grande, fazendo da Geórgia uma fonte lógica de recurso.
Pilha de fontes recomendada
Font-family: Lucida Bright, Georgia, serif.
22. Lucida Sans
Lucida Sans é uma fonte humanista sem serifa, projetada especificamente para complementar as fontes serifas da linha Lucida. Há uma variação maior no peso do traço do que com as fontes sem serifas mais limpas como Helvetica ou Arial. Isto o faz sentir-se um pouco menos futurista ou robótico, e mais lúdico. Fora da caixa, é uma ótima fonte para manchetes e CTAs.
Pilha de fontes recomendada
Font-family: Lucida Sans, Helvetica, Arial, sans-serif.
23. Microsoft Sans Serif
Microsoft Sans Serif é uma fonte sans serif introduzida pela primeira vez com o Windows 2000. É o sucessor da fonte MS Sans Serif, que também era conhecida como Helv (abreviação de Helvetica). É inspirada e baseada na Helvetica, a principal fonte do tipo sans serif nos tempos modernos.
É uma fonte limpa com peso uniforme, levando a um visual limpo e profissional. Perfeito para manchetes e websites corporativos. Foi incluída como uma das fontes originais para a web e ainda é padrão para todos os dispositivos Microsoft.
Pilha de fontes recomendada
Font-family: MS Sans Serif, sans-serif.
24. Optima
Optima é uma fonte humanista sem serifa, com peso de curso variável e simetria variável. Isto faz com que pareça quase feito à mão, o que combate o típico toque produzido em massa de uma fonte sans serif. É uma das fontes padrão da Apple sans serif e suportada pela maioria dos dispositivos iOS e macOS. O equivalente da Microsoft é Segoe.
Pilha de fontes recomendada
Font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif.
25. Palatino
Palatino é outra serifa de estilo antigo e se sentiria em casa em qualquer jornal ou revista on-line. Mas é menos uniforme do que algo como um Geórgia ou Times New Roman, com pesos e formatos variados.
A abordagem de design ajuda a suavizar letras afiadas como k, l, x, y, e z. É também ligeiramente mais ousada do que outras fontes serifas. Estes dois fatores ajudam a sentir-se um pouco mais quente. O Palatino está incluído com a maioria dos dispositivos Windows e Apple.
Pilha de fontes recomendada
Font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif.
26. Perpetua
Perpetua é uma fonte serif com um design único, originalmente criada pelo escultor inglês Eric Gill. Há um forte contraste no peso do traço, por exemplo, olhe para o “e” minúsculo ou o número “3”. Isto dá à fonte uma qualidade criativa, quase lúdica. É tipicamente uma fonte do Windows, mas Baskerville, um parente próximo, é padrão na maioria dos dispositivos Apple.
Pilha de fontes recomendada
Font-family: Perpetua, Baskerville, Big Caslon, Palatino Linotype, Palatino, serif.
27. Rockwell
Rockwell é uma fonte serifa quadrada ou de laje com letras muito ousadas, quase monoweight. É adequado para manchetes ou CTAs, mas o peso da fonte adicionado não é ótimo para texto corporal. Está incluída na maioria das versões mais recentes do MS Windows.
Pilha de fontes recomendada
Font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif.
28. Segoe UI
Segoe UI é a principal fonte sans serif da família de fontes Segoe. A Microsoft não só a utiliza em muitas aplicações, mas também em vários materiais de marketing para seus produtos.
É uma fonte moderna, com letras simétricas e pouca variação no peso do traço. A fonte não está incluída nos computadores Apple, mas a equivalente Helvetica Neue é semelhante em aparência e sensação.
Pilha de fontes recomendada
Font-family: Segoe UI, Frutiger, Dejavu Sans, Helvetica Neue, Arial, sans-serif.
29. Tahoma
Tahoma é outra fonte sem serif desenvolvida pela Microsoft. Tem letras ligeiramente mais ousadas que a Segoe UI e usa pontos quadrados para suas letras minúsculas, pontos e outras marcas.
É uma fonte limpa e uniforme, e não se sentiria deslocada em conteúdo ou títulos. Está incluída em todos os dispositivos Microsoft e praticamente em todos os dispositivos Apple.
Pilha de fontes recomendada
Font-family: Tahoma, Verdana, Segoe, sans-serif.
30. Trebuchet MS
Trebuchet MS é outra fonte sans serif desenvolvida pela Microsoft. Foi uma das fontes originais incluídas no núcleo de fontes para o pacote web da Microsoft. Ela ainda é suportada por praticamente todos os dispositivos da Microsoft e da Apple. As letras são mais finas do que muitas outras fontes sans serif, tornando-a uma opção para parágrafos e corpo de texto.
Pilha de fontes recomendada
Font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serif.
31. Verdana
Verdana, uma fonte limpa sem serifa, é outro grampo da Microsoft que existe desde 1996. O peso do traço é bastante baixo para um sans serif, levando a letras finas e fáceis de ler. Você pode usá-la tanto para texto de parágrafo quanto para manchetes sem problemas. É suportado por praticamente todos os dispositivos Apple e Windows.
Pilha de fontes recomendada
Font-family: Verdana, Geneva, sans-serif.
Fontes Cursivas Seguras na Web
Se você quiser usar uma fonte cursiva segura para a web, não tem muitas opções para escolher. Especificamente:
- Segoe script
- Rage
- Script MT
- Snell Roundhand
- Lucida Handwriting
Não há nenhuma fonte cursiva que seja universalmente suportada através dos dispositivos Apple e Microsoft. Você deve considerar que usar uma fonte cursiva para seu corpo de texto pode não ser uma grande idéia, pois a legibilidade é uma grande parte da usabilidade do site.
Você deve sempre usar texto altamente legível para seus parágrafos, caso contrário, os visitantes com visão prejudicada terão dificuldade para ler o texto em seu site. Isto pode levar a altas taxas de ressalto e a uma falta geral de envolvimento com seu conteúdo.
Fontes Web Safe Sans Serif
Sans significa “sem” em francês, então sans serif significa essencialmente “sem serif”. Um serif é uma linha ou traço adicionado a um traço mais longo em uma letra. Por exemplo, as pequenas linhas verticais sob o traço superior em um “T” maiúsculo, comum em manchetes de jornais ou revistas. As fontes sem serif são as mais comuns e populares na web, portanto, você tem muitas opções para escolher:
- Arial
- Calibri
- Candara
- Century Gothic
- Consolas
- Dejavu Sans
- Franklin Gothic
- Gill Sans
- Helvetica
- Lucida Sans
- MS Sans Serif
- Neue Helvetica
- Optima
- Segoe UI
- Tahoma
- Trebuchet MS
- Verdana
Onde baixar fontes Web Safe?
O ótimo das fontes seguras na web é que você não tem que se preocupar em baixá-las. Elas já são suportadas pelo sistema operacional de cada visitante, então você só precisa codificá-las com o CSS. Se você não souber nada sobre HTML e CSS ou codificação para a web, isto pode parecer um pouco avassalador.
Mas acredite em nós, não é tão difícil quanto você pensa que é. Nós o acompanharemos passo a passo no processo em nossa próxima seção.
Como adicionar fontes seguras para a Web ao seu site WordPress
Se você tem um site WordPress com o último tema Twenty Twenty, você pode editar as fontes HTML adicionando CSS personalizado no personalizador WordPress.
Acesse-o clicando no link Aparência > Personalizar no menu, e depois expandindo a guia adicional CSS.
Em seguida, você precisa usar as ferramentas Chrome Dev Tools (ou uma ferramenta similar para outro navegador) para identificar os seletores do texto que você deseja alterar.
Por exemplo, você pode inspecionar a manchete do seu post no blog:
Podemos ver que o tema utiliza o seletor padrão “entry-title” para a manchete. Você também pode procurar pelo atributo “font-family” para ver como o tema está estilizando o texto, e em que nível.
Como o Twenty Twenty não usa uma fonte específica para manchetes, você pode modificar facilmente a fonte da manchete, visando o seletor “font-family”.
Por exemplo, se quisermos mudar a manchete para a fonte Impact, podemos usar o seguinte código:
h1.entry-title { font-family: Impact, Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; }Basta adicioná-lo ao CSS adicional e clicar em “Publicar” para impulsionar suas mudanças ao vivo.
Cobrimos isto e muito mais em nosso guia sobre como mudar as fontes no WordPress. Se você construiu seu website usando HTML e CSS, você pode editar a fonte diretamente no código fonte.
Por exemplo, se você usar a etiqueta de estilo nos documentos HTML para aplicar o código CSS a cada página, você pode editar o atributo font-family ali.
Se você quiser mudar a fonte de todo o texto da página, você deve direcionar o seletor de “corpo”. Se você quiser mudar a fonte para um texto específico, você precisa usar um seletor específico.
Se você usou um modelo para construir seu website, é muito provável que seu CSS esteja localizado em uma folha de estilo separada. Isto é ótimo porque significa que você pode mudar a fonte de todo o seu site editando apenas um arquivo.
Nesse caso, você precisa encontrar seu arquivo de folha de estilo (normalmente chamado style.css ou alguma variação do mesmo). Depois, você precisa encontrar a seção que controla as fontes e tipos de letra de seu site.
Normalmente, isto é feito em direção ao topo. Caso contrário, você pode procurar por “font-family” usando o editor de código de sua escolha.
Resumo
Assim como nos temas e plugins, não faltam opções para você quando se trata de idéias de fontes.
Com uma variedade de fontes serif, sans serif, monospace e até mesmo cursive disponíveis gratuitamente, as fontes seguras na web são um ótimo lugar para começar ao criar um site.
As fontes perfeitas fazem sua marca se destacar, melhoram a legibilidade e apóiam sua mensagem. Escolha sabiamente!
Se você gostou deste artigo, confira nosso guia das 50 Fontes Retro para dar uma sensação nostálgica ao seu site ou projeto de design gráfico.
Editor-chefe da Kinsta e consultor de marketing de conteúdo para desenvolvedores de plugins do WordPress. Conecte-se com Matteo no Twitter.
Deixe um comentário