Resumindo
- Um sistema tipográfico é um pequeno conjunto de funções com nome, como display, título, texto e rótulo, cada uma com fonte, peso, tamanho, entrelinha e uso de maiúsculas fixos.
- Os tamanhos de um sistema tipográfico vêm de uma única escala, um tamanho base multiplicado por uma razão constante, para que cada degrau se relacione com os outros.
- A maioria das marcas precisa de apenas uma ou duas famílias tipográficas; o sistema cria variedade com funções, pesos e tamanhos.
- Os design tokens guardam cada função como um valor com nome, para que sites, apps e arquivos de design usem as mesmas decisões tipográficas.
- Posts, slides e sites precisam de tamanhos diferentes para as mesmas funções, então um bom sistema lista cada função por canal.
Nesta página
Um sistema tipográfico é o conjunto de regras que decide como a tipografia se comporta numa marca: algumas funções com nome (display, título, texto, rótulo), cada uma com uma fonte, um peso, um tamanho, uma entrelinha e um uso de maiúsculas, todas dimensionadas a partir de uma única escala e guardadas como tokens para que todo designer e desenvolvedor use os mesmos valores. As fontes dão voz à marca. O sistema torna essa voz consistente, para que um título num cartaz, num site e num story pareçam vir do mesmo lugar. Veja como montar um.
As funções de um sistema tipográfico
Comece pelas tarefas, não pelas fontes. Todo texto que uma marca publica cumpre uma de poucas tarefas, e cada tarefa vira uma função. A maioria das marcas precisa de cinco a sete.
Configuração típica
Configuração típica
Tarefa
Configuração típica
Configuração típica
Tarefa
Configuração típica
Configuração típica
Configuração típica
Três funções num post: um rótulo de sobretítulo, um título e uma linha de texto. Cada uma é distinta na hora, então o olhar sabe por onde começar.
Quantas fontes um sistema tipográfico de marca precisa
Normalmente uma ou duas. Uma família em três pesos consegue sustentar um sistema inteiro. Duas fontes, uma para títulos e outra para texto, acrescentam personalidade. Uma terceira só se justifica para uma tarefa específica, como código ou dados. A variedade vem das funções, dos tamanhos e dos pesos, não de mais fontes. Combinações do Google Fonts e fontes de marca ajudam na escolha.
Evite
- Uma fonte nova para cada campanha
- Tamanhos escolhidos no olho em cada design
- Nove pesos carregados, três usados
- Regras de maiúsculas diferentes em cada equipe
- Um guia de estilo que lista fontes, mas não funções
Faça
- Uma ou duas famílias para tudo
- Todos os tamanhos de uma única escala
- Só os pesos de que as funções precisam
- Uma regra escrita de maiúsculas para títulos e botões
- Funções com fonte, peso, tamanho, entrelinha e maiúsculas
Monte uma escala tipográfica
Uma escala tipográfica escolhe um tamanho base e o multiplica pela mesma razão a cada degrau. Os degraus se relacionam, então quaisquer dois tamanhos do sistema parecem intencionais juntos. Uma razão de 1,25 combina com interfaces e páginas densas; 1,333 ou 1,5 dá mais drama a trabalhos editoriais e de marketing. Escala tipográfica explica as razões em mais detalhes.
Função
Função
Função
Função
Função
Função
Função
Tamanho com 1,25 a partir de 16 px
Função
Guarde o sistema como tokens
Um sistema que só existe num PDF se perde. Tokens são valores com nome que tanto o código quanto os arquivos de design leem, então mudar um valor atualiza tudo. Dê nome aos tokens pela função, nunca pelo tamanho: --type-heading sobrevive a um redesign, --type-31 não. Design tokens cobre a ideia mais ampla.
:root {
--font-heading: "Fraunces", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
--type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
--type-heading: 600 1.9375rem / 1.15 var(--font-heading);
--type-subheading: 500 1.25rem / 1.4 var(--font-body);
--type-body: 400 1rem / 1.5 var(--font-body);
--type-label: 600 0.8125rem / 1.2 var(--font-body);
}
h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }Uma função, tamanhos diferentes por canal
Um título num site e um título num post do Instagram cumprem a mesma tarefa em tamanhos muito diferentes, porque um é lido à distância de um braço numa tela grande e o outro encolhe num feed de celular. Mantenha as funções idênticas e dê a cada canal os próprios tamanhos.
Post 1080×1350
Slides 1920×1080
Post 1080×1350
Slides 1920×1080
Post 1080×1350
Slides 1920×1080
Site
Post 1080×1350
Slides 1920×1080
Como montar o seu sistema tipográfico
- 1
Reúna o que você já publica
Faça print do seu site, posts, e-mails e slides. Circule cada estilo de texto diferente. A maioria das marcas encontra muito mais do que pretendia ter.
- 2
Agrupe os estilos em funções
Junte os quase duplicados. Busque cinco a sete funções que cubram tudo o que você circulou.
- 3
Escolha fontes para as funções
Normalmente uma fonte de título e uma de texto. Confira se a licença cobre web, apps e qualquer uso em logo.
- 4
Defina a escala e os detalhes
Escolha uma base e uma razão, depois fixe o peso, a entrelinha, as maiúsculas e o espaçamento de cada função. Decida uma vez o uso de maiúsculas nos títulos; maiúscula só no início ou em cada palavra ajuda.
- 5
Publique como tokens e numa folha de uma página
Tokens para código e arquivos de design, e uma única folha visual no seu guia de estilo da marca para todos os outros.
Para posts e apresentações do dia a dia, um kit de marca do Gradiently (no Pro) guarda as fontes de título e de texto do seu sistema, inclusive arquivos de fonte enviados por você, junto com logos, cores e voz. Os designs novos começam com essas duas fontes, e o Designer aplica o kit quando diagrama um design, então a divisão entre título e texto se mantém sem que ninguém precise lembrar.
Perguntas frequentes
O que é um sistema tipográfico?
Um conjunto de funções tipográficas com nome, como display, título, texto e rótulo, cada uma com fonte, peso, tamanho, entrelinha e maiúsculas fixos, normalmente guardadas como design tokens.
Quantas fontes uma marca deve usar?
Uma ou duas para a maioria das marcas: uma para títulos e uma para texto. Só vale acrescentar uma terceira para uma tarefa específica, como código ou dados.
O que é uma escala tipográfica?
Uma sequência de tamanhos de fonte criada multiplicando um tamanho base por uma razão constante, como 1,25, para que cada tamanho do sistema se relacione com os outros.
Como nomear tokens de tipografia?
Pela função, como type-heading ou type-body, e não pelo tamanho. Nomes de função continuam fazendo sentido quando os tamanhos mudam.
Posts de redes sociais devem usar os mesmos tamanhos de fonte de um site?
Não. Mantenha as mesmas funções e fontes, mas use tamanhos bem maiores nos posts, porque eles são vistos pequenos num feed de celular.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil