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

A tabela esconde duas hierarquias. Do lado do texto: o caractere é a unidade abstrata (o "a" como ideia, com um número no Unicode) e o glifo é a forma concreta que aparece na tela — e os dois não são 1 para 1. A ligadura "fi" é um glifo para dois caracteres; o "á" pode chegar como um caractere só ou como dois ("a" + acento combinante), detalhe que morde em PT-BR. Do lado do desenho: o tipo é o projeto (a ideia das letras), a família é a coleção que nasce dele (todos os pesos, itálicos e larguras) e a fonte é um arquivo concreto — um recorte da família num peso e num estilo. Analogia: o tipo é a composição, a família é a discografia, a fonte é uma faixa gravada.

Na web essa distinção vira código: font-family nomeia o tipo/família; cada @font-face carrega uma fonte (um .woff2); font-weight e font-style só escolhem qual fonte da família usar. Você licencia um tipo (ou a família inteira), mas entrega arquivos de fonte no site — por isso o peso em KB e a licença de webfont se contam por arquivo. Na conversa do dia a dia "fonte" e "tipo" viram sinônimos e ninguém morre por isso; em contexto técnico — CSS, licenciamento, foundries — a distinção evita erro.

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 reto principal da letra — vertical na maioria ("l", "I", "d", o tronco do "E", "H"), mas diagonal no "A", "V", "W", "M". Letras de estrutura curva — "O", "C", "S", "e", "o" — não têm haste: o traço principal é o bojo ou a espinha. (Nos tipos com contraste, a parte mais grossa da curva do "O" costuma chamar-se apenas "traço", não haste.)
• 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 principal do "S"/"s" — é o nome específico desse traço, e praticamente só o S o tem.
• Orelha (ear): a pequena haste que se projeta do bojo superior do "g" de dois andares (alguns também chamam "orelha" à saliência no topo do "r").
• Gota (teardrop) / esfera (ball terminal): o arremate arredondado no fim de certos traços — a "gota" do a c f (EB Garamond), a "bola" do a c f (Libre Baskerville). A Inter — fonte deste texto — não tem: os traços acabam a direito.
• 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 (mono): todo glifo ocupa a mesma largura. Uso: código, terminais, dados que precisam alinhar em coluna, um "humor" técnico numa marca. Ex.: JetBrains Mono, IBM Plex Mono, Courier.
• Proporcional: o oposto — cada glifo tem a largura da sua forma (o "i" é estreito, o "m" é largo). É o que quase toda fonte de texto é; só se nomeia quando o contraste com a mono importa (ex.: font-variant-numeric alterna numerais tabulares ↔ proporcionais).
• Manuscrita / script: imita a mão. Divide-se em formal (caligráfica, penas de ponta fina, letras ligadas — convites, diplomas, rótulos de luxo) e casual / brush (pincel ou marcador, gesto solto — embalagem, desporto, "artesanal"). Regra: nunca em caixa alta (as ligações partem-se), nunca em bloco longo.
• Display / decorativa: feita para tamanhos grandes e uso curto — pôsteres, capas, títulos, logótipos. Personalidade forte, legibilidade sacrificada. O extremo é a excêntrica: formas propositadamente estranhas (stencil, inline, "psicadélica", pixel), que só funcionam numa palavra e num contexto.
• Condensada / expandida: não é bem uma categoria — é o eixo de largura. A condensada espreme a letra para caber mais por linha ou ganhar impacto vertical (manchetes, tabelas apertadas, rótulos); a expandida abre para ocupar espaço com calma. Ex.: Oswald, Anton, Roboto Condensed.
• Blackletter / gótica: a "letra medieval" — a Textura de Gutenberg. Cabeçalhos de jornal históricos, rótulos de cerveja, metal. 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.

3.6 Linha do tempo: quem mudou a tipografia

As categorias de 3.1–3.3 não caíram do céu — cada uma resolveu um problema de uma época, quase sempre por causa de uma pessoa, uma oficina ou uma tecnologia nova. Conhecer a linhagem ajuda a escolher (e a parear) com intenção. A história não parou: continua nos arquivos de fonte e no carregamento web (Módulo 6) e nas fontes variáveis (Módulo 7).

1. A
   c. 1450 · Mainz

   Johannes Gutenberg

   Ourives e impressor

   Tipos móveis de metal + prensa. A sua Bíblia de 42 linhas usa uma Textura (blackletter) que imita o manuscrito gótico — o tipo ainda tentava parecer escrita à mão. exemplo: Textura · fonte: UnifrakturMaguntia

