A versão curta
- Um sistema tipográfico é um pequeno conjunto de funções com nome, como display, título, texto e etiqueta, cada uma com fonte, peso, tamanho, entrelinha e capitalização fixos.
- Os tamanhos de um sistema tipográfico vêm de uma só escala, um tamanho base multiplicado por uma razão constante, para que cada passo se relacione com os outros.
- A maioria das marcas precisa só de um ou dois tipos de letra; o sistema cria variedade através de funções, pesos e tamanhos.
- Os design tokens guardam cada função como um valor com nome, para que sites, aplicações e ficheiros de design usem as mesmas decisões de tipografia.
- Publicações sociais, diapositivos e sites precisam de tamanhos diferentes para as mesmas funções, por isso um bom sistema lista cada função por canal.
Nesta página
Um sistema tipográfico é o conjunto de regras que decide como a letra se comporta numa marca: algumas funções com nome (display, título, texto, etiqueta), cada uma com uma fonte, peso, tamanho, entrelinha e capitalização, todas dimensionadas a partir de uma só escala e guardadas como tokens para que todos os designers e programadores usem os mesmos valores. As fontes dão voz a uma marca. O sistema torna essa voz consistente, para que um título num cartaz, num site e num story pareçam vir do mesmo sítio. Eis como construir um.
As funções de um sistema tipográfico
Começa pelas tarefas, não pelas fontes. Cada texto que uma marca publica faz uma de um punhado de tarefas, e cada tarefa passa a ser uma função. A maioria das marcas precisa de cinco a sete.
Definição típica
Definição típica
Tarefa
Definição típica
Definição típica
Tarefa
Definição típica
Definição típica
Definição típica
Três funções numa publicação: uma etiqueta de sobretítulo, um título e uma linha de texto. Cada uma é logo distinta, para o olhar saber por onde começar.
Quantas fontes precisa um sistema tipográfico de marca
Normalmente uma ou duas. Uma família em três pesos pode sustentar um sistema inteiro. Duas fontes, uma para títulos e outra para texto, acrescentam carácter. Uma terceira só se justifica para uma tarefa específica, como código ou dados. A variedade vem das funções, tamanhos e pesos, não de mais tipos de letra. Combinações de Google Fonts e fontes de marca ajudam-te a escolher.
Evita
- Uma fonte nova para cada campanha
- Tamanhos escolhidos a olho em cada design
- Nove pesos carregados, três usados
- Regras de capitalização diferentes em equipas diferentes
- Um guia de estilo que lista fontes mas não funções
Faz
- Uma ou duas famílias para tudo
- Todos os tamanhos de uma só escala
- Só os pesos de que as funções precisam
- Uma regra escrita de capitalização para títulos e botões
- Funções com fonte, peso, tamanho, entrelinha e capitalização
Constrói uma escala tipográfica
Uma escala tipográfica escolhe um tamanho base e multiplica-o pela mesma razão a cada passo acima. Os passos relacionam-se entre si, por isso quaisquer dois tamanhos do sistema parecem intencionais juntos. Uma razão de 1,25 serve interfaces e páginas densas; 1,333 ou 1,5 dá mais drama a trabalho editorial e de marketing. Escala tipográfica explica as razões com mais profundidade.
Função
Função
Função
Função
Função
Função
Função
Tamanho a 1,25 a partir de 16 px
Função
Guarda o sistema como tokens
Um sistema que só vive num PDF desvia-se. Os tokens são valores com nome que o código e os ficheiros de design leem, por isso mudar um valor atualiza tudo. Dá nomes aos tokens pela função, nunca pelo tamanho: --type-heading sobrevive a um redesenho, --type-31 não. Design tokens trata da 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 numa publicação de Instagram fazem a mesma tarefa em tamanhos muito diferentes, porque um lê-se à distância de um braço num ecrã grande e o outro encolhe num feed de telemóvel. Mantém as funções idênticas e dá a cada canal os seus tamanhos.
Publicação social 1080×1350
Diapositivos 1920×1080
Publicação social 1080×1350
Diapositivos 1920×1080
Publicação social 1080×1350
Diapositivos 1920×1080
Site
Publicação social 1080×1350
Diapositivos 1920×1080
Como construir o teu sistema tipográfico
- 1
Reúne o que já publicas
Tira capturas de ecrã do teu site, publicações, emails e diapositivos. Rodeia cada estilo de texto distinto. A maioria das marcas encontra muito mais do que pensava ter.
- 2
Agrupa os estilos em funções
Junta os quase duplicados. Procura cinco a sete funções que cubram tudo o que rodeaste.
- 3
Escolhe as fontes para as funções
Normalmente uma fonte de títulos e uma de texto. Verifica se a licença cobre web, aplicações e qualquer uso em logótipos.
- 4
Define a escala e os detalhes
Escolhe uma base e uma razão e fixa depois o peso, a entrelinha, a capitalização e o espaçamento de cada função. Decide uma vez a capitalização dos títulos; maiúsculas de frase vs de título ajuda.
- 5
Publica-o como tokens e uma folha de uma página
Tokens para código e ficheiros de design, uma única folha visual no teu guia de estilo da marca para todos os outros.
Para publicações e apresentações do dia a dia, um kit de marca da Gradiently (no Pro) guarda as fontes de títulos e de texto do teu sistema, incluindo ficheiros de fontes carregados, junto com logótipos, cores e voz. Os novos designs começam com essas duas fontes, e o Designer aplica o kit ao compor um design, para que a divisão entre títulos e texto se mantenha sem ninguém ter de se lembrar dela.
Perguntas frequentes
O que é um sistema tipográfico?
Um conjunto de funções tipográficas com nome, como display, título, texto e etiqueta, cada uma com fonte, peso, tamanho, entrelinha e capitalização fixos, normalmente guardadas como design tokens.
Quantas fontes deve usar uma marca?
Uma ou duas para a maioria das marcas: uma para títulos e outra para texto. Só vale a pena 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 letra obtida multiplicando um tamanho base por uma razão constante, como 1,25, para que cada tamanho do sistema se relacione com os outros.
Como devem ser nomeados os tokens de tipografia?
Pela função, como type-heading ou type-body, e não pelo tamanho. Os nomes de função continuam com sentido quando os tamanhos mudam.
As publicações de redes sociais devem usar os mesmos tamanhos de letra que um site?
Não. Mantém as mesmas funções e fontes, mas usa tamanhos muito maiores nas publicações, porque são vistas pequenas num feed de telemóvel.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil