Títulos

Os Títulos são elementos fundamentais para estabelecer hierarquia visual, estruturar conteúdo e orientar a leitura dentro da interface.

Eles organizam a informação em níveis claros de importância, permitindo que o usuário:

• Escaneie rapidamente a página
• Entenda a estrutura do conteúdo
• Identifique seções e subseções
• Navegue com previsibilidade

No Design System, os títulos seguem uma hierarquia padronizada baseada em níveis semânticos e tipográficos.

Princípios da Hierarquia

A hierarquia de títulos deve respeitar três princípios principais:

Clareza Estrutural

Cada nível deve representar uma subdivisão lógica do conteúdo.

Progressão Visual

A diferença entre níveis deve ser perceptível, mas consistente.

Semântica Correta

A estrutura deve respeitar a ordem HTML (h1 a h6), independentemente da estilização visual.

---

Escala de Títulos

Título Principal da Página

• Uso único por página
• Representa o assunto central
• Maior destaque visual
• Geralmente associado ao topo da interface

Exemplo de uso:

• Nome do sistema
• Título da seção principal

---

Título de Seção

• Divide grandes blocos de conteúdo
• Pode aparecer múltiplas vezes
• Representa agrupamentos primários

Exemplo:

• “Informações Gerais”
• “Dados do Usuário”

---

Sub-seção

• Subdivide o conteúdo do H2
• Estrutura interna

Exemplo:

• “Endereço”
• “Contato”

---

Agrupamentos Secundários

• Organização interna complementar
• Uso moderado

---

Títulos Contextuais

• Pequenos agrupamentos
• Uso em cards, modais, tabelas

---

Rótulos ou Microtítulos

• Uso pontual
• Subdivisão fina de conteúdo

---

Regras de Uso

Ordem Hierárquica

• Nunca pular níveis (ex: H1 → H3)
• Sempre seguir sequência lógica

Frequência

• Apenas 1 H1 por página
• Demais níveis conforme necessidade estrutural

Consistência

• O mesmo nível deve manter o mesmo estilo
• Não alterar visual sem alterar semântica

---

Hierarquia Visual vs Hierarquia Semântica

É possível:

• Usar estilo visual de H2 em um H3
• Ajustar tamanho via tokens

Mas nunca:

• Usar div para simular título
• Ignorar estrutura semântica

A semântica sempre deve prevalecer sobre estética.

Exemplo conceitual:

Nível	Peso	Destaque
H1	Bold	Máximo
H2	SemiBold	Alto
H3	SemiBold	Médio
H4	Medium	Moderado
H5	Medium	Leve
H6	Regular	Sutil

Boas Práticas

✅ Faça

• Use títulos para estruturar conteúdo
• Mantenha textos objetivos
• Use frase curta e clara
• Garanta contraste adequado
• Use espaçamento consistente abaixo do título

---

❌ Não Faça

• Não use título para estilização decorativa
• Não use caixa alta excessivamente
• Não escreva títulos longos
• Não quebre hierarquia lógica
• Não use múltiplos H1

Acessibilidade

• Usar elementos HTML corretos (h1–h6)
• Permitir navegação por leitores de tela
• Garantir contraste mínimo 4.5:1
• Não depender apenas de tamanho para indicar importância

Relação com Componentes

Os títulos podem estar presentes em:

• Cards
• Modais
• Tabelas
• Accordions
• Seções de página
• Layouts estruturais

Cada contexto pode adaptar tamanho, mas não a hierarquia.

Estrutura Recomendada de Página

Exemplo ideal:

H1 — Título da Página
  H2 — Seção
    H3 — Sub-seção
    H3 — Sub-seção
  H2 — Seção

Resumo

Os Títulos são o principal mecanismo de organização visual e estrutural da interface.

Eles garantem:

• Leitura eficiente
• Organização clara
• Navegação acessível
• Consistência sistêmica

Uma hierarquia bem aplicada melhora significativamente usabilidade, acessibilidade e compreensão do conteúdo.