45 casos de prueba

Tipografía

La tipografía es el tejido invisible que sostiene todo el contenido de una interfaz: títulos, párrafos, botones, etiquetas de formularios, mensajes de estado. Una regresión tipográfica rara vez provoca un crash, pero degrada la legibilidad, rompe la jerarquía visual y hace perder horas en revisar los reportes de incidentes de los usuarios. En un dashboard de negocio, un título que salta a dos líneas desplaza todos los indicadores debajo; en una ficha de producto, una etiqueta de precio cuyo peso cambia puede sugerir una promoción que no existe. Las causas típicas son conocidas: actualización de una dependencia npm que rompe el import de una fuente web, cambio de la variable --font-family en un design system, modificación de un line-height global para mejorar la legibilidad de una sola página, introducción de un text-wrap balance que recompone las líneas, u olvido del fallback para una familia de fuentes custom. Las desviaciones de font-weight entre 600 y 700 según los sprints siguen siendo una fuente clásica de drift tipográfico, sobre todo cuando varios desarrolladores intervienen sin una guía estricta. Delta-QA integra estas problemáticas en su lógica de comparación: la herramienta no se limita a verificar que un texto esté presente, compara el renderizado píxel a píxel y detecta cualquier cambio de grosor, espaciado, altura de línea o fallback de fuente. Las capturas de referencia sirven de baseline tipográfica estable, y cada nueva ejecución resalta los desplazamientos de texto, los títulos que saltan de línea, los desbordes y las variaciones de peso entre versiones. Este enfoque permite a los equipos QA validar un rediseño de design system o una actualización de framework sin releer manualmente cada pantalla.

Lo que detectamos

1

Cambios de familia tipográfica

Detecta cuando una fuente alternativa se renderiza en lugar de la principal, o cuando las declaraciones font-family cambian.

2

Peso y estilo

Captura variaciones de peso (400 vs 500, bold vs semibold) y cambios de estilo (itálica, oblicua).

3

Tamaño y escala

Rastrea cambios de font-size en px, rem, em y unidades de viewport, incluyendo clamp() y tipografía fluida.

4

Altura de línea y ritmo vertical

Monitorea ajustes de line-height que pueden interrumpir el ritmo vertical y el flujo general de sus páginas.

5

Espaciado de letras y palabras

Detecta cambios en letter-spacing y word-spacing que afectan la densidad y legibilidad del texto.

6

Decoración y transformación

Identifica modificaciones en subrayados, tachados, text-transform (mayúsculas/minúsculas) y text-overflow.

Ejemplo interactivo

Vea exactamente lo que Delta-QA detecta. Compare las dos versiones lado a lado.

Antes
Después

Escenarios reales

🎯

La fuente que deja de cargar

Un desarrollador ejecuta npm update y rompe el import de la fuente Inter sin saberlo. El navegador cambia silenciosamente a Arial. Los espaciados cambian, algunos títulos saltan a dos líneas, un botón desborda su contenedor — toda la maquetación queda sutilmente descuadrada. El cambio parecía inofensivo (una actualización de dependencias), se mergeó sin revisión visual. Delta-QA compara las capturas de ambas versiones y resalta cada desplazamiento de texto, cada título que salta de línea y cada desborde causado por el cambio de fuente.

⚠️

El line-height que rompe las tarjetas de producto

Un desarrollador cambia el line-height global para mejorar la legibilidad del blog. Efecto secundario: los títulos de producto que cabían en una línea ahora ocupan dos en el catálogo. Las tarjetas ya no tienen la misma altura, la grilla se vuelve irregular — un catálogo "desparejo" que inspira menos confianza. QA revisó el blog (la página modificada), no el catálogo que usa los mismos estilos globales. Delta-QA compara las capturas y resalta cada tarjeta cuya altura cambió — los desajustes en la grilla saltan a la vista de inmediato.

💡

El font-weight invisible

El diseñador definió un font-weight semi-bold (600) para los encabezados. A lo largo de varios sprints, distintos desarrolladores usan a veces 600, a veces 700. Resultado: algunos encabezados son visiblemente más gruesos que otros en la misma página. La jerarquía visual es inconsistente — un título de sección parece más importante que otro sin razón. El diseñador nunca fue notificado de estos cambios progresivos. Delta-QA compara las capturas y resalta las variaciones de grosor entre encabezados — los títulos más pesados se notan en la superposición.

¿Listo para detectar cada regresión visual?

Descarga Delta-QA y empieza a detectar cambios CSS en tus páginas web — sin código.