Tipografia

Quatro famílias, uma voz

Anton para o display (condensada, impacto máximo). Antonio para H1 e H2 (mesma família condensada, versão flexível). Outfit para todo o resto do texto (geométrica, limpa, legível). JetBrains Mono só no overline e no código.

01

Famílias

Display
Aa
Anton
Google Fonts · 400
Títulos
Aa
Antonio
Google Fonts · 400 a 700
Texto
Aa
Outfit
Google Fonts · 300 a 700
Mono
Aa
JetBrains Mono
Variable · 100 a 800

02

Escala tipográfica

Hierarquia completa, do display ao overline.

Display
60px / 1
Anton · 400
Design é comunicação
H1
48px / 1.1
Antonio · 700
Design é comunicação
H2
36px / 1.15
Antonio · 700
Design é comunicação
H3
24px / 1.2
Outfit · 600
Design é comunicação
H4
20px / 1.3
Outfit · 600
Design é comunicação
H5
18px / 1.4
Outfit · 600
Design é comunicação
H6
16px / 1.5
Outfit · 600
Design é comunicação
Body Large
18px / 1.6
Outfit · 400
Design é comunicação
Body
16px / 1.6
Outfit · 400
Design é comunicação
Body Small
14px / 1.5
Outfit · 400
Design é comunicação
Caption
12px / 1.4
Outfit · 400
Design é comunicação
Overline
11.5px · 0.14em
JetBrains Mono · 500 uppercase
Design é comunicação

03

Line height & tracking

Line heights
  • tight (1.1)Títulos grandes
  • snug (1.3)Títulos médios
  • normal (1.5)UI, botões, labels
  • relaxed (1.6)Corpo de texto
  • loose (1.75)Blocos longos, artigos
Letter spacing
  • -0.02emDisplay
  • 0Corpo
  • 0.14emOverline / mono label

04

Exemplos combinados

Artigo · 3 de julho, 2026

Como construir um design system em um fim de semana

A resposta curta: não construa. Reutilize o que já sabe que funciona, escreva menos código, e envie antes de estar perfeito.

Este texto usa Outfit em 16px com line-height 1.6, a combinação que garante legibilidade em qualquer viewport. Podemos destacar palavras importantes, incluir hyperlinks óbvios, e ainda mostrar código inline.