1.1 Tipografia é a voz do texto

Duas páginas com as mesmas palavras podem comunicar coisas opostas: uma parece um contrato intimidador, a outra um convite. A diferença é tipografia — a escolha das fontes, o tamanho, o espaço entre linhas e letras, a largura da coluna, a hierarquia entre título e corpo. O leitor raramente percebe a tipografia conscientemente; ele percebe se o texto é fácil, confiável, agradável — e isso é resultado de decisões.

Para quem projeta interfaces, o peso é ainda maior: a maior parte de qualquer aplicativo é texto. Botões, rótulos, mensagens de erro, tabelas, menus. Acertar a tipografia é acertar a maior superfície do produto.

1.2 Fonte, tipo, família, glifo: os termos

Na conversa do dia a dia "fonte" e "tipo" viram sinônimos e ninguém morre por isso — mas em contexto técnico (CSS, licenciamento, foundries) a distinção importa: você licencia um tipo e carrega arquivos de fonte.

1.3 Legibilidade × leiturabilidade

• Legibilidade (legibility): quanto uma letra é distinta de outra — propriedade do desenho do tipo. Um "I" maiúsculo, um "l" minúsculo e um "1" que se confundem = baixa legibilidade.
• Leiturabilidade (readability): quão confortável é ler um bloco de texto — propriedade da composição: tamanho, entrelinha, medida da linha, contraste, espaçamento.

Um tipo muito legível pode ser mal composto (linha de 200 caracteres, entrelinha apertada) e ficar cansativo. Os dois trabalham juntos.

1.4 Onde a tipografia aparece no trabalho

• Interface / produto: a escala de texto de um design system, tabelas e formulários, densidade, responsividade.
• Editorial / conteúdo: artigos, documentação, e-books — leitura longa, hierarquia rica.
• Branding: a fonte da marca, o logotipo, a personalidade. Ver a apostila Branding.
• Dados e visualização: rótulos de eixo, números tabulares, legendas. Ver DataVis Avançada.
• Motion / vídeo: legendas, títulos animados, lower-thirds.

2.1 As linhas de referência

A soma ascendente + x-height + descendente (mais um respiro) é o corpo — historicamente o bloco de metal, hoje a métrica que o font-size escala. Por isso dois tipos no mesmo font-size podem parecer tamanhos diferentes: o que você percebe é a x-height.

2.2 Partes da letra

• Haste (stem): o traço vertical principal.
• Serifa (serif): o "pezinho" nas extremidades das hastes (nos tipos serifados).
• Terminal: o fim de um traço que não tem serifa.
• Bojo (bowl): a curva fechada que forma um espaço interno (o "o", a barriga do "b").
• Contraforma (counter): o espaço branco dentro ou parcialmente cercado pela letra (dentro do "o", do "e", do "n").
• Ombro (shoulder): a curva que sai da haste (no "h", "m", "n").
• Braço / perna: traços que saem para fora (o braço do "E", a perna do "R").
• Ápice / vértice (apex/vertex): onde dois traços se encontram no topo ("A") ou na base ("V").
• Espinha (spine): a curva central do "S".
• Orelha (ear): a pequena projeção no "g".
• Gota (teardrop) / esfera (ball terminal): o arremate arredondado (no "a", "c", "f" de muitos tipos).
• Aperture: o quanto uma contraforma aberta se comunica com o exterior (a abertura do "c", "e", "s"). Aberturas amplas ajudam a legibilidade em corpos pequenos.

2.3 Contraste e eixo

• Contraste: a diferença entre os traços grossos e finos da letra. Alto contraste (Didot, Bodoni) = elegante mas frágil em corpo pequeno e tela. Baixo/nenhum contraste (a maioria das grotescas) = robusto.
• Eixo / stress: a inclinação da modulação — imagine uma caneta de ponta larga desenhando o "o". Eixo humanista (inclinado, como a mão) vs eixo vertical (racional, moderno).
• Modulação: como a espessura varia ao longo do traço curvo.

2.4 O espaço entre as letras

• Sidebearing: o espaço embutido à esquerda e à direita de cada glifo pelo designer da fonte.
• Kerning: ajuste fino do espaço entre pares específicos problemáticos ("AV", "To", "Yo") — vem em tabelas dentro da fonte.
• Tracking / letter-spacing: ajuste uniforme do espaço em um trecho — decisão sua na composição.

3.1 Serifadas

3.2 Sans-serif (sem serifa)

3.3 As outras categorias

• Monoespaçada: todo glifo ocupa a mesma largura. Código, dados alinhados, "técnico". Ex.: JetBrains Mono, IBM Plex Mono, Courier.
• Script: imita escrita à mão ou caligrafia. Formal (casamento) ou casual. Nunca em caixa alta, nunca em bloco longo.
• Display / decorativa: feita para tamanhos grandes e uso curto — pôsteres, capas, títulos. Personalidade forte, legibilidade sacrificada.
• Blackletter / gótica: a "letra medieval". Jornais históricos, metal, cerveja. Ilegível em bloco para o leitor moderno.

3.4 As classificações formais (e por que são só um guia)

Existem sistemas — Vox-ATypI, o do British Standards, o do Bringhurst por época histórica. Eles ajudam a estudar e a nomear, mas tipos reais misturam características ("humanista com detalhes geométricos"), e categorias novas surgem. Use os rótulos para comunicar ("preciso de uma humanista sans com x-height alto") — não os trate como gavetas rígidas.

3.5 Superfamílias

Alguns projetos entregam serif + sans + mono (às vezes slab) com o mesmo esqueleto: mesmas proporções, x-height, pesos. São ouro para sistemas, porque combinam por construção. Ex.: IBM Plex (Sans/Serif/Mono/Condensed), Source (Sans/Serif/Code), Roboto (Sans/Serif/Slab/Mono), Recursive, Fira.

4.1 Critérios para escolher uma fonte

4.2 Quantas fontes usar

A resposta segura é uma família bem explorada. Uma superfamília, ou uma sans com muitos pesos, resolve título + corpo + rótulo + código com variações de peso, tamanho e caixa. Duas famílias (uma para display, uma para texto) é o próximo passo. Três ou mais exige justificativa e um sistema muito claro — na dúvida, não.

4.3 Princípios de pareamento

• Contraste, não conflito. As duas fontes devem ser claramente diferentes (senão parece erro), mas não brigar. O par clássico: uma serifada para título + uma sans para corpo, ou vice-versa.
• Compartilhar algo. Boas duplas têm um elo: mesma época, x-height parecido, mesmo "humor", ou o mesmo designer/foundry. Superfamílias já vêm com esse elo.
• Papéis distintos. Defina o que cada fonte faz (display / texto / UI / código) e não misture.
• Teste no conteúdo real. Cole texto de verdade, nos tamanhos de verdade, no fundo de verdade, no dispositivo de verdade — não no site da foundry com "Lorem" em corpo 72.

Pares que quase sempre funcionam

• Uma superfamília inteira (IBM Plex, Source, Recursive).
• Serifada humanista + humanista sans do mesmo período (ex.: uma Garald + uma Frutiger-like).
• Uma geométrica com caráter para títulos + uma humanista sans neutra para corpo.
• Uma única sans variável, usando opsz/peso para diferenciar (Módulo 7).

4.4 Fontes de sistema e a "system font stack"

Usar as fontes já instaladas no dispositivo do usuário: zero download, zero CLS, aparência "nativa". O custo é menos controle e inconsistência entre plataformas.

/* stack de fontes de sistema — sans neutra em cada SO */
font-family:
  -apple-system, BlinkMacSystemFont,   /* macOS / iOS (San Francisco) */
  "Segoe UI",                        /* Windows */
  Roboto,                              /* Android / ChromeOS */
  "Helvetica Neue", Arial,           /* fallback antigo */
  "Noto Sans",                       /* Linux */
  sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji";   /* emoji coloridos */

4.5 Onde achar e como avaliar licença

