Tipografia na identidade visual: a fonte do manual e a que o site mostra

Quase todo manual de marca tem uma página de tipografia. Ela costuma trazer o nome de uma ou duas famílias, um alfabeto de amostra em vários pesos e, às vezes, uma frase sobre a personalidade que aquelas letras transmitem. No PDF, fica impecável.

O problema aparece fora do PDF. O site carrega a fonte por um serviço externo, ou não carrega; o e-mail marketing chega na caixa do cliente em Arial; a proposta comercial sai do Word com a fonte que estava instalada no computador de quem escreveu. Este artigo trata a tipografia como sistema que precisa funcionar em todo meio: quantas famílias e pesos definir, qual a fonte de reserva, como montar a hierarquia por uso e o que escrever no manual para que a letra da marca não dependa da sorte.

O que é tipografia na identidade visual?

Tipografia, no sentido amplo, é o desenho e o arranjo das letras: qual fonte, em que tamanho, com qual espaço entre linhas e entre caracteres. Na identidade visual, ela vira um ativo de reconhecimento ao lado do logo, da paleta de cores e dos elementos gráficos. É o que permite reconhecer a marca num anúncio sem logo à vista, só pelo jeito do título.

Vale separar dois termos que se misturam. Fonte (ou família tipográfica) é o arquivo e o desenho: Poppins, Garamond, Helvetica. Tipografia da marca é a decisão sobre como essas fontes são usadas: quais pesos, para qual função, com qual combinação e em qual meio. Duas empresas podem usar a mesma fonte e ter tipografias completamente diferentes.

É por isso que a pergunta “qual é a fonte da marca?” tem uma resposta curta e uma resposta útil. A curta é um nome. A útil é uma regra de uso que qualquer pessoa — designer, desenvolvedor, estagiário de marketing — consegue aplicar sem consultar quem criou a identidade.

Qual a diferença entre a fonte do logo e a tipografia da marca?

O logotipo é desenhado uma vez e fechado em vetor. Muitas vezes nem é uma fonte: é uma palavra redesenhada letra a letra, ou uma fonte comercial ajustada à mão. Ele não precisa carregar em navegador nenhum, porque vai como imagem. Já a tipografia da marca precisa funcionar em texto vivo, digitado, editável e lido em telas de todo tamanho.

Comparativo elaborado pela Alliance Comunicação.

A questão de direito de uso — se a licença da fonte permite usá-la num logo registrado — é outra conversa, tratada no artigo sobre o que a licença de fonte permite no logo. Aqui a pergunta é de sistema: depois que a marca está pronta, que letra o cliente vê em cada meio?

Por que a fonte do manual nem sempre é a que aparece na tela?

Porque na web a fonte é um arquivo que viaja junto com a página — e viagem pode atrasar, falhar ou ser bloqueada. O uso de fontes web já é a regra, não a exceção:

E a maior parte desse tráfego passa por um único fornecedor. O mesmo levantamento mostra que a concentração é alta, ainda que em leve queda:

O dado diz duas coisas para quem cuida de marca. Primeiro, que a fonte do site quase sempre é uma fonte web — um arquivo próprio para navegador, que pode ou não ser a mesma família do manual. Segundo, que a escolha tipográfica de muitas marcas acaba limitada, na prática, ao catálogo de um serviço gratuito, porque a fonte comercial do manual não tem licença web ou ninguém comprou essa licença.

O mesmo capítulo registra uma tendência crescente de hospedar as fontes no próprio domínio, em vez de depender do serviço externo. Para a marca, isso tem um efeito direto: quem hospeda controla qual arquivo vai, quais pesos vão e o que acontece quando algo falha. Esse controle só vale se o manual disser o que fazer com ele.

Quais são as três camadas da tipografia de uma marca?

A forma mais simples de tirar a tipografia do PDF e levá-la para o mundo é pensar em camadas, da mais rica para a mais garantida. Cada uma tem um nome no manual e um meio onde aparece:

1. A fonte da marca

É a família escolhida no projeto de identidade, licenciada e instalada nas máquinas de quem cria: agência, designer interno, produtora. Aparece no impresso, no PDF, na apresentação exportada e no vídeo. Aqui o controle é total, porque o arquivo final já sai com a letra embutida.

2. A fonte web

É a versão que o site carrega. No melhor caso, é a mesma família em formato próprio para navegador (WOFF2, o mais usado hoje). Quando a fonte da marca não tem licença web, o manual precisa nomear a equivalente — uma família de proporções e personalidade parecidas, escolhida pelo designer, e não pelo desenvolvedor na véspera do lançamento.

3. A fonte do sistema de reserva

É a fonte que já está instalada no aparelho de quem lê: Arial, Helvetica, a fonte de interface do sistema operacional. Ela aparece no e-mail, no documento editável e em qualquer situação em que a fonte web não chega. Não é derrota escolher a reserva; derrota é deixar que ela seja escolhida por acaso, normalmente uma serifada padrão que contradiz a marca inteira.

