# Tipografia

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Escolha estilos pela função (display, heading, body, label, caption, mono), não pelo tamanho. Todos os text styles são ligados a tokens tipográficos: mudar um token atualiza todos os estilos.

## Famílias

| Token | Família | Uso | Não usar |
| --- | --- | --- | --- |
| `font/family/sans` | Geist | Principal. Toda a interface: títulos, texto corrido, labels, navegação. | - |
| `font/family/mono` | JetBrains Mono | Complementar e técnica: código, IDs, valores, datas, números tabulares, metadados e overlines. | Títulos, body, UI regular e textos corridos. Não converter textos Geist para mono. |

Carregamento (Google Fonts):

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

## Tokens tipográficos

| Tamanho | px | Altura de linha | px |
| --- | --- | --- | --- |
| `--midas-font-size-xs` | 12 | `--midas-font-line-height-xs` | 16 |
| `--midas-font-size-sm` | 14 | `--midas-font-line-height-sm` | 20 |
| `--midas-font-size-md` | 16 | `--midas-font-line-height-md` | 24 |
| `--midas-font-size-lg` | 18 | `--midas-font-line-height-lg` | 28 |
| `--midas-font-size-xl` | 20 | `--midas-font-line-height-xl` | 32 |
| `--midas-font-size-2xl` | 24 | `--midas-font-line-height-2xl` | 36 |
| `--midas-font-size-3xl` | 30 | `--midas-font-line-height-3xl` | 40 |
| `--midas-font-size-4xl` | 36 | `--midas-font-line-height-4xl` | 56 |
| `--midas-font-size-5xl` | 48 | `--midas-font-line-height-5xl` | 72 |
| `--midas-font-size-6xl` | 64 | - | - |

| Peso | Valor |
| --- | --- |
| `--midas-font-weight-regular` | 400 |
| `--midas-font-weight-medium` | 500 |
| `--midas-font-weight-semibold` | 600 |

| Tracking | Valor |
| --- | --- |
| `--midas-tracking-tight` | -1px |
| `--midas-tracking-normal` | 0px |
| `--midas-tracking-wide` | 1px |

## Text styles (16)

| Estilo | Especificação | Variável CSS | Uso | Exemplo |
| --- | --- | --- | --- | --- |
| `display/lg` | Geist SemiBold · 64/72 · -1px | `--midas-text-display-lg` | Hero e números de destaque em landing/onboarding. Máx. 1 por tela. | Aprender transforma |
| `display/md` | Geist SemiBold · 48/56 · -1px | `--midas-text-display-md` | Títulos de destaque em páginas de marketing ou vazias. | Aprender transforma |
| `heading/xl` | Geist SemiBold · 30/36 | `--midas-text-heading-xl` | Título de página. | Trilha de investimentos |
| `heading/lg` | Geist SemiBold · 24/32 | `--midas-text-heading-lg` | Título de seção principal. | Trilha de investimentos |
| `heading/md` | Geist SemiBold · 20/28 | `--midas-text-heading-md` | Título de card, dialog e subseção. | Trilha de investimentos |
| `heading/sm` | Geist SemiBold · 18/28 | `--midas-text-heading-sm` | Título de grupo e cabeçalho de lista. | Trilha de investimentos |
| `body/lg` | Geist Regular · 18/28 | `--midas-text-body-lg` | Texto corrido de leitura longa e introduções. | Avance no seu ritmo com conteúdos práticos. |
| `body/md` | Geist Regular · 16/24 | `--midas-text-body-md` | Texto corrido padrão. | Avance no seu ritmo com conteúdos práticos. |
| `body/sm` | Geist Regular · 14/20 | `--midas-text-body-sm` | Texto de apoio, descrições e células de tabela. | Avance no seu ritmo com conteúdos práticos. |
| `label/lg` | Geist Medium · 16/24 | `--midas-text-label-lg` | Labels de controles L/XL e navegação principal. | Avance no seu ritmo com conteúdos práticos. |
| `label/md` | Geist Medium · 14/20 | `--midas-text-label-md` | Labels padrão de botões, campos, tabs e menus. | Avance no seu ritmo com conteúdos práticos. |
| `label/sm` | Geist Medium · 12/16 | `--midas-text-label-sm` | Labels compactos: badges, chips XS/S, legendas de gráfico. | Avance no seu ritmo com conteúdos práticos. |
| `caption` | Geist Regular · 12/16 | `--midas-text-caption` | Texto auxiliar: helper text, timestamps em texto, notas. | Avance no seu ritmo com conteúdos práticos. |
| `mono/overline` | JetBrains Mono Medium · 12/16 · 1px · caixa alta | `--midas-text-mono-overline` | Eyebrow/overline técnico em caixa alta. JetBrains Mono. | Módulo 03 · Atualizado |
| `mono/sm` | JetBrains Mono Regular · 12/16 | `--midas-text-mono-sm` | Metadados compactos: IDs, datas, códigos curtos. JetBrains Mono. | ID 8F2A-91C · 07/10/2026 |
| `mono/md` | JetBrains Mono Regular · 14/20 | `--midas-text-mono-md` | Números, valores técnicos e trechos de código. JetBrains Mono. | R$ 1.249,90 · 87,5% |

A variável `--midas-text-*` é um atalho `font` (peso, tamanho/altura de linha, família). Tracking vem em `--midas-text-<estilo>-tracking` quando diferente de zero (display e mono/overline).

```css
.titulo {
  font: var(--midas-text-heading-lg);
}

.hero {
  font: var(--midas-text-display-lg);
  letter-spacing: var(--midas-text-display-lg-tracking);
}

.eyebrow {
  font: var(--midas-text-mono-overline);
  letter-spacing: var(--midas-text-mono-overline-tracking);
  text-transform: uppercase;
}
```

## Regras

- Máximo de 1 display por tela.
- Pesos usados: regular (400), medium (500) e semibold (600). Não use bold.
- JetBrains Mono só para código, IDs, valores, datas, números tabulares, metadados e overlines. Nunca em títulos, body ou texto corrido, e não converta texto Geist para mono.
- Texto corrido nunca passa de 8 colunas no desktop (cerca de 70 caracteres por linha).