Sistema de Layout de Artigos

O que Sistema de Layout de Artigos faz?

Propósito

O Sistema de Layout de Artigos fornece uma metodologia para projetar a "experiência de leitura" — a disposição específica de texto e mídia de apoio para conteúdo de formato longo, como blogs, documentações, white papers e estudos de caso. Enquanto o section-composition-system lida com o fluxo no nível da página, este sistema foca em legibilidade, comprimento de linha (medida), ritmo vertical e a relação espacial entre texto e elementos editoriais (imagens, citações, blocos de código). Ele garante que os usuários possam consumir grandes quantidades de informação sem fadiga visual.

Casos de Uso

• Projetar modelos de posts de blog e páginas de artigo.
• Estruturar documentação técnica e bases de conhecimento.
• Criar conteúdo editorial de formato longo ou revistas digitais.
• Desenvolver "Modos de Leitura" ou visualizações de texto focadas em acessibilidade.
• Organizar conteúdo educacional onde a retenção de informação é o objetivo.

Quando NÃO Usar

• Páginas de Alto Impacto (Landing Pages): Onde o objetivo é escanear benefícios e CTAs rápidos; use o section-composition-system.
• Dashboards: Onde a densidade de dados e comparação são priorizadas em vez da leitura linear; use o data-table-ui-system.
• Formulários e Visualizações com muitos inputs: Use o form-design-system.
• Visualizações "App" em uma única viewport: Onde o conteúdo é secundário em relação a ferramentas funcionais.

Entradas

1. Arquétipo de Conteúdo: Este é um tutorial técnico (com muitos códigos), uma história narrativa (com muitas imagens) ou um white paper formal?
2. Sistema Tipográfico: Os tamanhos de fonte base e escalas definidas no fluid-typography-system.
3. Ambiente de Leitura: Será lido principalmente em dispositivos móveis (sem distrações) ou desktop (contexto de várias colunas)?
4. Mapa de Hierarquia: A estrutura lógica do conteúdo (H1, H2, H3, Corpo, Legendas).

Saídas

1. A Especificação do "Golden Container": Larguras máximas definidas para o texto, garantindo um comprimento de linha ideal.
2. Mapa de Ritmo Vertical: Um sistema de margens e preenchimentos que cria espaçamento previsível entre parágrafos e títulos.
3. Blueprint de Componentes Editoriais: Regras visuais para Pull Quotes, Notas Laterais, Chamadas de Mídia e Índice.
4. Mapa de Leitura Responsivo: Como os tamanhos de fonte e alturas de linha se ajustam para manter a legibilidade em diferentes larguras de tela.

Fluxo de Trabalho

1. Definir o "Golden Container" (A Medida)

O fator mais crítico para a legibilidade é o número de caracteres por linha:

• Faixa Ideal: 45 a 75 caracteres (incluindo espaços).
• Implementação no Desktop: Geralmente se traduz em um max-width entre 600px e 800px, ou simplesmente max-width: 75ch — a unidade ch acompanha a largura real do caractere da fonte, portanto permanece correta em diferentes tipos de letra.
• Dimensionamento Fluido: Use clamp() para títulos e texto do corpo (por exemplo, font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem)) para que o tipo escale com a viewport em vez de saltar em pontos de quebra.
• Centralização: Centralize o container para reduzir o cansaço visual causado por movimentos amplos da cabeça.

2. Estabelecer Entrelinha e Ritmo Vertical

A altura da linha (entrelinha) e o espaçamento entre blocos criam "espaço para respirar":

• Entrelinha Base: Mire em 1.5 a 1.6 para o texto do corpo. Aumente para fontes menores ou mais complexas.
• A "Proporção de Espaçamento": Use um sistema de espaçamento consistente (por exemplo, 2x ou 3x a margem base) para lacunas antes dos títulos, e uma lacuna menor (por exemplo, 1x) após os títulos.
• Espaçamento entre Parágrafos: Use margens inferiores (margin-bottom) em vez de recuos para separar parágrafos em layouts web.

3. Projetar "Quebras" Editoriais

