Raleway - Fontes Gratuitas

Fontes gratuitas – pare de usar Calibri e Arial

Calibri, Arial, Times New Roman… Há 25 anos, quando o Windows 3.1 era novidade, e todas essas fontes gratuitas inundaram textos e documentos mundo afora, isso representava variedade.

Vínhamos de uma era na qual máquinas de escrever, havia quase 100 anos, digitavam textos sempre no mesmo formato. Computadores imprimiam em uma fonte única também, e mesmo nos ecrãs, não havia qualquer variedade. O mundo era “Courier” e mesmo hoje ainda temos a “Courier New“.

Nesse cenário, a repentina possibilidade de usar 10 ou 12 fontes diferentes parecia maravilhoso. Além da já conhecida Courier, computadores agora ganhavam uma nova lista de fontes de texto que poderiam ser usadas em qualquer ocasião: Arial, Times New Roman, Georgia, Verdana, Tahoma, Impact e tantas mais. Textos chatos agora eram… um pouco menos chatos.

Fontes gratuitas – os primeiros websites

Os primeiros sites a ganhar a internet, ainda antes dos anos 2000, tinham de usar basicamente as mesmas fontes do Windows. Navegadores da época, como o Explorer e o Netscape, não possuíam bom suporte para recursos gráficos ricos. Além disso, o CSS, o HTML e o próprio web design em si engatinhavam.

Empresas que quisessem utilizar fontes diferentes daquelas do Windows em seus sites precisavam fazê-lo em formato de imagem. O que deixava as coisas mais lentas e até mesmo um pouco estranhas e fora de proporção. Felizmente, essa época já passou… mas há quem siga a usar fontes de 20 ou mesmo 30 anos atrás.


Fontes gratuitas – como utilizar?

Para além das fontes-padrão, é necessário que um site carregue as fontes que pretende utilizar. Para fazê-lo, é necessário habilitar a fonte para uso, para que a mesma seja acionada através de instruções CSS contidas nas páginas. Há quatro maneiras básicas de fazê-lo, embora não iremos detalhá-las neste artigo (o faremos em outra ocasião, de cunho mais técnico):

  1. Gerando uma requisição a partir do próprio HTML, na seção <head> da página.
  2. Utilizando a instrução @import, a partir de uma folha de estilo CSS.
  3. Carregando a fonte por meio de propriedades @font-face, também no CSS.
  4. Carregando a fonte por meio de Javascript ou Jquery.

Há mais um par de maneiras de implementar novas fontes, porém não são muito utilizadas. De um modo geral, em um site WordPress ou desenvolvido em outro tipo de CMS, o modo mais simples de diversificar fontes é implementá-las a partir do Google Fonts – uma imensa biblioteca de fontes do Google de livre utilização. As fontes podem ser baixadas ou apenas “renderizadas” no website, como webfonts. Atualmente são mais de 800 as fontes disponibilizadas.

Há outros bancos de fontes gratuitas existentes, os quais veremos a seguir.


Fontes gratuitas – Google Fonts

São 848 fontes e novas delas são sempre adicionadas. Quando seleciona-se uma das fontes, o programa do Google dá inclusive instruções de como deverá incluí-las em seu website, via HTML ou CSS. A simplicidade do Google Fonts tornou a ferramenta quase um padrão entre novos temas e templates para WordPress, Joomla, Magento e outras plataformas. Para quem é adepto de fontes quadradas e fora de moda como Calibri e Arial, eis algumas sugestões encontradas no Google Fonts para substituí-las:


Fontes Gratuitas – Adobe Edge Webfonts

Também gratuita, essa biblioteca de fontes gratuitas tem a assinatura da Adobe. São mais de 500 atualmente e elas também podem ser renderizadas em seu website. Entretanto, para tal, é necessário uma pequena requisição Javascript. Mas não se desespere, basta aceder ao rol de fontes da Adobe e clicar numa delas. Na parte de baixo do ecrã verá instruções claras de como deve implementar.

Fontes Gratuitas - Adobe Edge Fonts


Fontes Gratuitas – Fonts for Web

Outra biblioteca de fontes gratuitas para uso em sites. Esta, em particular, possui um plugin WordPress próprio, o que facilita ainda mais o uso das fontes. Entretanto, para aceder às fontes é preciso fazer um registo no site, embora esse seja gratuito. Preste também atenção – embora a ampla maioria das fontes desse banco sejam de livre uso, há aquelas que não poderão ser utilizadas para fins comerciais.


