Tipografia da interface

1) Papel da tipografia no produto

• acelera a digitalização e reduz a carga cognitiva,
• forma uma hierarquia e ajuda a navegar no estado,
• aumenta a conversão (CTA, formulários) e reduz os erros,
• torna a interface acessível e resistente à localização.

2) Opções básicas

Kegl (texto principal): 16-18 px em desktop, 15-16 px em mobile.
Espaçamento entre linhas (line-height): 1. 45–1. 6 para texto, 1. 2–1. 35 para os títulos.
Comprimento de linha (measure): 45-80 caracteres; Nos Sidbar, 36-60.
Espaçamento entre barras (tracking): 0-1% para o texto normal; para caps - + 2-4%.
Contraste (WCAG): texto normal ≥ 4. 5:1, grande/gordo ≥ 3:1.
Maiúsculas: evite o ALL CAPS permanente; use para marcas/chips, compense o tracking.

3) Hierarquia e escala de tamanho

Recomendamos uma abordagem modular: grade 8-pt + escala tipográfica.

• Display: 40/48 (LH 1. 15)
• H1: 32/40 (1. 25)
• H2: 24/32 (1. 25)
• H3: 20/28 (1. 3)
• H4: 18/26 (1. 4)
• Body/L: 18/28 (1. 55)
• Body/M: 16/26 (1. 55)
• Body/S: 14/22 (1. 5)
• Caption: 12/18 (1. 5)
• Mono/UI: 12–14/18–20

• Entre os níveis vizinhos, um passo marcante (mínimo de 12% a 16%).
• A hierarquia é construída com uma combinação de tamanho, peso, entrelinhas, cores (com base no contraste) e distâncias até os blocos vizinhos.

4) Capivota, linha básica e óptica

Alinhe os itens em função do cabeçalho de cabeçalho (conveniente para ícones).
Mantenha a linha de base do texto com o passo 4/8-pt - os ritmos rígidos facilitam a leitura.
Recuos ópticos: cabeçalhos acima do bloco - mais do que abaixo (por exemplo, + 4-8 px acima).

5) Desenho e fontes variáveis

Conjunto mínimo: Regular, Medium, SemiBold (Bold opcional).
Não use Ultra-Light/Thin em UI.

• Body: 420-470 (mais rígido óptico do que 400).
• UI labels: 500–550.
• Headers/CTA: 600–650.
• Ao reduzir o valor, aumente levemente o peso (compensação).
• Desliga as ligaduras decorativas nos números UI; mantenha as ligaduras padrão para cirílico/latim.

6) Números, tabelas e Dataviz

Inclua os tabulares figures (números monossirretos) para somas, coeficientes, temporizadores, classificações.
Os sinais +/- são sempre visíveis e com contraste suficiente; os valores negativos não são apenas de cor (ícone/seta/gordura).
Para valores em dinheiro, use um espaço estreito como separador fino de descargas (ou formato local).
Aline-se a um ponto decimal nas tabelas; Para as colunas mono, uma fonte monossilâmica.
Os gráficos de assinatura de eixos ≥ 12 px (mobile) e ≥ 13-14 px (desktop), LH 1. 3; lendas ≥ 4. 5:1 para o fundo.

7) Formulários, inputs, mensagens

Editoras 12-14 px, LH 1. 3–1. 4, regulador ou médium.
Placeholder não deve ser «sereia do ar» - objetivo 3:1 para o fundo, visivelmente diferente do texto.
Erros/sucesso/texto help 12-14 px; não se baseie apenas na cor (ícone/texto).

8) Temas escuros/claros

Em temas escuros, evite # FFF em # 000: levante o fundo para L≈0. 14–0. 18 e baixe o texto para L≈0. 9 - menos blitzes.
Entrelinha em dark pode estar em + 0. 05 acima para conforto.
Links/acentos em dark - Reduza a saturação e aumente a luminosidade em 0. 02–0. 04.

9) Localização e multi-linguagem

Selecione famílias com total suporte a cirílico/latim/grego, marcas de ênfase e moedas.
SE: espelhos de ícone/alinhamento, mas não números e laticínios; Teste as transferências.
Ativas automáticas ('hyphens: auto') apenas em áreas de conteúdo longas; botões UI - Proibir transferência.
Para a Turquia/Azerbaijão, verifique os formulários «İ/ı».
Para georgiano e tailandês, aumente o quegle básico em 1 px (características de desenho).

10) Disponibilidade (A11y)

Contraste de texto: Consulte parágrafo 2.
Os estilos de foco são visíveis sem cores: underline, moldura, sombra, deslocamento.
O tamanho da fonte é escalado de sistema (suporte a OS text size).
Não codifique o significado apenas através da cor/peso - adicione assinaturas e ícones explícitos.

11) Carregar fontes e performance

Os objetivos são minimizar os bloqueios, fornecer FOUT previsível e CLS estável.

Subconjeitos (subset): latim, cirílico, números/caracteres - arquivos individuais.
Formatos: 'woff2' (principal), 'woff' como fallback.
'fonte-display: swap' (ou 'optional' para famílias secundárias).

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

Fonte variável em vez de 3-4 estáticos - muitas vezes mais vantajoso em peso.
Orçamento: ≤ 150-200 KB total para caminho crítico (após gzip/brotli).
Render: evite as múltiplas sombras/máscaras no texto; use os efeitos do sistema de forma econômica.

12) Tikens tipográficos (sistema de design)

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) Cabeçalho e ritmo

Módulo 8-pt vertical; distância entre parágrafos = 1 x etapa básica.
Listas: o recuo do marcador está alinhado na linha de base do texto.
Botões e campos - As alturas são múltiplas da linha da grade básica (por exemplo, 40/48/56 px).

14) Especificidades do iGaming (seminário)

Coeficientes/probabilidades, balanços, temporizadores - use números tabular, monossirina em colunas críticas.
Líderes/classificações: alinhamento por descarga, formato único de moedas, «↑/↓» explícitos.
Notificações responsáveis (18 +, limites, riscos) - mínimo AAA em contraste, não usar ALL CAPS.
Banners promocionais: texto apenas em pranques/overleads com controle de contraste.

15) Anti-pattern

Light/Thin em pequenos calçados.
Texto cinzento em fundo colorido sem controle de contraste.
Dois ou mais «para a beleza».
Linhas longas (> 90 caracteres) e line-height denso <1. 35.
Números de largura proporcional nas tabelas/quantias «baixáveis».
Transferências forçadas em botões/editoras.

16) Folha de cheque com ciúmes

Leitura

• Body 16-18 px; LH ≥ 1. 45.
• Comprimento de linha de 45 a 80 caracteres.

Hierarquia

• Escala com passo ≥ 12%; os recuos estão alinhados com a malha.

Números/tabelas

• Tabular-nums para somas/coeficientes; alinhamento decimal.

Disponibilidade

• O contraste pelo WCAG foi alcançado; os estilos de foco são visíveis sem cor.

Performance

• Subset/woff2; `font-display: swap`; orçamento de 200 KB.

Localização

• Apoio ao cirílico/laticínio/RENAULT; As transições/diacríticas foram testadas.

17) A/B e métricas

Teste: CTA, barra de cabeçalho, peso CTA, entrelinha.
Mede: read time, scroll depth, CTR CTA, erros de formulário, CLS (estabilidade do texto).

Resumo curto

Tipografia é um esqueleto de interface. Defina uma escala previsível, mantenha o contraste e o ritmo, use fontes variáveis e números tabulares, otimize o download. Então a UI vai ser lido rapidamente, trabalhar estável e escalar sob temas e línguas.