45 casos de teste

Tipografia

A tipografia é o tecido invisível que sustenta todo o conteúdo de uma interface: títulos, parágrafos, botões, rótulos de formulários, mensagens de estado. Uma regressão tipográfica raramente provoca um crash, mas degrada a legibilidade, quebra a hierarquia visual e faz perder horas relendo relatórios de incidentes de usuário. Em um dashboard de negócio, um título que pula para duas linhas desloca todos os indicadores abaixo; em uma página de produto, um rótulo de preço cujo peso muda pode sugerir uma promoção que não existe. As causas típicas são conhecidas: atualização de uma dependência npm que quebra o import de uma fonte web, mudança da variável --font-family em um design system, modificação de um line-height global para melhorar a legibilidade de uma única página, introdução de um text-wrap balance que recompõe as linhas, ou simples esquecimento de fallback para uma família de fontes custom. As variações de font-weight entre 600 e 700 conforme os sprints continuam sendo uma fonte clássica de drift tipográfico, sobretudo quando vários desenvolvedores intervêm sem uma diretriz estrita. O Delta-QA integra essas questões em sua lógica de comparação: a ferramenta não se contenta em verificar que um texto está presente, ela compara a renderização pixel a pixel e detecta qualquer mudança de espessura, espaçamento, altura de linha ou fallback de fonte. As capturas de referência servem de baseline tipográfica estável, e cada nova execução evidencia os deslocamentos de texto, os títulos que pulam de linha, os transbordamentos e as variações de peso entre versões. Essa abordagem permite às equipes de QA validar um redesign de design system ou uma atualização de framework via teste visual sem reler manualmente cada tela.

O que detectamos

1

Mudanças de família tipográfica

Detecta quando uma fonte alternativa renderiza em vez da principal, ou quando as declaracoes font-family mudam.

2

Peso e estilo

Captura variações de peso (400 vs 500, bold vs semibold) e mudanças de estilo (itálico, oblíquo).

3

Tamanho e escala

Rastreia mudanças de font-size em px, rem, em e unidades viewport, incluindo clamp() e tipografia fluida.

4

Altura de linha e ritmo vertical

Monitora ajustes de line-height que podem perturbar o ritmo vertical e o fluxo geral das páginas.

5

Espaçamento de letras e palavras

Detecta mudanças em letter-spacing e word-spacing que afetam a densidade e legibilidade do texto.

6

Decoração e transformação

Identifica modificações em sublinhados, tachados, text-transform (maiúsculas/minúsculas) e text-overflow.

Exemplo interativo

Veja exatamente o que o Delta-QA detecta. Compare as duas versões lado a lado.

Antes
Depois

Cenários reais

🎯

A fonte que para de carregar

Um desenvolvedor roda npm update e quebra o import da fonte Inter sem saber. O navegador muda silenciosamente para Arial. Os espaçamentos mudam, alguns títulos pulam para duas linhas, um botão transborda seu container — todo o layout fica sutilmente desalinhado. A mudança parecia inofensiva (uma atualização de dependências), foi mergeada sem revisão visual. Delta-QA compara as capturas das duas versões e destaca cada deslocamento de texto, cada título que pula de linha e cada transbordamento causado pela troca de fonte.

⚠️

O line-height que quebra os cards de produto

Um desenvolvedor altera o line-height global para melhorar a legibilidade do blog. Efeito colateral: os títulos de produto que cabiam em uma linha agora ocupam duas no catalogo. Os cards não tem mais a mesma altura, o grid fica irregular — um catalogo "torto" que inspira menos confiança. O QA verificou o blog (a página modificada), não o catalogo que usa os mesmos estilos globais. Delta-QA compara as capturas e destaca cada card cuja altura mudou — os desalinhamentos no grid saltam a vista imediatamente.

💡

O font-weight invisível

O designer definiu um font-weight semi-bold (600) para os cabeçalhos. Ao longo de vários sprints, diferentes desenvolvedores usam ora 600, ora 700. Resultado: alguns cabeçalhos são visivelmente mais grossos que outros na mesma página. A hierarquia visual fica inconsistente — um título de seção parece mais importante que outro sem motivo. O designer nunca foi notificado dessas mudanças graduais. Delta-QA compara as capturas e destaca as variações de espessura entre cabeçalhos — os títulos mais pesados se destacam na sobreposição.

Pronto para detectar toda regressão visual?

Baixe o Delta-QA e comece a detectar mudanças CSS nas suas páginas web — sem código.