# Tipografia

Open Sans como preferência tipográfica, com fallback de sistema e sem dependência remota no runtime.

## Como usar

Use as classes utilitárias do Tailwind diretamente nos elementos. Para responsividade, aplique `md:text-*` ou `lg:text-*` quando o tamanho mobile diferir do desktop.

Família

Open Sans quando disponível localmente ou servida pelo consumidor. Aliases `font-heading` e `font-body` apontam para `font-sans`.

Escala

Padrão Tailwind v4 em rem. `text-base` = 16px.

Pesos

Regular 400, Semibold 600 e Bold 700 — todos com itálico.

## Família tipográfica

Uma única família tipográfica. Aliases semânticos preservam uma futura combinação de display e corpo sem refatorar componentes.

AaBbCc 0123

Open Sans se disponível · fallback seguro do sistema

Execução `sem fonte remota`

`font-sans` string

Open Sans / fallback do sistema

resolve para

`font-sans` `--font-sans`

`font-heading` alias → `font-sans`

Open Sans / fallback do sistema

resolve para

`font-heading` `--font-heading`

`font-body` alias → `font-sans`

Open Sans / fallback do sistema

resolve para

`font-body` `--font-body`

## Tamanho de fonte

Escala Tailwind v4 em rem. Cada linha mostra uma amostra renderizada e o valor canônico.

Sinapse

`text-xs`

0.75rem · 12px · altura de linha 1rem

`text-xs`

Sinapse

`text-sm`

0.875rem · 14px · altura de linha 1.25rem

`text-sm`

Sinapse

`text-base`

1rem · 16px · altura de linha 1.5rem

`text-base`

Sinapse

`text-lg`

1.125rem · 18px · altura de linha 1.75rem

`text-lg`

Sinapse

`text-xl`

1.25rem · 20px · altura de linha 1.75rem

`text-xl`

Sinapse

`text-2xl`

1.5rem · 24px · altura de linha 2rem

`text-2xl`

Sinapse

`text-3xl`

1.875rem · 30px · altura de linha 2.25rem

`text-3xl`

Sinapse

`text-4xl`

2.25rem · 36px · altura de linha 2.5rem

`text-4xl`

Sinapse

`text-5xl`

3rem · 48px · altura de linha 1

`text-5xl`

Sinapse

`text-6xl`

3.75rem · 60px · altura de linha 1

`text-6xl`

Sinapse

`text-7xl`

4.5rem · 72px · altura de linha 1

`text-7xl`

Sinapse

`text-8xl`

6rem · 96px · altura de linha 1

`text-8xl`

Sinapse

`text-9xl`

8rem · 128px · altura de linha 1

`text-9xl`

## Tipografia fluida

Use `clamp()` via valores arbitrários do Tailwind quando um título display precisa escalar com o viewport. Para texto de corpo e componentes reutilizáveis, prefira a escala Tailwind fixa em `rem`.

### Use em títulos display

Aplique quando o título precisa responder ao viewport, como heróis, cabeçalhos editoriais e páginas de documentação.

### Mantenha limites em rem

Defina mínimo e máximo em rem para preservar zoom, preferências do usuário e escala tipográfica previsível.

### Evite em UI compacta

Botões, inputs, badges, tabelas, navegação e cards repetidos devem continuar na escala Tailwind fixa.

Fundamentos

Título de página

`text-[clamp(2.5rem,5vw,4rem)] leading-[1.05] tracking-tight` `text-[clamp(2.5rem,5vw,4rem)] leading-[1.05] tracking-tight`

Sinapse

Hero editorial

`text-[clamp(3rem,7vw,5rem)] leading-none tracking-tight` `text-[clamp(3rem,7vw,5rem)] leading-none tracking-tight`

Princípios para interfaces claras e acessíveis.

Subtítulo amplo

`text-[clamp(1.125rem,2vw,1.5rem)] leading-relaxed` `text-[clamp(1.125rem,2vw,1.5rem)] leading-relaxed`

Regra de acessibilidade

Não use `clamp()` para impedir quebra de linha, zoom ou aumento de texto. Se o texto precisa permanecer legível em UI operacional, use classes como `text-sm`, `text-base` e breakpoints explícitos como `md:text-lg`.

## Peso de fonte

Três pesos, todos com itálico.

Sinapse

`font-normal`

peso 400 · Regular

`font-normal`

Sinapse

`font-semibold`

peso 600 · Semibold

`font-semibold`

Sinapse

`font-bold`

peso 700 · Bold

`font-bold`

## Estilo de fonte

Itálico em 3 pesos. `italic-semibold` e `italic-bold` são `@utility` customizadas que compõem `italic` + peso.

Sinapse

`italic`

itálico + peso 400 · Itálico

`italic`

Sinapse

`italic-semibold`

itálico + peso 600 · Semibold itálico

`italic-semibold`

Sinapse

`italic-bold`

itálico + peso 700 · Bold itálico

`italic-bold`

## Espaçamento entre letras

Baseado em `em`, portanto escala junto com o tamanho da fonte.

Sinapse

`tracking-tight`

\-0.025em

`tracking-tight`

Sinapse

`tracking-normal`

0em

`tracking-normal`

Sinapse

`tracking-wide`

0.025em

`tracking-wide`

## Exemplos de uso

Título

```html
<h1 class="font-heading
  text-4xl font-bold
  tracking-tight">
  Título principal
</h1>
```

Corpo responsivo

```html
<p class="font-body
  text-sm md:text-base
  text-muted-foreground">
  Texto menor no mobile
</p>
```

Itálico semibold

```html
<em class="italic-semibold
  text-base text-foreground">
  Ênfase tipográfica
</em>
```

Copiado