• Google Fonts: grátis, open source (OFL), self-hostável, ótima base. Qualidade variável — prefira as famílias mantidas (Inter, Roboto, Source, IBM Plex, Noto, Lora, Libre …).
• Foundries independentes (Klim, Grilli Type, Dinamo, Pangram Pangram, Displaay, ABC Dinamo): qualidade alta, personalidade, licença paga — normalmente por uso (desktop, web por pageviews, app, broadcast) e perpétua para a versão.
• Adobe Fonts: incluso na assinatura; ativação por CSS ou sync; leia os termos de web/app.
• Avaliar qualidade: teste os acentos do português, os numerais, o itálico (é desenhado ou inclinado?), o comportamento em 13–16px no Windows, e o tamanho do WOFF2.

5.1 O corpo de texto e a medida

• Tamanho: na web, 16px é o mínimo sensato para corpo (é o default dos browsers por um bom motivo). Leitura confortável hoje vive entre 16 e 20px; documentação e artigos longos costumam ir a 18–20.
• Medida (measure) = comprimento da linha: o alvo é 45–75 caracteres por linha (incluindo espaços); ~66 é o ideal clássico. Em CSS, max-width: 65ch no container de texto resolve. Linha longa demais faz o olho "perder o caminho de volta"; curta demais quebra o ritmo.

5.2 Entrelinha (line-height)

• Corpo: 1.4 a 1.6 (sem unidade no CSS, para herdar proporcionalmente). Texto menor e linhas mais longas pedem mais entrelinha.
• Títulos grandes: 1.0 a 1.25 — quanto maior o texto, mais apertada a entrelinha.
• Regra prática: line-height e measure andam juntos — se a linha é longa, aumente a entrelinha.

5.3 A escala tipográfica modular

Em vez de tamanhos aleatórios, escolha uma razão e multiplique a partir do corpo. Assim os tamanhos se relacionam e a página tem harmonia.

/* escala com razão 1.25 a partir de 16px, arredondada */
--text-xs:   0.64rem;  /* 10.24 → ~10px  (evite para leitura) */
--text-sm:   0.8rem;   /* 12.8  → 13px   legendas, rótulos */
--text-base: 1rem;     /* 16px          corpo */
--text-lg:   1.25rem;  /* 20px          subtítulo / lead */
--text-xl:   1.563rem; /* 25px          h3 */
--text-2xl:  1.953rem; /* 31px          h2 */
--text-3xl:  2.441rem; /* 39px          h1 */
--text-4xl:  3.052rem; /* 49px          display */

Você não precisa usar todos os degraus, e pode "quebrar" a escala no display (títulos gigantes muitas vezes são escolhidos a olho). Mas ter a escala evita a bagunça de 15 tamanhos quase-iguais.

5.4 Hierarquia: os recursos e a disciplina

Você tem seis alavancas para dizer "isto é mais importante que aquilo":

1. Tamanho — o mais óbvio, mas o que mais infla a página se abusado.
2. Peso — Regular vs SemiBold vs Bold. Muitas vezes basta peso, sem mexer no tamanho.
3. Cor / contraste — texto secundário em cinza (respeitando contraste mínimo — Módulo 8).
4. Espaçamento — espaço antes de um título vale mais que espaço depois; espaço agrupa e separa.
5. Família / estilo — itálico, uma segunda fonte, caixa alta.
6. Caixa — versalete, caixa alta com tracking para overlines.

5.5 Ritmo vertical e espaçamento

• Escala de espaçamento baseada em 4 ou 8px (4, 8, 12, 16, 24, 32, 48, 64) — os mesmos degraus para margens entre blocos de texto.
• Espaço de parágrafo: ou um margin-bottom (~0.75–1× a entrelinha) ou recuo de primeira linha — nunca os dois.
• Baseline grid (avançado): alinhar todas as linhas de base a uma grade fixa (ex.: 4px). Lindo no impresso; na web é trabalhoso e opcional — priorize entrelinha e espaçamento consistentes.

5.6 Tracking (letter-spacing)

• Títulos grandes: tracking levemente negativo (−0.01 a −0.03em) — em corpos grandes as letras parecem soltas.
• Corpo: zero. Confie no espaçamento da fonte.
• Caixa alta e versalete: tracking positivo (+0.05 a +0.12em) — maiúsculas foram desenhadas com menos ar entre si.
• Texto muito pequeno (10–11px, legendas): um leve positivo ajuda.

6.1 Unidades

6.2 Propriedades essenciais

