Fontes

O arquivo digital que faz um tipo (typeface) virar utilizável e renderizar cada letra na tela.

Hard

O que é

Fonte é o arquivo que diz ao navegador, app ou sistema como desenhar cada letra, número e símbolo. As pessoas costumam usar fonte e tipo como sinônimos, mas vale guardar que não são a mesma coisa: typeface é a família inteira, como Inter ou Roboto, enquanto fonte é uma instância dela, como Roboto Bold ou Roboto Italic.

O trabalho mais importante de uma fonte é a legibilidade. Se a pessoa precisa se esforçar pra ler, a experiência já quebra antes de qualquer outra decisão de design. Fontes feitas pra tela, como Inter e San Francisco, otimizam justamente isso: x-height, espaçamento e comportamento em tamanho pequeno.

A variable font já virou padrão: um único arquivo que carrega toda a faixa de pesos e larguras. Ela pesa menos no carregamento, dá controle fino por breakpoint e ainda mantém consistência entre site, app e campanha.

Em uma frase

Vamos trocar os três arquivos por uma variable font do Inter e ajustar o peso por breakpoint.

A pergunta que ele responde

Qual a diferença entre fonte e tipo, e o que carrego de fato no produto?

Quando usar

Ajuda quando você escolhe e configura a tipografia do produto, pensando ao mesmo tempo em legibilidade, marca e acessibilidade.

Como não usar

O cuidado é não escolher fonte só pela estética, sem conferir contraste, cobertura de caracteres e legibilidade em tamanho pequeno.

Na prática

Pense num time que, em vez de carregar regular, bold e italic em arquivos separados, usa uma variable font do Inter e ajusta o peso por breakpoint, com um arquivo só.

Não confunda com

Vale separar fonte de typeface. A typeface é a família de design como um todo, a ideia visual por trás das letras. A fonte é o arquivo concreto de uma instância específica dessa família. Pense na typeface como o projeto e na fonte como uma das peças produzidas a partir dele.

D

Em inglês

Fonts

Pronúncia

n/a

Também chamado de

fontes, arquivo de fonte, variable font

Origem

n/a

Fonte

Saiba mais

Google Fonts, knowledge base sobre variable fonts