2. R
   1470–1501 · Veneza

   Nicolas Jenson · Aldus Manutius & Francesco Griffo

   Impressores e gravadores de punção

   Jenson desenha a primeira romana verdadeiramente legível — base de todas as humanistas. Trinta anos depois, Manutius e Griffo criam o itálico para caber mais texto no livro de bolso, e o "Bembo". O gesto: a barra do "e" é inclinada, como a da pena. exemplo: humanista & itálico · fonte: EB Garamond

3. Q
   c. 1530 · Paris

   Claude Garamond

   Gravador de punção

   Refina a old-style francesa a tal ponto que os seus tipos (e os do seu sucessor Jean Jannon) definem a leitura de livro por 200 anos. "Garamond" hoje é um nome genérico para dezenas de revivals. exemplo: old-style · fonte: EB Garamond

4. R
   c. 1722 · Londres

   William Caslon

   Gravador de punção e fundidor

   A workhorse inglesa — robusta, sem gênio mas sempre funcional. "When in doubt, use Caslon." A Declaração de Independência dos EUA foi composta nela. exemplo: Caslon · fonte: Libre Caslon Text

5. g
   1757 · Birmingham

   John Baskerville

   Impressor (e fabricante de laca)

   Papel mais liso, tinta mais preta, prensa mais precisa → pôde aumentar o contraste e endireitar o eixo. Nasce a transicional, a ponte entre a old-style e a didone. O gesto: eixo quase vertical, serifas finas e afiadas, o "g" de bojo aberto. exemplo: transicional · fonte: Libre Baskerville

6. R
   c. 1790 · Parma / Paris

   Giambattista Bodoni · Firmin Didot

   Impressores de corte

   Levam o contraste ao extremo e o eixo à vertical perfeita: a didone ("moderna"). Racionalista, glamorosa — e frágil em corpo pequeno. Até hoje é o alfabeto da moda. O gesto: o traço fino quase desaparece; a serifa é um fio reto, sem transição. exemplo: Didone · fonte: Playfair Display

7. A
   1815–1816 · Inglaterra

   Vincent Figgins · Robert Thorne · William Caslon IV

   Fundidores da era industrial

   A publicidade quer berrar. Surgem as primeiras slab / egípcias (serifa grossa), as fat faces para cartaz e, em 1816, o primeiro tipo sem serifa ("Two Lines English Egyptian", de Caslon IV) — então achado feio e chamado "grotesco". exemplo: CARTAZ · fonte: Archivo Black · slab · Roboto Slab

8. G
   1896 · Berlim

   Berthold — Akzidenz-Grotesk

   Fundição tipográfica

   A grotesca "de trabalho" que virou padrão de facto na Europa — e a semente direta da Helvetica e da Univers, sessenta anos depois. exemplo: grotesca · fonte: Inter (neo-grotesca próxima)

9. a
   1919–1933 · Weimar / Alemanha

   Bauhaus — Herbert Bayer · Paul Renner · Jan Tschichold

   Escola de design e tipógrafos

   "A forma segue a função": só minúsculas, geometria pura. Renner desenha a Futura (1927, a geométrica definitiva) e Tschichold escreve Die neue Typographie (1928) — assimetria, sans, grelha. O gesto: o "o" é um círculo perfeito e o "a" tem um só andar. exemplo: geométrica · fonte: Poppins (Futura-like)

10. T
    1932 · Londres

    Stanley Morison — Times New Roman

    Consultor tipográfico da Monotype / The Times

    Encomendada para o jornal The Times: uma transicional compacta, econômica em papel, resistente em corpo pequeno. Tornou-se, por décadas, o tipo mais visto do mundo. exemplo: jornal · fonte: Lora (transicional de tela)

11. R
    1957 · Suíça

    Max Miedinger & Eduard Hoffmann (Helvetica) · Adrian Frutiger (Univers)

    Designers e fundições Haas / Deberny & Peignot

    No mesmo ano nascem as duas neo-grotescas que definem o Estilo Internacional Suíço: neutralidade absoluta, grelha, "a tipografia não deve ter voz". A Univers estreia um sistema numerado de pesos e larguras. O gesto: terminais cortados na horizontal, aberturas apertadas (o "c" quase fecha). exemplo: neutra · fonte: Inter (neo-grotesca)

12. a
    1968–1976 · Paris

    Adrian Frutiger — sinalização de Roissy → Frutiger

    Designer de tipos

    Para o aeroporto Charles de Gaulle: uma sans humanista, de aberturas amplas, legível de longe, de esguelha e em movimento. Vira o padrão da sinalização de aeroportos e estradas no mundo inteiro. exemplo: humanista · fonte: Source Sans 3

