Intro
Os Parágrafos representam o principal bloco de leitura contínua da interface. São responsáveis por transmitir conteúdo explicativo, contextual, instrucional ou informativo.
Eles sustentam a narrativa textual da experiência e devem garantir:
- Leitura confortável
- Ritmo visual consistente
- Clareza informacional
- Hierarquia complementar aos títulos
No Design System, o parágrafo é considerado o nível base da tipografia de corpo.
Papel na Hierarquia
Os parágrafos estão posicionados:
- Abaixo de títulos
- Após subtítulos
- Entre listas
- Dentro de componentes
Eles nunca substituem títulos e não devem assumir função estrutural.
Estrutura Semântica
Estrutura correta:
<p>Conteúdo textual do parágrafo.</p>
Regras:
- Não usar
<div>para texto corrido - Não usar
<br>para criar espaçamento - Não quebrar parágrafo apenas por estética
A semântica deve sempre ser preservada.
Comprimento Ideal de Linha
Padrão recomendado:
Entre 60 e 80 caracteres por linha
Essa faixa garante:
- Melhor legibilidade
- Menor fadiga visual
- Ritmo natural de leitura
- Melhor desempenho em escaneabilidade
Por que evitar linhas muito curtas?
- Interrupção constante do fluxo
- Leitura fragmentada
- Ritmo irregular
Por que evitar linhas muito longas?
- Dificuldade de retorno ao início da linha
- Aumento de esforço cognitivo
- Perda de foco
Comprimento de Bloco
Ideal
- 2 a 5 linhas por parágrafo
- Texto objetivo
- Frases diretas
Evitar
- Blocos extensos sem subdivisão
- Texto excessivamente técnico
- Frases longas e complexas
Quando necessário, dividir em:
- Subtítulos
- Listas
- Blocos destacados
Escala Tipográfica
Regras adicionais:
- Line-height entre 1.4 e 1.6
- Espaçamento inferior consistente
- Ritmo vertical alinhado aos títulos
Tipos de Parágrafo
Parágrafo Padrão
Uso principal da interface.
Aplicação:
- Conteúdo institucional
- Descrições
- Explicações
Parágrafo Secundário
Informação complementar.
Aplicação:
- Metadados
- Observações
- Contexto adicional
Pode usar cor mais sutil, mas mantendo contraste acessível.
Parágrafo Destaque
Usado para reforçar uma informação importante, sem substituir um título.
Boas Práticas
✅ Faça
- Mantenha 60–80 caracteres por linha
- Use linguagem clara
- Priorize voz ativa
- Divida textos longos
- Utilize listas quando apropriado
❌ Não Faça
- Não use parágrafo como título
- Não alinhe texto justificado se comprometer leitura
- Não utilize caixa alta excessiva
- Não compacte line-height
- Não ultrapasse largura ideal
Responsividade
Em telas menores:
- Reduzir tamanho proporcionalmente
- Manter proporção de 60–80 caracteres sempre que possível
- Evitar blocos comprimidos
Acessibilidade
- Contraste mínimo 4.5:1
- Espaçamento adequado
- Legibilidade garantida em zoom 200%
- Não depender apenas de cor para destaque
Relação com Hierarquia
Parágrafos:
- Complementam títulos
- Introduzem listas
- Explicam ações
- Estruturam leitura
Nunca devem competir visualmente com níveis de título.
Resumo
O padrão de 60 a 80 caracteres por linha é essencial
para manter legibilidade, conforto visual e fluidez de leitura.
Parágrafos bem estruturados:
- Reduzem esforço cognitivo
- Melhoram compreensão
- Aumentam eficiência de leitura
- Fortalecem a hierarquia do Design System