Changements de police
Détecte quand une police de secours s'affiche au lieu de la police principale, ou quand les déclarations font-family changent.
La typographie est le tissu invisible qui porte tout le contenu d'une interface : titres, paragraphes, boutons, libellés de formulaires, messages d'état. Une régression typographique se traduit rarement par un crash, mais elle dégrade la lisibilité, casse la hiérarchie visuelle et fait perdre des heures à reflux les rapports d'incidents utilisateur. Sur un dashboard métier, un titre qui passe sur deux lignes décale tous les indicateurs en dessous ; sur une fiche produit, un libellé de prix dont la graisse change peut suggérer une promotion qui n'existe pas. Les causes typiques sont connues : mise à jour d'une dépendance npm qui casse l'import d'une police web, changement de la variable --font-family dans un design system, modification d'un line-height global pour améliorer la lisibilité d'une seule page, introduction d'un text-wrap balance qui recompose les lignes, ou simple oubli de fallback pour une famille de polices custom. Les écarts de font-weight entre 600 et 700 selon les sprints restent une source classique de drift typographique, surtout quand plusieurs développeurs interviennent sans charte stricte. Delta-QA intègre ces problématiques dans sa logique de comparaison : l'outil ne se contente pas de vérifier qu'un texte est présent, il compare le rendu pixel par pixel et détecte tout changement d'épaisseur, d'espacement, de hauteur de ligne ou de fallback de police. Les captures de référence servent de baseline typographique stable, et chaque nouvelle exécution met en évidence les décalages de texte, les titres qui sautent une ligne, les débordements et les variations de poids entre versions. Cette approche permet aux équipes QA de valider une refonte de design system ou une mise à jour de framework sans relire manuellement chaque écran.
Détecte quand une police de secours s'affiche au lieu de la police principale, ou quand les déclarations font-family changent.
Capture les variations de graisse (400 vs 500, bold vs semibold) et les changements de style (italique, oblique).
Suit les changements de font-size en px, rem, em et unités viewport, y compris clamp() et la typographie fluide.
Surveille les ajustements de line-height qui peuvent perturber le rythme vertical et le flux général de vos pages.
Détecte les changements de letter-spacing et word-spacing qui affectent la densité et la lisibilité du texte.
Identifie les modifications de soulignement, barre, text-transform (majuscules/minuscules) et text-overflow.
Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.
Un développeur lance un npm update et casse l'import de la police Inter sans le savoir. Le navigateur bascule silencieusement sur Arial. Les espacements changent, certains titres passent sur deux lignes, un bouton déborde de son conteneur — toute la mise en page est subtilement décalée. Le changement semblait anodin (une mise à jour de dépendances), on l'a mergé sans review visuelle. Delta-QA compare les captures des deux versions et met en évidence chaque décalage de texte, chaque titre qui saute une ligne et chaque débordement causé par le changement de police.
Un développeur modifie le line-height global pour améliorer la lisibilité du blog. Effet secondaire : les titres produit qui tenaient sur une ligne passent sur deux lignes dans le catalogue. Les cartes n'ont plus la même hauteur, la grille devient irrégulière — un catalogue « bancal » qui inspire moins confiance. Le QA a vérifié le blog (la page modifiée), pas le catalogue qui utilise les mêmes styles globaux. Delta-QA compare les captures d'écran et surligne chaque carte dont la hauteur a changé — les décalages dans la grille ressortent immédiatement.
Le designer a défini un font-weight semi-bold (600) pour les en-têtes. Au fil des sprints, différents développeurs utilisent tantôt 600, tantôt 700. Résultat : certains en-têtes sont visiblement plus épais que d'autres sur la même page. La hiérarchie visuelle est incohérente — un titre de section paraît plus important qu'un autre sans raison. Le designer n'a pas été notifié de ces changements progressifs. Delta-QA compare les captures d'écran et met en évidence les variations d'épaisseur entre en-têtes — les titres plus gras ressortent dans la superposition.
Téléchargez Delta-QA et détectez les changements CSS dans vos pages web — sans code.