Elaborado pela Alliance Comunicação. Suporte de fonte no e-mail conforme Can I email (teste de dezembro de 2023).

O que acontece no site quando a fonte da marca não carrega?

Depende de uma linha de CSS que quase ninguém do marketing conhece: font-display. Ela diz ao navegador o que fazer enquanto o arquivo da fonte não chega. A documentação da Mozilla descreve três períodos — bloqueio, troca e falha. No período de bloqueio, o texto fica invisível; no de troca, aparece numa fonte de reserva e muda quando a fonte da marca chega; no de falha, o navegador desiste e fica com a reserva.

O valor swap dá um período de bloqueio “extremamente pequeno” e um período de troca infinito, segundo a referência do MDN para font-display: o texto aparece logo, na reserva, e muda quando puder. O valor block dá um bloqueio curto, em que o texto existe mas não se vê. Os sites estão migrando para a primeira opção:

O próprio relatório observa que as dez fontes mais usadas com block são fontes de ícones — caso em que mostrar uma letra de reserva não faz sentido. Para texto, o capítulo recomenda swap, fallback ou optional, e aponta o custo do swap: um possível salto de layout quando a fonte da marca chega e substitui a reserva.

É aqui que a camada 3 deixa de ser detalhe técnico. Se a fonte de reserva tem largura muito diferente da fonte da marca, o parágrafo muda de tamanho na troca, o botão pula e o título quebra em outra linha. Existe um ajuste para isso: o descritor size-adjust define um multiplicador para os contornos e as métricas da fonte, e o MDN registra que ele ajuda a aproximar a fonte de reserva das medidas da fonte web principal. Quem decide qual reserva é visualmente mais próxima é o designer — por isso a escolha pertence ao manual.

Uma informação útil para essa escolha: segundo o Web Almanac, a família genérica sans-serif aparece em cerca de 89% das páginas, e system-ui — a fonte de interface do próprio sistema operacional — dobrou desde 2022, para algo em torno de 7%. A reserva sem serifa é, portanto, o padrão da web; a marca só precisa dizer qual delas fica mais perto da sua letra.

E no e-mail, qual fonte o cliente vê?

Na maior parte dos casos, a da camada 3. O site Can I email, que testa o suporte de recursos de CSS nos programas de e-mail, registra que o Gmail não suporta @font-face, a regra que carrega uma fonte externa — as exceções são Roboto e Google Sans, porque já vêm embutidas nos estilos do próprio webmail. No Outlook para Windows, o comportamento é classificado como defeituoso: o texto que usa uma fonte declarada por @font-face ignora a pilha de reserva e cai para Times New Roman.

A estimativa de suporte do mesmo site, no teste de dezembro de 2023, era de 21,95% com suporte, 2,44% parcial e 75,61% sem suporte. Traduzindo para o dia a dia: a newsletter desenhada com a fonte da marca chega, para boa parte da base, numa letra que ninguém da equipe escolheu — e, no pior caso, numa serifada de documento antigo.

Há três saídas, e o manual deve dizer qual vale para cada caso:

• Título em imagem, com a fonte da marca desenhada, e texto corrido em fonte do sistema. Funciona, mas o título vira imagem: precisa de texto alternativo e some quando o programa bloqueia imagens.
• Fonte do sistema escolhida de propósito para o corpo inteiro, compensando a falta de personalidade com peso, tamanho, cor e espaço — os elementos que o e-mail respeita.
• Reserva declarada também para o Outlook, com as propriedades próprias dele que o Can I email indica (mso-font-alt e mso-generic-font-family), para que a queda vá para a fonte definida pela marca, e não para Times New Roman. É trabalho do desenvolvedor de e-mail, mas a fonte de destino é decisão do manual.

Quantas fontes uma identidade visual deve ter?

Não existe número oficial, e quem prometer um está dando opinião. O que existe é custo: cada família e cada peso a mais é mais um arquivo para licenciar, instalar, carregar no site e manter coerente. Na prática da Alliance, a maioria das marcas resolve bem com uma família principal e, no máximo, uma de apoio — por exemplo, uma geométrica para títulos e uma de leitura para texto longo, ou uma única família com pesos bem escolhidos.

Os pesos pesam mais que as famílias. Uma família usada em seis pesos (fino, leve, regular, médio, seminegrito, negrito) pode exigir seis arquivos no site. O manual deve listar quais pesos existem na marca — normalmente três ou quatro — e proibir o resto. Peso que não está no manual não deveria estar no site.

As fontes variáveis mudaram essa conta. Um único arquivo contém toda a faixa de pesos (e às vezes de largura), e o navegador desenha o peso exato pedido:

