janeiro 8, 2021
6min de leitura
Andrei L.
Neste conteúdo, vamos mostrar para você as 20 melhores fontes HTML que você pode usar no seu site.
Uma fonte que se encaixa com a proposta do seu projeto online vai melhorar o web design, fazendo com que os conteúdos fiquem mais fáceis de serem lidos.
Porém, escolher a opção certa pode ser difícil. Justamente porque existem muitas opções por aí. E até mesmo algumas fontes são muito parecidas com as outras para muitas pessoas.
Crie logos incríveis com facilidade usando o Criador de Logos gratuito do Zyro! Represente a sua marca com um design lindo em apenas um minuto.
Conteúdo
Conhecendo ou não, uma fonte HTML é uma peça fundamental do seu site. Ela não só permite que seus visitantes leiam os conteúdos mais facilmente, como também melhoram a estética de uma página.
Você precisa escolher a tipologia do seu site com bastante cuidado. Usar tipos muito pequenos ou muito grandes pode ter um impacto negativo no jeito como seu site se apresenta para os leitores.
Além disso, algumas fontes são seguras de usar em sites. Enquanto outras nem tanto. Vamos abordar mais sobre isso em detalhes mais abaixo.
Para mudar uma fonte de texto para HTML, você pode usar o atributo de estilo dentro da tag <p> que define o uso de parágrafos. Aqui vai um exemplo:
<p style = "font-family:courier,arial,helvetica;"> Write your text here </p>
Existem três tipos de fontes no exemplo acima (Courier, Arial e Helvética). A segunda e a terça são backup em caso da primeira não puder ser encontrada na página ou não estiver instalada.
Fonte Web Segura é um termo usado para descrever uma fonte que é universalmente instalada em todos os computadores. Seu site vai carregar mais rápido quando você usar uma fonte web segura que já está armazenada na sua máquina.
E isso vai afetar o SEO do seu site, já que os mecanismos de busca contam o carregamento de uma página como um dos fatores de ranqueamento mais importantes.
É por isso que recomendamos que você sempre use uma fonte web segura. Isso garante que seus visitantes possam vê-la facilmente enquanto mantém o desempenho do seu site lá em cima.
Tenha em mente que existem alternativas para fontes web seguras e elas geralmente compartilham algumas características das mais populares, como Helvética, Futura, etc. Por exemplo, as alternativas para Sans Serif como Futura são Noir Pro e Lorin.
Fora isso, diferente das fontes web seguras, as fontes alternativas não costumam estar instaladas nos Sistemas Operacionais.
Porém, pode ser que você queira usar alguma delas porque acha que uma determinada fonte é usada tão excessivamente que queira se diferenciar.
Apenas se lembre de que, escolhendo usar uma fonte alternativa, pode ser que velocidade do seu site seja um pouco comprometida.
Em tipologia, cada fonte é membro de uma destas 5 famílias de fontes que vamos mostrar abaixo. Essa semelhança é baseada puramente em design.
As fontes na família Cursive imitam a caligrafia humana. É por isso que as letras são todas unidas, juntas e sem separações.
A família Fantasy geralmente tem elementos decorativos em cada letra, mas que ainda representam caracteres. Muitos livros de ficção ou filmes usam esse tipo de fonte nos seus títulos.
A característica mais marcante dessa família de fonte é uma pequena linha nas extremidades de cada letra ou símbolo. Vários sites usam Serif para o corpo dos seus textos em conteúdos escritos.
Diferente da Serif, a Sans-serif não tem a pequena linha atrelada em cada letra ou símbolo. Além disso, a fonte geralmente tem uma largura parecida, apresentando um aspecto minimalista e moderno.
Cada letra e símbolo da família de fontes Monospace ocupa exatamente o mesmo espaço horizontalmente. Ela é frequentemente usada em máquinas de escrever ou terminais de computadores.
As fontes que vamos mostrar na nossa lista de fontes HTML são todas do tipo “web seguras”. Por conta disso, elas são compatíveis em todos os sistemas e numa variedade de dispositivos.
Cada uma delas têm características exclusivas. Então, você precisa considerar o estilo do seu site e a tonalidade da sua escrita antes de escolher a fonte certa.
Arial é uma fonte da família Sans-serif e é uma das mais usadas no mundo. Muitos críticos dizem que essa fonte é uma aposta segura. Então tanto textos na internet quanto em jornais costumam apresentar a fonte Arial.
Essa fonte HTML é uma variação da velha fonte Times do grupo Serif. A Times New Roman é a escolha favorita para conteúdos publicados em livros e publicações impressas. Essa fonte até mesmo foi recomendada pela APA (Associação Americana de Psicologia).
Designers geralmente adoram a Helvética. E por isso que as pessoas sempre acertam ao escolhê-la como fonte. Sem surpresas, grandes marcas mundiais, como Jeep, Kawasaki, Motorola e BMW usam essa fonte nos seus logos.
Originalmente, a Times está impressa na maior parte dos jornais mais antigos. E se você quer colocar uma sensação tradicional ou formal ao seu site, essa fonte é perfeita para isso.
Essa fonte é uma das alternativas à Courier. Ela é mais fina e visualmente mais atraente aos olhos quando a vemos numa tela. É por isso que aparelhos eletrônicos quase sempre usam Courier New.
Essa fonte pode ser lida em tamanhos pequenos em telas com resoluções menores. Muitas pessoas identificam a Verdana como uma fonte para telas, ainda que isso não seja de todo verdade. Por exemplo, o IKEA usa essa fonte não apenas para o site, mas também para catálogos.
O Courier é uma das mais famosas fontes da família Monospace – todos os sistemas operacionais vêm embarcados com ela. Essa fonte HTML também tem sido usada como padrão em roteiros de cinema devido à sua característica de ser parecida com a tipologia de máquinas de escrever.
É uma das versões mais elegantes da Arial. Ainda que ela seja uma alternativa, os usuários conseguem encontrá-la instalada numa variedade de sistemas operacionais.
O Microsoft Vista foi o primeiro sistema operacional a usar a Candara. Junto com as fontes Calibri e Cambria, a letra “C” nessas fontesé bem integrada com o sistema de renderização de tipologias do Windows.
Geneva deriva da cidade-natal onde morava o designer que a criou (Genebra, na Suiça). A geneva pertence ao grupo de fontes da família Sans-serif.
É a fonte padrão usada no pacote Microsoft Office. Pelo Windows ser um dos sistemas operacionais mais usados, temos certeza que essa fonte HTML se encaixa na maioria dos sites.
A Optima foi inspirada nas clássicas letras Romanas e é usada em qualquer tipo de texto – de uma placa de estrada e até em logo de produtos. Erik Spiekermann, um conhecido tipógrafo alemão, costuma dizer que a Optima pode ser encontrada na maioria dos estacionamentos e hospitais dos Estados Unidos.
Junto com a Calibri e a Candara, a Cambria é uma das fontes que a Microsoft usa como tecnologia de renderização em telas.
A Garamond é um tipo de fonte clássica que está impressa em muitos livros. Esse estilo de fonte se encaixa numa proposta em que você deseja criar um aspecto seguro no seu site.
Essa fonte é ideia de um escultor inglês que queria criar uma fonte totalmente original. Muitos artistas e textos acadêmicos do Penguin Classics e da Universidade da Pennsylvania usam a Perpetua nos seus trabalhos.
A Monaco é uma fonte que vem embarcada no MacOS X. Ela é uma fonte da família Monosspace. A Monaco possui uma letra “O” e o número “0” (zero) diferenciados, contendo uma linha na diagonal dentro deles. Até 2009, o MacOS usava essa fonte no seu terminal e no Xcode.
A Didot é uma fonte da família Serif e tem sido descrita como neoclássica por muitos críticos. Um dos seus usos mais famosos é na CBS News e no The Late Show of Stephen Colbert.
Essa fonte tem um estilo de caligrafia baseado em uma técnica de escrita à mão. Assim, a Brush Script MT se torna uma opção de fonte HTML muito bonita e bem fácil de ler para seu site.
A Lucida Bright é uma das versões da família de fontes Lucida Bright. A diferença é que as linhas dessa fonte têm mais contraste que os outros membros do grupo. Uma publicação famosa que usa a Lucida Bright é a Scientific American Magazine.
Os designers da Copperplate queriam que a fonte fosse usada apenas para cabeçalhos e títulos. É por isso que essa fonte é toda em letras maiúsculas. Ela ficou bem famosa quando o programa Who Wants To Be a Millionaire começou a usá-la como marca registrada.
Os usuários de internet compartilham de alguns gostos definitivos: eles odeiam a fonte Comic Sans. As pessoas consideram essa fonte infantil, nada profissional e até mesmo esquisita.
Isso até se tornou um meme ao longo dos anos. E é por isso que não recomendados que você a use. Existem opções que vão fazer seu site ficar muito mais atrativo visualmente.
Agora você já pode decidir qual é a melhor fonte para o estilo e a tom do seu site. Apenas preste atenção na usabilidade de um tipo em particular e avalie se ele se encaixa com o que você precisa.
Boa sorte e se lembre de não usar Comic Sans, beleza? 🙂
agosto 19 2019
Boas dicas, obrigado ;->
agosto 23 2019
COMIC SANS É LEGAL SIM!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
dezembro 13 2019
Gostei muito! Mas poderia colocar demonstração das fontes? Qbrigado.
fevereiro 07 2020
Qual é a font do site da Hostinger ? tamanho etc, quero usar ela no meu site, obrigado!
Respondeu em fevereiro 26 2020
A fonte é a Segoe UI, Gabriel. Os tamanhos são variados, dependendo da página! :)
março 31 2020
PArabéns pelo conteúdo. muito bom.
junho 04 2020
Boa Noite Andrei. Parabéns pelo seu trabalho e por sua humildade em compartilhar seus conhecimentos! Eu gostaria de pedir sua ajuda se possível for. Escrevo um Blog especificamente sobre "Futebol" e gostaria de uma dica sua, sobre qual a melhor fonte para se escrever textos sobre futebol, e se possível que você me indicasse qual uma fonte boa para as "Manchetes" Títulos das matérias! Eu li que é bom fazer a título com uma fonte diferente do texto né? Antecipadamente agradeço sua atenção, e fico no aguardo de sua resposta!
Respondeu em junho 16 2020
Oi, Sérgio, beleza? Agradecido aqui pelo feedback. :) Sobre a fontes para blog de futebol, tudo vai depender da identidade visual do seu blog. Não tem muita necessidade de fazer os títulos com uma fonte diferente do corpo do texto. Por isso, você pode escolher a Arial para o corpo do texto e também para os títulos das postagens. Porém, o que você pode fazer de diferente na identidade visual é no logotipo e no slogan do seu site, que podem receber fontes e estilos bem diferentes e que remetem ao esporte. Para isso, você pode usar estar sugestões de fontes esportivas/futebol aqui, aqui e aqui.
julho 29 2020
Ótimo conteúdo! Parabéns!
Andrei L.
Respondeu em dezembro 20 2019
Oi, Felipe! Colocamos algumas das principais! :)