Evite a fadiga do "Muro de Texto" introduzindo variedade visual:

• Pull Quotes: Texto maior e estilizado que destaca insights principais.
• Notas Laterais/Chamadas: Caixas distintamente estilizadas (geralmente com fundo claro ou borda) para informações secundárias.
• Imagens/Mídia: Defina regras para mídia "Contida" (inline), "Ampla" (quebrando a largura do container) e "Sangrada".
• Quebra de Título: Aplique text-wrap: balance em títulos e pull quotes (com um fallback para navegadores não suportados) para evitar palavras solitárias na última linha.

4. Construir Navegação e Orientação

Ajude os usuários a gerenciar conteúdo longo:

• Índice (TOC): Para artigos com mais de 1.000 palavras, forneça um TOC fixo no desktop ou um TOC recolhível no celular.
• Indicador de Progresso: Uma barra sutil ou indicador percentual para mostrar quanto conteúdo resta.
• Tempo de Leitura: Forneça uma estimativa "X min de leitura" no topo para definir as expectativas do usuário.

5. Planejar Mudanças Tipográficas Responsivas

Mantenha a legibilidade conforme a tela diminui:

• Conforto Mobile: Em telas pequenas, reduza o preenchimento horizontal, mas mantenha o comprimento da linha confortável.
• Verificação de Contraste: Garanta que chamadas com fundo colorido ou interruptores de modo escuro mantenham o contraste WCAG AA.

Regras de Decisão

• A Regra do Caractere: Se uma linha de texto exceder 80 caracteres, está muito larga. Se tiver menos de 40, está muito estreita. Ajuste o container.
• Proximidade do Título: Um título deve estar sempre mais próximo do conteúdo que introduz do que do conteúdo que o precede (Princípio da Proximidade).
• Lógica de Largura da Mídia: Use imagens "Contidas" para detalhes técnicos e imagens "Amplas" ou "Sangradas" para mudanças atmosféricas ou narrativas.
• O "Teste do Aperto de Olhos" para o Ritmo: Aperte os olhos para a página; você deve ver "blocos" distintos de texto separados por espaços em branco claros e consistentes.

Restrições

• Acessibilidade: O texto deve atender ao contraste WCAG AA (4.5:1). O tamanho da fonte nunca deve ser menor que 16px (1rem) para o texto do corpo.
• Responsividade: Os containers devem ser fluidos (use max-width em vez de width fixa). Para componentes dentro do artigo (chamadas, mídia incorporada) que precisam se adaptar ao seu próprio container em vez da viewport, use consultas de container (@container).
• Hierarquia: H1 deve ser o mais proeminente, mas o texto do corpo deve ser o mais confortável de ler.

Padrões Comuns de Falha

• O "Oceano Desktop": Texto que se estende por toda a largura de um monitor de 24 polegadas, tornando impossível para o olho encontrar a próxima linha.
• Texto Sufocante: Altura da linha muito apertada (por exemplo, 1.1 ou 1.2), fazendo com que ascendentes e descendentes colidam.
• Títulos Flutuantes: Títulos com espaçamento igual acima e abaixo, tornando pouco claro a qual seção pertencem.
• Mídia Inconsistente: Mistura de imagens alinhadas ao centro, alinhadas à esquerda e amplas sem um sistema lógico claro.
• O "Scroll Infinito": Nenhuma orientação ou indicador de progresso em um artigo de 5.000 palavras, levando ao abandono do usuário.

Critérios de Validação

• O comprimento da linha (medida) está entre 45 e 75 caracteres no desktop.
• A altura da linha (entrelinha) é de pelo menos 1.5 para o texto do corpo.
• O ritmo vertical agrupa claramente os títulos com seu conteúdo seguinte.
• Os elementos editoriais (citações, chamadas) são visualmente distintos do texto do corpo.
• O Índice ou orientação está presente para conteúdo de formato longo.
• A experiência de leitura é testada e otimizada para viewports móveis.
• As taxas de contraste para todo o texto atendem aos padrões WCAG AA.