Foundations

Type .

Mazzard Soft H carrega a personalidade — arredondada, atlética, confiante. Geist Mono ancora os dados — precisa, utilitária, honesta. A escala fluida expande de 390 px a 1280 px: apenas o display tem licença para ser grande.

Combinação

Display — Mazzard Soft H

Aa Bb Cc

Regular Medium Semibold Bold

Utilitário — Geist Mono

Aa 01 --

Regular Medium

Escala fluida

Cada passo usa a variável --size-* correspondente; o valor interpola suavemente entre mínimo e máximo conforme a largura da viewport. Redimensione a janela para ver a escala em ação.

display 36 → 72px

Display — o topo da escala.

h1 32 → 52px

Heading 1 — título de página.

h2 28 → 36px

Heading 2 — título de seção.

h3 22 → 26px

Heading 3 — subtítulo.

h4 18 → 20px

Heading 4 — rótulo de bloco.

lead 17 → 19px

Texto de abertura — introduz o contexto com clareza e ritmo.

body 16 → 17px

Corpo de leitura confortável para parágrafos longos. Geist Mono aparece em rótulos, dados e código.

small 15px

Texto secundário, legendas complementares.

caption 13px

Caption e metadados técnicos.

eyebrow 12px

EYEBROW — SEÇÃO

Regras de uso

Hierarquia por contenção: Apenas o display do hero tem licença para usar o tamanho máximo de 72 px. O restante da escala não sobe além do seu teto.
Tracking: Display e headings usam letter-spacing negativo (--tracking-display: -0.025em) para compensar o ganho óptico em tamanhos grandes. Eyebrow usa --tracking-eyebrow: 0.08em (largo, porque mono).
Line-height: Display: 1.06 — h4: 1.35 — body: 1.65. O leading aumenta conforme o corpo diminui.
Peso: Heavy (800) é reservado para numerais de destaque apenas. Semibold (600) para headings em contexto editorial. Regular (400) para corpo de texto.