Duas fontes, dois papéis
Mazzard Soft H fala — arredondada, atlética. Geist Mono comprova — precisa, utilitária. Uma carrega a voz da marca; a outra carrega o dado.
As duas fontes
O contraste entre o arredondado da Mazzard e o preciso da Geist Mono não é decoração: é o que codifica “método, não achismo”. Não misture uma terceira.
Mazzard Soft H · voz
Aa Bb
Geist Mono · dados
Aa 01
Escala
Fluida entre 390 e 1280px — cada passo é um clamp(), não um salto.
Só o display do hero chega a 72px; o resto contém. Redimensione a janela
e os exemplos abaixo se movem: não são imagens, são o sistema.
display · 36 → 72
Display
h1 · 32 → 52
Título de página
h2 · 28 → 36
Título de seção
h3 · 22 → 26
Subtítulo
body · 16 → 17
Corpo de leitura confortável para parágrafos longos.
eyebrow · 12
Eyebrow · seção
As regras que não mudam com o tamanho
alinhamento
Flush left quase sempre. Centralizado só em espaços estreitos — cards, slides. Nunca justifique corpo de texto.
tracking
Headings fecham (-0.025em no display). O eyebrow abre (0.08em) porque a mono já corre larga. No corpo, não mexa.
line-height
Display 1.06 → corpo 1.65. O leading cresce conforme a letra diminui: quanto menor o texto, mais ar entre as linhas.
peso
Heavy (800) só em numerais. Bold (700) e Semibold (600) em títulos. Regular (400) no corpo. Não invente pesos.
Faça & evite
-
Mazzard para a voz, Geist Mono para o dado -
Sentence case — inclusive nas manchetes -
Margens generosas: o branco faz parte do desenho -
Manchetes grandes, para prender a atenção
-
Fontes fora do sistema -
Encher todo o espaço com texto -
ALL CAPS em texto corrido -
Mexer no tracking do corpo