Fontes Gratuitas – Fontello

Não se trata bem de webfonts, mas este último site merece uma menção por um aspeto peculiar. Ele permite que sejam criadas webfonts para uso em sites com conjunto de ícones. Exato, basta escolher os ícones que formarão a fonte desejada e transferir o resultado. Após isso, basta implementar em seu website por meio de Javascript, plugins ou CSS @font-face (em outra oportunidade ensinaremos tudo isso).

Fontes Gratuitas - Fontello

Minion Pro e Open Sans

Combinando fontes em apresentações PPT

Combinar fontes de modo inteligente é um dos principais aspectos de design que diferenciam uma péssima apresentação de uma peça de primeira linha. Uma boa apresentação, assim como um bom website, possui combinações de fontes, estilos e tamanhos bem definidas. Em outras palavras: é preciso variar a forma com que os textos aparecem, cortando a monotonia e, às vezes, criando destaque sobre algum trecho ou passagem.

No Powerpoint, o tamanho das fontes também é um aspecto importante. Veremos alguns motivos do porquê os tamanhos influenciam até mesmo no modo com que o público interpreta os slides. De um modo geral, as mesmas regras de bom senso e aplicação de fontes usadas num PPT podem ser aplicadas em seu website. O problema é que, tanto em um quanto em outro, as pessoas parecem não dar atenção mesmo às mais básicas noções e ao bom senso.

Por isso mesmo, resolvemos postar algumas dicas para combinar fontes. Lembre-se de que elas não são regras absolutas, e podem ser dobradas. Entretanto, elas ajudarão você a escolher e compor melhor, ou mesmo a opinar em trabalhos desenvolvidos por profissionais (quem sabe por nós correto?).

Combinando fontes – o básico

Para começar, basta dizer que há duas dicas bastante básicas para combinar fontes: no caso de duas fontes distintas, escolher um com serifa e outra sem (calma, vamos explicar se você não sabe); e também usar versões e estilos diferentes de uma mesma fonte.

No primeiro caso, vamos lembrar o que é uma fonte serifada? As serifas são traços e segmentos que ocorrem nos finais das letras e caracteres, criando prolongamentos. É a “perninha” do A, ou os traços na base do M. Mas a imagem abaixo mostra isso melhor. Aqui, você nota as diferenças entre uma fonte SERIF e uma SANS SERIF.

Diferença SERIF e SANS SERIF

 

Pois bem, é bom criar combinações que incluam uma fonte serifada e uma sem serifa. Isso cria contraste dentro de uma apresentação ou website e permite que se dê destaque a algo em particular, ou que sejam diferenciadas informações distintas. As fontes não têm necessariamente de ser “parecidas”, mas é claro que algumas combinações se sustentam melhor do que outras.

Outra boa dica é a de não confundir o leitor com o tipo de sentimento e emoção que você deseja passar. Pense assim: há opções mais sóbrias, outras mais divertidas. Algumas sugerem flexibilidade, outras uma texto mais tradicional. Evite, ao menos de início, misturar o tipo de interpretação. Uma chamada em fonte mais sisuda dificilmente vai bem com um texto escrito numa fonte mais divertida.

Finalmente, é preciso padronizar tamanhos. Se os títulos são todos em 28px, mantenha-os nesse tamanho. Se o texto normal possui 18px, não mude essas dimensões conforme os slides avançam. Mentalmente, ao lermos qualquer coisa, nosso cérebro utiliza os tamanhos para determinar o tipo de informação. Se o texto diminui, o público pode tomar um texto importante como uma legenda, ou um título como um mero bullet point.

Manter dimensões dentro do padrão também ajudam você a criar um senso de hierarquia. O usuário não precisa ser informado a todo momento de que X é um subitem de Y ou vice-versa. O próprio tamanho da fonte, sozinho, dará essa informação ao público – e com isso você não precisa poluir seus sites e apresentações dando explicações demais.

Combinando fontes – selecionando classes

Apesar de haver manuais extensos de tipografia em português, quando selecionamos fontes de texto para design ou web design, é melhor mantermos as coisas em inglês. Na internet, você encontrará quatro tipos básicos de fonte: SERIF, SANS SERIF, SCRIPT e DECORATIVE. Cada um desses tipos possui subclassificações que podem ser úteis:

SerifSans SerifScriptDisplay
Old StyleGrotesqueFormalGrunge
TransitionalSquareCasualPsychedelic
NeoclassicalHumanisticHandwrittingGraffiti
Slab SerifGeometricBlackletterOthers
GlyphicNeo-grotesqueBrush Script