O relatório faz uma ressalva honesta: boa parte desse uso não é escolha consciente, e sim efeito de serviços que passaram a entregar a versão variável sem o site pedir. Para a marca, a conclusão prática é outra: se a família escolhida tem versão variável, o manual pode definir pesos intermediários sem multiplicar arquivos. Mas a lista de pesos permitidos continua necessária — a fonte variável aumenta as opções, e opção demais é o que desmancha a consistência.

Como definir a hierarquia tipográfica por uso?

A maioria dos manuais organiza a tipografia por estética: “use a fonte A para transmitir modernidade e a B para transmitir tradição”. Isso ajuda a escolher, mas não ajuda a aplicar. Quem monta uma tabela de preços ou o botão de um formulário precisa de uma regra por tarefa, não por sensação.

1. Títulos

É onde a personalidade da fonte aparece mais, e onde a fonte da marca faz mais diferença. Defina um ou dois pesos fortes, a entrelinha (mais justa que no texto) e um tamanho mínimo abaixo do qual o título passa a usar outro estilo. Título é a parte que mais sofre quando cai para a reserva, então teste a quebra de linha nas duas fontes.

2. Texto corrido

Aqui a regra é legibilidade, não expressão. Regular e negrito costumam bastar; itálico entra se a família tiver um bom. Defina entrelinha folgada e largura de linha confortável. Contraste entre texto e fundo é tema à parte, tratado no artigo sobre contraste e acessibilidade na identidade visual.

3. Dados e números

Preço, tabela, gráfico, painel. Muitas fontes de títulos têm algarismos de larguras diferentes, o que desalinha colunas de valores. Verifique se a família tem algarismos tabulares (de mesma largura) e determine quando usá-los. Se não tiver, o manual indica a fonte de apoio para números.

4. Interface

Botão, menu, campo de formulário, etiqueta. São textos curtos, lidos rapidamente, muitas vezes em tamanho pequeno. Peso médio ou seminegrito costuma funcionar melhor que o regular. E é o uso que mais aparece na fonte de reserva, porque é o primeiro texto que o site desenha — teste o botão principal com a fonte web desligada.

O que colocar na página de tipografia do manual de identidade visual?

A página de tipografia que funciona fora do PDF tem mais do que o alfabeto de amostra. Ela responde, por escrito, às perguntas que o desenvolvedor, o redator e o fornecedor vão fazer:

Elaborado pela Alliance Comunicação.

Essa página só funciona se alguém a consultar. Um manual que só o designer abre não protege a marca; o artigo sobre quem de fato obedece ao manual de identidade visual trata de como fazer o documento chegar a quem aplica. A tipografia segue a mesma lógica da cor, que também muda de meio para meio — veja como a paleta de cores se comporta em cada meio.

Quais são os erros mais comuns com a tipografia da marca?

• Manual só com o nome da fonte. Sem pesos, sem reserva, sem hierarquia, cada pessoa completa o resto do seu jeito.
• Fonte comercial sem licença web. O site é lançado com uma substituta escolhida às pressas, e ela vira a fonte da marca sem que ninguém tenha decidido.
• Pesos demais no site. O desenvolvedor carrega a família inteira porque o manual não disse quais pesos existem.
• Reserva não definida. Quando a fonte falha, o navegador ou o programa de e-mail escolhe — e às vezes escolhe Times New Roman.
• Hierarquia por gosto. “Títulos em fonte moderna” não diz o tamanho, o peso nem o que fazer com números.
• Testar só no computador do designer. Onde a fonte está instalada, tudo funciona. O teste que importa é na máquina e no celular de quem não tem a fonte.

Como saber se a tipografia da sua marca já resiste fora do PDF?

1. Liste as famílias e os pesos que o site realmente carrega e compare com o manual. Diferença é sinal de decisão tomada fora do projeto de marca.
2. Confira se a fonte da marca tem licença web. Se não tiver, registre no manual a fonte equivalente aprovada.
3. Defina a pilha de reserva com uma fonte do sistema próxima da sua e teste título, texto e botão nela.
4. Escreva a hierarquia por uso: títulos, texto corrido, dados e interface.
5. Crie um modelo de e-mail e um modelo de documento com a fonte do sistema escolhida, para que ninguém precise improvisar.

Se a sua marca ainda não tem esse sistema — ou tem um manual bonito que ninguém aplica —, é trabalho de projeto de identidade visual, não de ajuste pontual no site. E se quiser saber onde a marca está perdendo coerência antes de decidir por onde começar, o diagnóstico de marketing gratuito mapeia presença digital, conteúdo e marca, e devolve as prioridades na ordem certa.

A tipografia é o elemento da identidade que mais aparece e o que menos se controla. Cada e-mail, cada página e cada proposta usa letras. O manual que nomeia as três camadas e define a hierarquia por uso não aumenta o trabalho de ninguém: tira a decisão das mãos do acaso e devolve para a marca.