body{
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;               /* sem unidade */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1{
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);   /* fluida: min, preferida, max */
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;            /* equilibra as linhas de um título curto */
}
p{
  max-width: 65ch;               /* a medida */
  text-wrap: pretty;             /* evita "viúvas" na última linha */
  hyphens: auto;                 /* precisa de lang no HTML */
}
.uppercase-label{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

• line-height sem unidade — 1.6, não 160% nem 26px — para que elementos filhos herdem a proporção certa.
• text-wrap: balance (títulos) e pretty (parágrafos) — suporte crescente; degradam bem.
• hyphens: auto só funciona com o atributo lang correto no HTML (ver Módulo 8).
• Evite text-align: justify sem hifenização — cria "rios" de espaço branco.

6.3 A system font stack e o system-ui

A palavra-chave system-ui resolve para a fonte de interface do SO. É prática, mas tem armadilhas (em alguns sistemas cai numa fonte sem os caracteres de certos idiomas). O padrão robusto continua sendo a stack explícita do Módulo 4, opcionalmente com system-ui no começo.

6.4 Carregando webfonts: @font-face

@font-face{
  font-family: "Inter";
  src: url("/fonts/Inter-Roman.var.woff2") format("woff2-variations");
  font-weight: 100 900;          /* range: é uma fonte variável */
  font-style: normal;
  font-display: swap;            /* mostra o fallback já, troca quando a fonte chega */
  unicode-range: U+0000-00FF, U+0131, U+2000-206F;  /* subset latino */
}

6.5 Performance e o layout shift da fonte

• Formato: só WOFF2 (compressão melhor; suporte universal hoje). Não sirva TTF/OTF/WOFF1 na web.
• Self-host > CDN de terceiros: menos conexões, sem dependência externa, e privacidade (o Google Fonts via CSS externo já não dá cache compartilhado entre sites de qualquer forma).
• Preload das fontes críticas (o peso do corpo): <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-Roman.var.woff2">.
• Subset: remova glifos que você não usa (idiomas, símbolos) — pode cortar 50–80% do arquivo. Ferramentas: glyphhanger, fonttools/pyftsubset.
• FOUT (Flash of Unstyled Text — vê o fallback, depois troca) é preferível a FOIT (Flash of Invisible Text). swap dá FOUT.
• CLS (Cumulative Layout Shift): quando a webfont tem métricas diferentes do fallback, o texto "pula" ao trocar. Reduza casando o fallback com size-adjust, ascent-override, descent-override e line-gap-override num @font-face de fallback — ou use as "f-mods" que ferramentas (Fontaine, next/font, Fontsource) geram automaticamente.

/* fallback ajustado para casar com a métrica da webfont e não "pular" */
@font-face{
  font-family: "Inter-fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
body{ font-family: "Inter", "Inter-fallback", sans-serif; }

6.6 Recursos de fonte via CSS

.tabela-numeros{ font-variant-numeric: tabular-nums; }      /* números alinham em colunas */
.preco-antigo{ font-variant-numeric: oldstyle-nums; }
.titulo{ font-feature-settings: "liga" 1, "dlig" 1; }       /* ligaturas */
.sigla{ font-variant-caps: all-small-caps; }
.fracao{ font-variant-numeric: diagonal-fractions; }

Prefira as propriedades de alto nível (font-variant-*) quando existirem; caia para font-feature-settings para recursos específicos (ss01, cv05, salt). Detalhe no Módulo 7.

7.1 O que é uma fonte variável

Uma fonte variável guarda, em um arquivo, um espaço contínuo de variações ao longo de eixos. Em vez de baixar Regular + Medium + SemiBold + Bold + itálicos (6–12 arquivos), você baixa um e interpola qualquer valor.

Eixos registrados vêm em minúsculas (wght), eixos customizados em maiúsculas (GRAD).

7.2 Optical sizing (opsz) — o eixo subestimado

Tipos de metal tinham desenhos diferentes para cada tamanho: os pequenos ("texto") com mais contraste baixo, x-height alto, espaçamento folgado, serifas robustas; os grandes ("display") com contraste alto e detalhes finos. Fontes digitais perderam isso — opsz traz de volta.

h1{ font-optical-sizing: auto; }        /* o browser liga opsz ao font-size — ligado por padrão em fontes com o eixo */
.ajuste-manual{ font-variation-settings: "opsz" 8; }   /* força o desenho "texto pequeno" */

7.3 CSS de fontes variáveis

@font-face{
  font-family: "Recursive";
  src: url("/fonts/Recursive.woff2") format("woff2");
  font-weight: 300 1000;
  font-stretch: 75% 125%;      /* o range do eixo wdth */
}
.botao{ font-weight: 560; }                       /* qualquer valor, não só 400/700 */
.condensado{ font-stretch: 85%; }
.grau-dark{ font-variation-settings: "GRAD" 40; }   /* eixos sem propriedade dedicada */

7.4 Ganho e trade-offs

• A favor: um arquivo em vez de muitos; qualquer peso/largura; transições suaves (com prefers-reduced-motion!); opsz automático; GRAD para dark mode.
• Contra: o arquivo único é maior que um peso estático (mas menor que 4–5 juntos); se você só usa 2 pesos, dois estáticos subsetados podem pesar menos. Faça a conta com o subset real.
• Regra prática: usa 3+ pesos, ou larguras, ou quer opsz/GRAD → variável. Usa exatamente Regular + Bold → dois estáticos podem bastar.

7.5 Recursos OpenType

table td.num{ font-variant-numeric: tabular-nums lining-nums; }
article p{ font-variant-numeric: oldstyle-nums proportional-nums; }
abbr{ font-variant-caps: all-small-caps; letter-spacing: .04em; }
.recipe{ font-variant-numeric: diagonal-fractions; }
.inter-tweaks{ font-feature-settings: "cv05" 1, "cv11" 1, "ss03" 1; }  /* g de andar único, 1 sem serifa… */

7.6 Animar eixos — com parcimônia

Dá para animar font-weight / font-variation-settings (hover num link que "engorda", peso que responde ao scroll). Efeito bonito e caro em atenção. Sempre envolva em @media (prefers-reduced-motion: reduce) e mantenha sutil; nunca anime o corpo de texto que a pessoa está lendo.

8.1 O que a WCAG exige do texto

Os números da WCAG podem ser revisados entre versões — confira sempre a versão vigente ao auditar. A apostila Acessibilidade Digital & WCAG cobre o resto (foco, ARIA, testes com leitor de tela).

8.2 Práticas de leiturabilidade acessível

• Não use caixa alta em blocos — some a forma das palavras (o "contorno" que lemos de relance) e leitores de tela podem soletrar. Caixa alta só em rótulos curtos, com text-transform (mantém o texto real no DOM).
• Não justifique sem hifenização — os "rios" de espaço atrapalham, sobretudo dislexia. Na dúvida, alinhe à esquerda.
• Medida controlada (Módulo 5) — linha longa é barreira cognitiva.
• Itálico só em trechos curtos; para blocos longos (citações), prefira outro recurso.
• Sublinhado = link. Não sublinhe texto comum para dar ênfase (use peso).
• Contraste do texto "suave": o cinza-claro de legendas e placeholders frequentemente falha o 4.5:1 — teste.

8.3 Dislexia: o que ajuda de verdade

Fontes vendidas "para dislexia" têm evidência científica fraca de que melhoram a leitura. O que a pesquisa apoia:

• Espaçamento generoso entre letras, palavras e linhas.
• x-height alto e formas de letra distintas (que o "b", "d", "p", "q" não sejam espelhos idênticos).
• Texto alinhado à esquerda, medida curta, parágrafos curtos.
• Deixar o usuário ajustar fonte, tamanho e espaçamento (respeitar as preferências do SO/navegador).

Ou seja: boa tipografia geral já é boa tipografia para dislexia. Ofereça a opção de fonte alternativa se quiser, mas não a imponha.

8.4 Formas ambíguas

Onde o leitor não pode adivinhar pelo contexto — senhas, códigos de verificação, identificadores, trechos de código, dados — a fonte precisa distinguir sem esforço:

• I maiúsculo × l minúsculo × 1 × |
• O × 0 (zero com corte ou ponto?)
• rn × m, vv × w, 5 × S, 8 × B

Fontes desenhadas para isso: JetBrains Mono, IBM Plex Mono, Source Code Pro, Inconsolata, e várias sans de UI têm um ssXX/cvXX que ativa o "l" com cauda e o "0" pontilhado. Para código e senhas, prefira monoespaçada.

8.5 Internacionalização

• lang no HTML — <html lang="pt-BR"> e lang em trechos de outro idioma. Controla hifenização, quebra de linha, aspas, e a voz do leitor de tela.
• Cobertura de glifos — a fonte tem os acentos e caracteres de todos os idiomas do produto? Para amplitude, a família Noto ("no tofu" — sem os quadradinhos □) cobre praticamente todos os scripts.
• Scripts não-latinos: CJK (chinês/japonês/coreano) — fontes enormes, quase sempre subset por página; sem itálico, ênfase por outros meios. Árabe/hebraico — RTL (dir="rtl"), letras que mudam de forma conforme a posição. Devanágari, tailandês — marcas acima/abaixo, entrelinha maior.
• Expansão de texto: do inglês para alemão/português o texto cresce 20–35% — o layout não pode quebrar. Nunca fixe largura de botão pelo texto de um só idioma.
• Números e datas: separador decimal (vírgula em pt-BR), agrupamento de milhar, formato de data — localize; não formate à mão.

8.6 Números em dados

• Tabelas, extratos, dashboards, cronômetros → tabular-nums sempre, senão as colunas "dançam".
• Alinhe números à direita (ou pelo separador decimal) para comparar magnitudes.
• Ver a apostila DataVis Avançada para rótulos de eixo e legendas.

9.1 De estilos soltos a papéis

Um sistema não lista "tamanhos" — lista papéis (o que o texto faz), e cada papel amarra família + tamanho + peso + entrelinha + tracking + cor.

9.2 Tokens de tipografia

Três camadas, como em cor:

/* 1. PRIMITIVOS — os valores crus, sem significado de uso */
--font-sans: "Inter", "Inter-fallback", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--font-serif: "Lora", Georgia, serif;

--weight-regular: 400;  --weight-medium: 500;  --weight-semibold: 600;  --weight-bold: 700;

--size-100: 0.75rem;  --size-200: 0.875rem;  --size-300: 1rem;
--size-400: 1.125rem; --size-500: 1.25rem;   --size-600: 1.5rem;
--size-700: 1.875rem; --size-800: 2.25rem;   --size-900: 3rem;

--leading-tight: 1.15;  --leading-snug: 1.35;  --leading-normal: 1.55;
--tracking-tight: -0.02em;  --tracking-normal: 0;  --tracking-wide: 0.08em;

/* 2. SEMÂNTICOS — um papel, composto dos primitivos */
--text-body-font: var(--font-sans);
--text-body-size: var(--size-300);
--text-body-leading: var(--leading-normal);
--text-body-weight: var(--weight-regular);

--text-heading-1-size: var(--size-800);
--text-heading-1-leading: var(--leading-tight);
--text-heading-1-weight: var(--weight-bold);
--text-heading-1-tracking: var(--tracking-tight);

/* 3. USO — uma classe/utilitário por papel (ou o shorthand `font`) */
.text-body{
  font: var(--text-body-weight) var(--text-body-size)/var(--text-body-leading) var(--text-body-font);
}
.text-heading-1{
  font: var(--text-heading-1-weight) var(--text-heading-1-size)/var(--text-heading-1-leading) var(--font-sans);
  letter-spacing: var(--text-heading-1-tracking);
}

9.3 Nomenclatura: semântica × escala

• Escala (size-500, text-lg): flexível, mas não diz onde usar; o time inventa hierarquia sozinho.
• Semântica (text-body, heading-2): guia o uso, mas exige manutenção quando os papéis mudam.
• O padrão maduro: primitivos por escala + semânticos por papel apontando para eles. Componentes consomem só os semânticos.

9.4 Fluid type no sistema

• Use clamp(min, preferida, max) só nos papéis grandes (display, heading-1/2). Corpo e rótulos ficam fixos — fluidez no corpo prejudica a previsibilidade da medida.
• Defina o min e o max pensando nos breakpoints reais; teste que a 320px nada fica pequeno demais e a 1440px nada fica gigante.
• Garanta que o texto ainda escala com o zoom do usuário — clamp() com rem nos limites, não só vw.

9.5 Onde os tokens vivem

• CSS custom properties — a fonte da verdade em runtime; permite tema e dark mode (trocar --weight/GRAD).
• Tailwind — theme.fontSize, fontfamily, fontWeight, lineHeight, letterSpacing no config; idealmente lendo das custom properties.
• Figma — text styles (e variables para os primitivos) espelhando exatamente os mesmos nomes e valores. Divergência entre Figma e código é a fonte nº 1 de retrabalho.
• Style Dictionary (ou Tokens Studio) — descreve os tokens uma vez em JSON e gera CSS, Tailwind, iOS, Android, Figma. Vale quando há mais de uma plataforma.
• Ver a apostila Design Systems & Design Tokens desta trilha para a arquitetura de tokens completa.

9.6 Governança e o specimen

• Uma página de specimen viva: cada papel renderizado com texto real, em claro e escuro, com do's & don'ts.
• Regra de quem adiciona um papel novo (quase nunca) e por que — a pressão é sempre por "mais um tamanho".
• Lint: proibir font-size/font-weight "mágicos" no código de produto (só tokens); checar contraste dos pares texto/fundo no CI.

9.7 Respeitar a plataforma e o usuário

• iOS Dynamic Type / Android font scale: em apps nativos, amarre os papéis aos estilos de texto do sistema para herdar a preferência de tamanho do usuário.
• Na web: nunca px em font-size; teste com a fonte do navegador aumentada; respeite prefers-reduced-motion (eixos animados) e prefers-contrast.

10.1 Onde tipografia pesa

• Product / UI designer: a escala de texto do produto, densidade, tabelas e formulários, responsividade — avaliado em todo teste de portfólio.
• Design systems: tokens de tipografia, specimen, sincronia Figma↔código, governança.
• Brand / identidade: escolha e (às vezes) customização da fonte da marca, logotipo, guidelines. Ver Branding.
• Front-end / UI engineer: carregamento de fontes, performance (CLS/LCP), @font-face, variable fonts, acessibilidade do texto.
• Editorial / motion / DataViz: leitura longa, legendas, rótulos, números tabulares.

10.2 Roadmap de estudo (6–8 semanas)

10.3 Banco de perguntas de entrevista (com a resposta que aprova)

10.4 Projetos de portfólio que geram entrevista

1. Type specimen interativo (âncora): uma página que apresenta uma família — pesos, opsz, recursos OpenType, pares, a escala — com texto real e controles. Mostra domínio de anatomia, OpenType e CSS.
2. Redesign de hierarquia: pegue um artigo/tela real com hierarquia fraca e refaça com uma escala modular; publique o antes/depois com o raciocínio de cada decisão.
3. Sistema tipográfico completo: primitivos + semânticos + specimen em claro/escuro + página de governança, implementado em CSS custom properties e espelhado em Figma text styles.
4. Estudo de pareamento: 4–5 duplas de fontes para contextos diferentes, cada uma com o elo que as une e o teste no conteúdo real.
5. Refactor de performance de fontes: um site real; antes/depois de CLS e bytes transferidos após WOFF2 + subset + preload + fallback casado + variável. Números do Lighthouse.

10.5 Fontes para continuar

• Livros: Thinking with Type (Ellen Lupton); The Elements of Typographic Style (Robert Bringhurst); Flexible Typesetting (Tim Brown); On Web Typography / Web Typography (Richard Rutter).
• Web: Butterick's Practical Typography (practicaltypography.com); Google Fonts Knowledge; Material Design e Apple HIG (seções de tipografia); MDN sobre font-* e @font-face.
• Referência visual: Fonts In Use, Typewolf, Type Specimens.
• Ferramentas: Utopia (fluid type), Modularscale, Fontsource / next-font (self-host + f-mods), Wakamai Fondue (inspecionar recursos de uma fonte), Fontaine/Glyphhanger (fallback e subset).
• Nesta trilha: Cor, Layout, Grade & Espaçamento, Design Systems & Design Tokens; e as apostilas CSS, CSS Avançado, Acessibilidade Digital & WCAG e Branding.