Há mais subtipos, dependendo de onde buscamos cada fonte. De qualquer modo, a tabela engloba e separa bem os grupos principais. Como regra básica, tentamos usar grupos diferentes em um par de combinações. Já os subtipos sugerem certos valores e interpretações extras. Por exemplo, uma fonte SERIF de um tipo “Old Style” irá transmitir um ar mais clássico, até mesmo antigo e rebuscado. Já uma “Slab Serif” possui um ar muito mais moderno, como veremos em alguns exemplos de pares de combinações logo adiante.

Fontes mono-espaçadas

Pois bem, há mais uma classificação de fonte que você encontrará com facilidade: as “Monospaced”. Essas fontes incluem vários estilos e tipos, com uma única característica em comum: cada caractere ocupa um mesmo espaço horizontalmente. Para entender isso, basta lembrar de uma máquina de escrever (onde as fontes eram mono-espaçadas). Fosse o caractere um “I” ou um “M”, ele tinha de ocupar um mesmo espaço no papel, pois as alavancas e hastes que batiam no papel e carimbavam as letras tinham o mesmo tamanho e largura.

Com isso, essas fontes possuem espaços desproporcionais – as letras “I” ou “L” minúsculo ficam muito mais distante dos caracteres ao lado, se comparadas a letras como “M” ou “G”. É possível chegar a ótimas combinações com essas fontes, mas até você produzir boas montagens, tente evitá-las, pois seus espaços desproporcionais causam desconforto ao leitor, especialmente em slides.

7 regras rápidas para combinar fontes

Poderíamos escrever laudas e mais laudas sobre tipografia e combinação, mas vamos manter as coisas objetivas para si. Separamos aqui 7 regras que podem ajudar você a escolher seus próprios sets de fontes, além das combinações que vamos oferecer em seguida:

  1. Considere o contexto. Tente evitar fontes alegres e com aparência infantil se o tema é mais sério e corporativo. Do mesmo modo, evite fontes retilíneas ou clássicas demais se o tema é mais divertido e ligado ao entretenimento.
  2. Considere a leitura. Fontes lindas, porém difíceis de ler, não são boas escolhas para apresentações e websites. Seu público precisa compreender rapidamente o que está escrito, e você não deve dificultar esse processo.
  3. Misture fontes de grupos diferentes. Fontes SERIF com fontes SANS SERIF, ou mesmo fontes SCRIPT com fontes SANS SERIF, ou fontes DISPLAY com outros grupos.
  4. Preocupe-se com o contraste. Uma fonte deve possuir uma boa diferenciação em relação à outra. Se você quer optar por fontes parecidas, é melhor usar estilos e pesos diferentes de uma mesma fonte: como parte do texto em negrito e parte em itálico “Thin”.
  5. Use “famílias” de fontes. Algumas fontes possuem versões SERIF, SLAB e SANS SERIF ou mesmo SCRIPT. Nesse caso, designers dessas fontes já as fizeram de forma complementar, e usá-las em conjunto é uma resposta fácil para seus problemas.
  6. Evite muitas fontes. Duas fontes bem escolhidas funcionam bem. Ao adicionar uma terceira ou uma quarta, as possibilidades de criar combinações ruins aumentam. Tente restringir o número de fontes e estilos usados e enriquecer seu conteúdo mais com base nas imagens.
  7. Use fontes “amigáveis”. Com isso queremos dizer fontes que estão presentes no Windows ou podem ser facilmente encontradas em qualquer dispositivo. Usar fontes exóticas demais pode gerar problemas de visualização ou até mesmo de impressão. De qualquer modo, softwares como o Powerpoint também possuem a opção de salvamento com a fonte utilizada – isso evita que seus clientes tenham as fontes substituídas ao ver uma apresentação, caso não a tenham em seus computadores.

Bem, claro que mesmo depois de ler este artigo, você provavelmente quer facilitar sua vida. Para ajudar, separamos algumas combinações de fontes prontas para você, que seguem nas imagens abaixo. Todas as fontes usadas são gratuitas para download ou podem ser encontradas em sua própria máquina. Clique nas gravuras para ver os nomes de cada fonte utilizada.

Todas as fontes usadas nos exemplos estão presentes no Google Fonts e podem ser baixadas gratuitamente, inclusive com suas “famílias” e todos os estilos disponíveis. Para baixá-las, basta clicar aqui.