Se há uma coisa que é mais importante para a marca e aparência do seu site, pode ser apenas fontes. Uma fonte cuidadosamente escolhida pode transmitir personalidade, tornar longas passagens de texto mais legíveis e solidificar sua marca na mente das pessoas.
Mas você não pode simplesmente baixar qualquer fonte antiga e usá-la em seu website. Há algumas coisas a serem levadas em consideração primeiro.
Onde você pode encontrar fontes web, que fontes são compatíveis com HTML e quais são “seguras para a web” e podem ser usadas em qualquer website? Vamos explorá-las todas neste artigo.
Vamos começar!
Fontes HTML: O que são fontes da Web?
Os tipos de letra têm uma rica história, mas as fontes, como as conhecemos hoje, entraram em amplo uso com o crescimento dos computadores e da Internet. As fontes digitais precisavam de tratamento especial para serem renderizadas nas telas. E quando diferentes tamanhos de tela e dispositivos entraram em jogo, as coisas só ficaram mais complicadas.
Quando se trata de fontes digitais, existem alguns tipos diferentes. Algumas fontes são destinadas principalmente à impressão e ao design gráfico. Elas tendem a ser grandes e inadequadas para websites, mas são perfeitas para a criação de gráficos. Há também fontes “seguras para a web” que são encontradas na maioria de todas as máquinas.
Mas para web design, o que você precisa procurar são fontes da web, fontes tipográficas especialmente projetadas para renderizar perfeitamente na web e através de uma variedade de dispositivos. Você também pode usar as fontes web em e-mails ou outros serviços on-line.
Há algumas coisas que tornam as fontes da web diferentes de sua fonte padrão para download. Para uma, muitas vezes não podem ser usadas com programas em seu computador; elas devem ser carregadas em um servidor e usadas na web.
Eles também são projetados para serem legíveis em telas diferentes e para tamanhos diferentes. Elas podem ser estilizadas com CSS (como aplicar negrito ou itálico, cores e outros atributos) e oferecem suporte para outras condições como renderização da direita para a esquerda.
Embora as fontes web não venham instaladas em seus dispositivos ou nos de seus visitantes, existem maneiras especiais de exibi-las para que qualquer pessoa que visite seu site possa vê-las.
Você pode baixar estas fontes como de costume e carregá-las em seu servidor, ou usar um serviço especial de hospedagem de fontes da web que as incorpora em seu site sem exigir um download.
Que fontes você pode usar em HTML?
Algumas fontes não são para serem usadas na web, mas quais podem ser inseridas em seu site HTML?
Essencialmente, você pode usar qualquer fonte para download em seu site. Tudo que você precisa fazer é carregá-la e configurá-la corretamente, e ela deve ser exibida em seu site.
Mas embora você possa tecnicamente usar qualquer fonte em seu site, nem sempre é a melhor idéia. Você deve procurar especificamente as fontes da web, não as fontes destinadas a serem usadas em design gráfico ou impresso. Algumas fontes são tão estilizadas ou destinadas a tamanhos de texto tão grandes que não serão renderizadas adequadamente em seu site. Com uma fonte da web, isto não é uma preocupação.
Há também problemas de licenciamento para se preocupar ao usar fontes desktop em seu site (ou ao usar fontes web para design impresso). Usar uma fonte em um meio diferente daquele para o qual você a comprou pode lhe trazer problemas. Certifique-se de ler cuidadosamente a licença de sua fonte antes de comprá-la.
Você também pode procurar certos hosts que lhe permitem usar uma simples chamada em HTML para renderizar suas fontes em seu próprio website através de planos gratuitos ou pagos.
De qualquer forma, desde que a fonte utilizada seja carregada corretamente e tenha o tipo de arquivo correto:
- TTF
- OTF
- WOFF/WOFF2
- SVG
- EOT
Com estes tipos de arquivo de fonte, você poderá então utilizá-lo em todo o seu site e estilizá-lo com HTML e CSS.
Há também fontes seguras na web que normalmente funcionam universalmente em todos os navegadores e programas.
O que são fontes seguras na Web?
Um problema com a maioria das fontes da web é que não há garantia de que elas serão exibidas corretamente em seu site. Ao contrário do design gráfico, onde você pode simplesmente criar uma imagem em um programa e imprimi-la para distribuição, um navegador deve renderizar as fontes da web toda vez que alguém abrir a página. Se suas fontes não forem carregadas, você pode acabar com um website em branco e quebrado.
Por esse motivo, alguns proprietários de websites optam por confiar apenas em fontes seguras na web. Estas vêm pré-instaladas na maioria dos sistemas, de modo que são exibidas corretamente em todos os dispositivos, exceto os mais obscuros. Elas também tendem a carregar muito mais rápido do que as fontes da web, que podem ser lentas de aparecer.
Se você só está preocupado em maximizar o desempenho e absolutamente garantir que seu site exiba as fontes corretamente, então as fontes seguras na web são para você.
Aqui está uma lista de fontes seguras na web que geralmente podem ser utilizadas.
- Arial
- Brush Script MT
- Comic Sans
- Courier New
- Garamond
- Georgia
- Helvetica
- Impact
- Lucida Console
- Palatino
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
Há também mais dezenas de fontes seguras na web, mas estas são as mais onipresentes entre os dispositivos.
De todos estes, Arial, Times New Roman, Helvetica e Courier New são os mais seguros. Apesar de serem considerados seguros na web, alguns dos outros não funcionam em certos sistemas operacionais.
A questão é que, a menos que você esteja administrando algo como um site governamental ou um simples site informativo, não vale a pena sacrificar sua marca, evitando a maioria das fontes. As fontes seguras na Web são legíveis, mas também são muito genéricas e muito utilizadas.
É muito melhor escolher um conjunto de fontes mais agradável e único para usar em seu website, especialmente porque há uma solução para a questão das fontes da web que não são carregadas: fontes fallback.
Uma nota sobre Font Stacks (pilhas de fontes)
As pilhas de fontes, também conhecidas como fontes fallback, são o único motivo para usar fontes ousadas e criativas da web.
Não importa o que você faça ou que precauções tome, sempre há alguém que não será capaz de carregar suas fontes. Talvez eles tenham o Javascript desativado, para que suas fontes hospedadas não sejam renderizadas corretamente, ou algo dê errado no código e impeça a exibição das fontes que você carregou. Ou talvez uma certa fonte não seja compatível com o dispositivo de alguém.
Graças às fontes fallback, é fácil carregar uma fonte segura da web se algo der errado. Isto funciona selecionando uma fonte que o usuário tenha instalado com base na família de fontes:
- Fontes serifadas são definidas por pequenos traços anexados às extremidades das linhas das letras. Estas fontes são consideradas elegantes e legíveis.
- Fontes Sans serif são projetadas de forma semelhante às fontes serifas, mas carecem de traços. Elas são mais simples e mais legíveis.
- Fontes monoespaciais são uniformemente espaçadas entre cada letra, dando-lhes uma aparência distinta.
- Fontes cursivas (ou Script) retratam cartas formais, escritas à mão. Elas não são muito legíveis e são melhores para cabeçalhos ou design gráfico.
- Fontes de fantasia (ou fontes decorativas) são altamente estilizadas, e como as fontes cursivas, não são apropriadas como texto corporal.
Lembre-se que as pilhas de fontes são de fato uma “pilha”; é inteiramente possível ter várias fontes em seqüência. Basta garantir que você sempre tenha uma fonte segura para a web no final da pilha, e você ainda tem a chance de fazer passar sua marca com uma fonte semelhante se a principal falhar.
Como adicionar fontes com HTML
Se você quiser adicionar uma fonte web ao seu site, você tem algumas opções.
Para usuários do WordPress, a maneira mais fácil de obter fontes em seu site é usando um plugin. As duas fontes mais populares são Easy Google Fonts e Use Any Font. A primeira simplifica o processo de adição das fontes do Google ao seu site, enquanto a UAF permite que você faça o upload das fontes diretamente em seu site.
Se você não estiver usando WordPress, ou não quiser confiar em um plugin, o processo exigirá alguns ajustes manuais.
Primeiro, você pode usar fontes hospedadas em outro lugar, como no Google Fonts. As instruções aqui dependem de qual serviço você escolher. Com o Google Fonts, você precisaria incorporar a fonte que deseja usar em sua <head> e depois chamá-la quando quiser usá-la.
Você também pode hospedar localmente fontes que você baixou da internet em seu website. Isto pode ser preferível porque você não precisará contar com serviços de terceiros.
Felizmente, isto é muito fácil de fazer desde que você tenha uma fonte web devidamente configurada. Basta carregar os arquivos em seu servidor, depois use a regra @font-face em sua folha de estilos para defini-la. Por exemplo:
@font-face {
font-family: FontName;
src: url(FontLocationOnServer);
}Então você pode usar a etiqueta da font-family para chamar sua fonte onde você quiser no documento HTML.
Fontes de Estilo com HTML e CSS
Uma vez que sua fonte é carregada com segurança em seu website, você pode agora estilizá-la com HTML e CSS. Mesmo que você tenha muito pouca habilidade de programação, estilizar uma fonte é bastante fácil. Você pode mudar a cor do texto, a cor do fundo, o tamanho, o estilo ou o peso.
Nota: Se você trabalhou com versões HTML mais antigas, você deve se lembrar da etiqueta <font> tag. Isto não é mais suportado e não deve ser usado. Em vez disso, você pode estilizar o texto com CSS ou um elemento do estilo HTML.
Primeiro, você pode mudar a fonte com códigos de cores. Você pode usar um nome de cor como “vermelho”, um código RGB, ou um valor HEX. Isto é definido com a propriedade de color assim:
p {
color: blue;
}
Ou em um elemento individual no estilo HTML:
<p style="color:blue;">Text.</p>
A cor de fundo é a mesma, mas usando o atributo cor de fundo.
p {
background-color: blue;
}A seguir, o tamanho da fonte. Isto pode ser em pixels, porcentagens ou ems (que são bons para projetar sites responsivos).
p {
font-size: 16px;
}Ou:
<p style="font-size:200%;">Text.</p>
E por último, o estilo e o peso da fonte, ou itálico e negrito. Para texto inclinado, use a etiqueta “itálic”.
.italic {
font-style: italic;
}
And for bold:
.bold {
font-weight: bold;
}
Você também pode usar tags HTML em seu lugar. Para itálico, você pode usar:
<em>para um texto que transmita ênfase, ou uso:
<i> para um texto que se destina a ser visualmente distinto.
E para ousadia, uso:
<b>or<strong>
Por exemplo:
<b>Bold Text</b>
ou
<strong>I'm of special importance.</strong>Onde obter as fontes HTML?
Quer você queira usar um host de fontes de terceiros ou baixá-las, você precisa saber onde estão os melhores lugares para encontrar fontes. Há centenas de distribuidores por aí, mas um bom punhado é conhecido por ser uma fonte confiável para a obtenção de fontes. Aqui estão algumas delas:
- O Google Fonts é um dos melhores lugares para obter fontes. Por quê? Você pode facilmente incorporá-las em seu site sem baixar nenhuma, sua seleção é vasta e bela e, o mais importante, é completamente gratuita. Os servidores do Google são sempre rápidos, portanto você pode confiar neles para entregar as fontes com o mínimo de atraso possível.
- Adobe Fonts oferece milhares de fontes com qualquer assinatura da Creative Cloud. Com outros serviços (que não dependem de fontes de código aberto como o Google Fonts, pelo menos), você muitas vezes precisa se preocupar com o licenciamento. Estas fontes são liberadas para uso em qualquer projeto, pessoal ou comercial.
- Fonts.com tem uma ampla seleção de fontes para uso tanto na área de trabalho quanto na web. Elas fornecem o código que você precisa para obtê-lo em seu site. A questão é que existem várias licenças diferentes, e isso pode ser um pouco confuso. O pagamento é baseado em uma taxa única ou em um modelo de pagamento à vista.
- A TypeNetwork oferece fontes de alta qualidade para projetos sérios com uma variedade de opções de licenciamento. Adquira fontes para desktop, web, aplicativos ou ePub. As fontes Web também vêm com uma opção extra: hospedadas ou auto-hospedadas.
- Antes de existir o Google Fonts, o Font Squirrel era o lugar para encontrar fontes gratuitas, licenciadas comercialmente, para uso em qualquer projeto. Ele tem uma grande seleção, mas infelizmente não há opção de hospedagem de fontes. Você precisará baixar as fontes e carregá-las manualmente em seu site. Nem todas as fontes são otimizadas para a web também, mas você pode experimentar o Gerador de Fontes Web.
As 10 principais fontes HTML
Há milhares de fontes da web por aí, mas por onde começar? Aqui estão dez fontes HTML simples que ficariam ótimas em qualquer website. Todas elas são seguras para a web, portanto devem funcionar em quase todos os dispositivos. Elas também fazem ótimas fontes de recurso.
Se você precisa de algo um pouco mais excitante, temos muitos artigos sobre fontes cursivas, fontes de caligrafia e fontes modernas.
1. Arial
Arial é a mais conhecida de todas as fontes. Não é a mais bela, mas é simples e útil em uma variedade de situações.
2. Times New Roman
A fonte Times New Roman também é uma fonte extremamente comum. É melhor se você estiver administrando um site mais formal. Esta fonte serif não é particularmente excitante, mas também não distrai.
3. Palatino
Palatino pode lhe parecer familiar, pois é freqüentemente usado na impressão de livros. Agora é um tipo de letra digital elegante, incluído por padrão em muitos dispositivos.
4. Verdana
A Verdana é conhecida por ser muito fácil de ler, e continua a ser ótima até mesmo em tamanhos grandes. Este sans serif é uma boa alternativa Arial.
5. Courier New
Reminiscente do texto antigo da máquina de escrever, Courier New é um ótimo design monospaced para sites que querem um visual antiquado, mas legível.
6. Calibri
Calibri é uma fonte simples e adorável sem serifa que vem de série com programas como Microsoft Office. No entanto, é uma fonte proprietária, portanto, muitas vezes só é suportada em sistemas operacionais Windows.
7. Georgia
Esta fonte serif arredondada é inspirada na fonte semelhante Garamond, segura para a web. Se você precisa de uma fonte formal não tão séria quanto a Times New Roman, é uma boa escolha.
8. Garamond
Muito semelhante ao Palatino, o Garamond é uma fonte clássica frequentemente utilizada para a impressão de livros. Apesar de ser atualizado para sistemas operacionais modernos, ele ainda parece bastante antiquado.
9. Didot
O espaçamento mínimo entre letras nesta fonte serif dá-lhe um aspecto e uma sensação únicos. Você pode encontrá-la na maioria dos dispositivos Apple.
10. Tahoma
Esta fonte limpa tem funcionado como a fonte padrão para os sistemas operacionais Windows mais antigos. Sua aparência mais ousada a faz sobressair o suficiente sem distrair.
Resumo
É importante escolher fontes da web que ficarão bem em seu website e serão legíveis e personalizarão sua marca. Há vários websites onde você pode instalar fontes gratuitas ou baixar fontes licenciadas por uma taxa, e nós oferecemos alguns exemplos de boas fontes para começar.
Você não precisa se ater a fontes chatas e seguras na web que você vê há décadas em toda a Internet. Graças às fontes fallback, você pode ir com a tipografia que quiser e definir uma fallback para ser usada se ela não carregar.
Se você estiver usando estas fontes HTML em seu site, em e-mails ou em seu logotipo, certifique-se de fazer muitos testes, para que seu site permaneça legível, e a tipografia se mescle bem com o resto do seu design.
Deixe um comentário