13. &
    1984–1991 · EUA

    Macintosh + PostScript · Susan Kare · Emigre (Zuzana Licko & Rudy VanderLans)

    Adobe, Apple e uma revista/foundry independente

    O computador pessoal + PostScript (Adobe) tornam qualquer pessoa um tipógrafo. Kare desenha as fontes de tela do Mac pixel a pixel; a Emigre e Licko abraçam a grelha de baixa resolução como estética (Lo-Res, Mrs Eaves) em vez de a esconder. exemplo: 01001 · fonte: JetBrains Mono

14. g
    1994–1996 · Microsoft

    Matthew Carter — Verdana e Georgia

    Designer de tipos (co-fundador da Bitstream / Carter & Cone)

    Desenhadas do pixel para fora: x-height enorme, formas abertas, espaçamento generoso, hinting obsessivo. Provaram que dava para ler bem em ecrã de 1996 — e moldaram a webfont que veio depois. exemplo: ecrã · fonte: Lora (serif de tela)

15. &
    2010–2016 · web

    Google Fonts · fontes variáveis · Inter (Rasmus Andersson)

    Consórcio Apple/Google/Microsoft/Adobe e foundries indie

    Google Fonts (2010) democratiza a webfont; o formato variável (OpenType 1.8, 2016) põe um espaço contínuo de pesos/larguras/óptica num arquivo; a Inter nasce open-source como a sans de UI. Em paralelo, foundries indie (Klim, Grilli Type, Dinamo, Pangram Pangram) reafirmam o desenho de autor. exemplo: wght 100→900 · fonte: Inter

Os medalhões mostram uma letra num tipo daquele momento (quase sempre um revival digital em Google Fonts — Garamond, Baskerville, Bodoni etc. nunca deixaram arquivos de fonte), não uma fotografia da pessoa: esta apostila é sem imagens, e retratos históricos trariam questões de licença e peso — o mesmo tipo de cuidado que a secção 4.5 pede para qualquer fonte. Para ver os originais, procure "specimen" + o nome numa biblioteca como a Letterform Archive ou o catálogo da Klingspor.

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 Os arquivos de fonte: formatos e como uma fonte nasce

Antes de carregar uma fonte, vale saber o que é o arquivo. Todos os formatos modernos são OpenType por dentro — mudam a extensão, a embalagem e o tipo de curva do contorno, não a natureza.

Uma fonte variável (Módulo 7) não é um formato novo — é um .ttf/.otf/.woff2 normal com uma tabela fvar descrevendo os eixos e os "deltas" entre extremos. Dentro de qualquer arquivo há tabelas: glyf ou CFF (os contornos), cmap (caractere → glifo), GSUB/GPOS (ligaduras, small caps, kerning), hmtx (larguras), OS/2 e hhea (métricas: ascendente, descendente, x-height), name (nome, licença), fvar/gvar (variável).

Como uma fonte é feita, do desenho ao .woff2:

1. Desenho dos glifos num editor de fontes — Glyphs ou FontLab (comerciais, padrão da indústria), RoboFont, ou FontForge (livre). O formato-fonte aberto é o UFO (um glifo por arquivo) + um designspace.
2. Contornos em curvas de Bézier, com consistência de espessura, overshoot nas curvas (o "O" ultrapassa um pouco as linhas para parecer do mesmo tamanho do "H") e correções ópticas.
3. Espaçamento e kerning: definir a "almofada" lateral de cada glifo e depois corrigir os pares problemáticos ("AV", "To", "f)").
4. Recursos OpenType escritos em código (arquivos .fea): liga, kern, smcp (small caps), onum (numerais old-style), ss01… (stylistic sets), locl (formas locais — importa para acentos e o "ç" do português).
5. Hinting: instruções que ajudam telas de baixa resolução a encaixar os traços na grade de pixels. Hoje pesa quase só no Windows; costuma ser automático (ttfautohint).
6. Se for variável: declarar os eixos (wght, wdth, opsz, GRAD…), desenhar os masters nos extremos e deixar o editor interpolar o meio.
7. Compilar o UFO para binário .otf/.ttf com fontmake (Google), o makeotf do AFDKO (Adobe) ou a biblioteca fonttools — que sustenta quase todo o ecossistema.
8. Pós-produção para a web: pyftsubset (fonttools) remove glifos que você não usa; woff2_compress gera o .woff2; opcionalmente geram-se as métricas de fallback (as "f-mods" do 6.6).

6.5 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.6 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.7 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.