Typography
A tipografia organiza a leitura e cria hierarquia visual nas interfaces. Esta página reúne os estilos, tamanhos e regras aprovadas para uso consistente.
15px ou font-weight: 550. Use os estilos de texto documentados na seção Fontes.Boas Práticas
Fontes
Biblioteca oficial de estilos tipográficos utilizados no sistema.
font-family
| Name | Value |
|---|---|
| Roboto |
font-size
| Name | Value |
|---|---|
| 12 | |
| 14 | |
| 16 | |
| 18 | |
| 20 | |
| 24 | |
| 30 | |
| 36 | |
| 48 | |
| 60 | |
| 72 | |
| 96 | |
| 128 |
line-height
| Name | Value |
|---|---|
| text-xs | 16 |
| text-sm | 20 |
| text-base | 24 |
| text-lg | 28 |
| text-xl | 28 |
| text-2xl | 32 |
| text-3xl | 36 |
| text-4xl | 40 |
| text-5xl | 48 |
| text-6xl | 60 |
| text-7xl | 72 |
| text-8xl | 96 |
| text-9xl | 128 |
font-weight
| Name | Value |
|---|---|
| 100 | |
| 200 | |
| 300 | |
| 400 | |
| 500 | |
| 600 | |
| 700 | |
| 800 | |
| 900 | |
| italic |
Escala visual
| Token | Regular | Medium | Semibold | Bold | Italic |
|---|---|---|---|---|---|
| text-xs | text-xs Font Size: 0.75rem | Line Height: 1rem | text-xs Font Size: 0.75rem | Line Height: 1rem | text-xs Font Size: 0.75rem | Line Height: 1rem | text-xs Font Size: 0.75rem | Line Height: 1rem | text-xs Font Size: 0.75rem | Line Height: 1rem |
| text-sm | text-sm Font Size: 0.875rem | Line Height: 1.25rem | text-sm Font Size: 0.875rem | Line Height: 1.25rem | text-sm Font Size: 0.875rem | Line Height: 1.25rem | text-sm Font Size: 0.875rem | Line Height: 1.25rem | text-sm Font Size: 0.875rem | Line Height: 1.25rem |
| text-base | text-base Font Size: 1rem | Line Height: 1.5rem | text-base Font Size: 1rem | Line Height: 1.5rem | text-base Font Size: 1rem | Line Height: 1.5rem | text-base Font Size: 1rem | Line Height: 1.5rem | text-base Font Size: 1rem | Line Height: 1.5rem |
| text-lg | text-lg Font Size: 1.125rem | Line Height: 1.75rem | text-lg Font Size: 1.125rem | Line Height: 1.75rem | text-lg Font Size: 1.125rem | Line Height: 1.75rem | text-lg Font Size: 1.125rem | Line Height: 1.75rem | text-lg Font Size: 1.125rem | Line Height: 1.75rem |
| text-xl | text-xl Font Size: 1.25rem | Line Height: 1.75rem | text-xl Font Size: 1.25rem | Line Height: 1.75rem | text-xl Font Size: 1.25rem | Line Height: 1.75rem | text-xl Font Size: 1.25rem | Line Height: 1.75rem | text-xl Font Size: 1.25rem | Line Height: 1.75rem |
| text-2xl | text-2xl Font Size: 1.5rem | Line Height: 2rem | text-2xl Font Size: 1.5rem | Line Height: 2rem | text-2xl Font Size: 1.5rem | Line Height: 2rem | text-2xl Font Size: 1.5rem | Line Height: 2rem | text-2xl Font Size: 1.5rem | Line Height: 2rem |
| text-3xl | text-3xl Font Size: 1.875rem | Line Height: 2.25rem | text-3xl Font Size: 1.875rem | Line Height: 2.25rem | text-3xl Font Size: 1.875rem | Line Height: 2.25rem | text-3xl Font Size: 1.875rem | Line Height: 2.25rem | text-3xl Font Size: 1.875rem | Line Height: 2.25rem |
| text-4xl | text-4xl Font Size: 2.25rem | Line Height: 2.5rem | text-4xl Font Size: 2.25rem | Line Height: 2.5rem | text-4xl Font Size: 2.25rem | Line Height: 2.5rem | text-4xl Font Size: 2.25rem | Line Height: 2.5rem | text-4xl Font Size: 2.25rem | Line Height: 2.5rem |
| text-5xl | text-5xl Font Size: 3rem | Line Height: 3rem | text-5xl Font Size: 3rem | Line Height: 3rem | text-5xl Font Size: 3rem | Line Height: 3rem | text-5xl Font Size: 3rem | Line Height: 3rem | text-5xl Font Size: 3rem | Line Height: 3rem |
| text-6xl | text-6xl Font Size: 3.75rem | Line Height: 3.75rem | text-6xl Font Size: 3.75rem | Line Height: 3.75rem | text-6xl Font Size: 3.75rem | Line Height: 3.75rem | text-6xl Font Size: 3.75rem | Line Height: 3.75rem | text-6xl Font Size: 3.75rem | Line Height: 3.75rem |
| text-7xl | text-7xl Font Size: 4.5rem | Line Height: 4.5rem | text-7xl Font Size: 4.5rem | Line Height: 4.5rem | text-7xl Font Size: 4.5rem | Line Height: 4.5rem | text-7xl Font Size: 4.5rem | Line Height: 4.5rem | text-7xl Font Size: 4.5rem | Line Height: 4.5rem |
| text-8xl | text-8xl Font Size: 6rem | Line Height: 6rem | text-8xl Font Size: 6rem | Line Height: 6rem | text-8xl Font Size: 6rem | Line Height: 6rem | text-8xl Font Size: 6rem | Line Height: 6rem | text-8xl Font Size: 6rem | Line Height: 6rem |
| text-9xl | text-9xl Font Size: 8rem | Line Height: 8rem | text-9xl Font Size: 8rem | Line Height: 8rem | text-9xl Font Size: 8rem | Line Height: 8rem | text-9xl Font Size: 8rem | Line Height: 8rem | text-9xl Font Size: 8rem | Line Height: 8rem |
Regras de aplicação
Cada estilo possui tamanhos e alturas de linha definidos. Utilize o peso conforme a função do texto. A aplicação segue regras específicas de cada interface e componente, garantindo consistência e hierarquia visual.
Exemplos de uso
Os componentes do sistema já consomem a escala tipográfica. Quando montar algo customizado, combine tamanho e peso dos tokens documentados.
<h1 class="text-2xl font-semibold">Título de página</h1>
<h2 class="text-lg font-semibold">Título de seção</h2>
<p class="text-sm font-normal">Corpo de texto — padrão do sistema.</p>
<span class="text-xs font-medium">Label ou metadado</span>
<em class="text-sm italic">Ênfase editorial</em>