> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Escala Tipográfica

> Variáveis de tamanho de fonte e peso relativas ao tamanho base configurado no tema.

Os tamanhos são definidos em `rem` relativos ao `--fonts-texts-size` configurado no tema (padrão `14px`). Use sempre essas variáveis em vez de valores fixos em `px` para manter consistência tipográfica entre temas.

## Tamanhos de fonte

| Variável    | Equivalente (base 14px) |
| :---------- | :---------------------: |
| `--font-10` |           10px          |
| `--font-11` |           11px          |
| `--font-12` |           12px          |
| `--font-13` |           13px          |
| `--font-14` |       14px (base)       |
| `--font-15` |           15px          |
| `--font-16` |           16px          |
| `--font-17` |           17px          |
| `--font-18` |           18px          |
| `--font-20` |           20px          |
| `--font-21` |           21px          |
| `--font-22` |           22px          |
| `--font-24` |           24px          |
| `--font-25` |           25px          |
| `--font-27` |           27px          |
| `--font-28` |           28px          |
| `--font-30` |           30px          |
| `--font-48` |           48px          |

## Pesos de fonte

Resolvidos automaticamente com base na fonte escolhida (`fonts_texts_family`), pois nem todas as fontes suportam todos os pesos.

| Variável         | Descrição                              |
| :--------------- | :------------------------------------- |
| `--font-regular` | Peso regular da fonte de textos.       |
| `--font-medium`  | Peso médio da fonte de textos.         |
| `--font-bold`    | Peso negrito da fonte de textos.       |
| `--font-black`   | Peso extra-negrito da fonte de textos. |

## Exemplo de uso

```scss theme={"system"}
.meu-titulo {
    font-size: var(--font-24);
    font-weight: var(--font-bold);
    font-family: var(--fonts-titles-family);
}

.meu-texto {
    font-size: var(--font-14);
    font-weight: var(--font-regular);
    font-family: var(--fonts-texts-family);
}
```