Formatos de fonte: TTF, OTF, WOFF2 e quando usar cada um

Você já instalou uma fonte e encontrou arquivos com terminações diferentes, como .ttf e .otf? Ou colocou uma fonte no site e ela simplesmente não apareceu? Isso acontece porque existem vários formatos de fonte, e cada um foi criado para um uso. Este guia explica a diferença entre eles em linguagem simples e mostra qual escolher em cada situação.

Por que existem tantos formatos de fonte?

Cada formato nasceu de uma necessidade da sua época. Primeiro vieram as fontes feitas para as impressoras profissionais, depois as criadas para os computadores pessoais e, por último, as pensadas para a internet, que precisam ser leves para o site carregar rápido. Hoje, o OpenType é o padrão mais usado em design, e o WOFF2 é o preferido para sites.

Resumo rápido

TrueType (TTF)

O TrueType foi criado pela Apple e depois licenciado para a Microsoft, e por isso funciona bem em computadores Mac e Windows. É um formato muito comum, e boa parte das fontes que vêm com o sistema é TTF. Para uso geral, como documentos e apresentações, funciona sem problemas.

OpenType (OTF)

O OpenType foi desenvolvido pela Adobe e pela Microsoft e é o formato mais completo. Um único arquivo funciona em Mac e em Windows, sem conversão, e ele comporta um número muito maior de caracteres, porque usa o padrão Unicode. Isso inclui letras acentuadas e vários idiomas. Ele também pode trazer recursos tipográficos avançados:

• Ligaduras: combinações de letras, como "fi", desenhadas como uma peça só.
• Alternativas de letras: formas diferentes para o mesmo caractere.
• Versaletes: letras maiúsculas no tamanho das minúsculas.
• Numerais antigos e frações: números com desenho de texto e frações prontas.

Nem toda fonte OpenType oferece todos esses recursos, então vale testar antes de contar com um deles. Um detalhe que confunde: uma fonte OpenType pode ter a terminação .otf ou .ttf, dependendo de como as letras foram desenhadas por dentro, e isso não muda o que você vê.

Type 1 (PostScript): o formato do passado

O Type 1 foi criado pela Adobe em 1984 para as impressoras PostScript e dominou o mercado gráfico por muitos anos. Hoje é um formato antigo: os navegadores e os sistemas de celular não o reconhecem, e os programas da Adobe lançados a partir de janeiro de 2023 deixaram de aceitá-lo para criar e editar conteúdo. Arquivos de impressão em PDF ou EPS que já têm essas fontes incorporadas continuam sendo impressos normalmente.

Se você encontrar um projeto antigo com fontes Type 1, o caminho mais seguro é trocar por uma versão OpenType da mesma fonte. Converter o arquivo por conta própria costuma dar um resultado pior e pode ser proibido pela licença da fonte.

Formatos para sites: WOFF e WOFF2

Fontes de computador podem ser pesadas para a internet. Por isso existem o WOFF e o WOFF2, versões compactadas pensadas para sites. O WOFF2 costuma compactar mais, então a página carrega mais rápido, e os navegadores atuais aceitam os dois. Se você usa um serviço como o Google Fonts, esses arquivos já são entregues sem você fazer nada. Se for colocar uma fonte própria no site, quem desenvolve indica os arquivos no CSS, com a regra @font-face, e o WOFF2 deve ser o primeiro da lista.

Fontes variáveis

Uma fonte variável reúne vários estilos, como diferentes pesos e larguras, em um único arquivo, e você ajusta o valor que quiser entre um extremo e outro. É prático para sites, porque um arquivo substitui vários, e também é aceita em programas de design recentes.

Como aproveitar os recursos do OpenType no design

Nos programas da Adobe, como o Illustrator e o InDesign, há dois painéis que ajudam. Os nomes e os caminhos podem variar conforme a versão do programa.

• Painel de Glifos (Glyphs): mostra todos os caracteres da fonte, inclusive símbolos e alternativas. É o lugar para achar, por exemplo, © e ®, ou letras com desenho especial.
• Painel OpenType: liga e desliga recursos, como ligaduras, frações e alternativas estilísticas, no texto selecionado.

Se a fonte tiver alternativas para um caractere, alguns programas mostram um pequeno menu ao selecionar a letra, para você escolher a versão que preferir.

Qual formato usar em cada situação?

Para os formatos de imagem e de documentos, leia formatos de arquivo: quando usar PNG, JPG, WebP, SVG e PDF.

Antes de usar uma fonte, confira a licença

Ter a fonte instalada no computador não significa que você pode usá-la em qualquer lugar. A licença define se ela vale para uso em computador, em site ou em aplicativo, e se pode ser usada em projetos comerciais, como o logotipo de um cliente. Confira a licença antes de usar e guarde o comprovante do projeto. Muitas fontes do Google Fonts têm licença aberta, mas vale conferir a licença de cada uma. Para combinar duas fontes com critério, veja tipografia: como escolher fontes que combinam entre si.

Erros comuns

• Escolher uma fonte sem testar os acentos (ã, é, ç) e descobrir depois que faltam letras.
• Instalar a mesma fonte em versões diferentes, o que gera conflito nos programas.
• Enviar o PDF para impressão sem incorporar as fontes.
• Colocar no site a fonte do computador sem ter a licença para a web.
• Converter fontes em sites desconhecidos, o que pode violar a licença.

Perguntas frequentes

Quer ajuda para escolher e aplicar a tipografia da sua marca? Me chame no WhatsApp e conte sobre o seu projeto, ou veja exemplos no meu portfólio no Behance.