1
Changements de police
Detecte quand une police de secours s'affiche au lieu de la police principale, ou quand les declarations font-family changent.
45 cas de test
Typographie
La typographie est le pilier de la lisibilite. Meme un petit changement de graisse ou de hauteur de ligne peut affecter la perception du contenu par les utilisateurs. Delta-QA surveille chaque propriete typographique pour garantir un rendu exact sur toutes les pages.
Ce que nous detectons
2
Graisse & style
Capture les variations de graisse (400 vs 500, bold vs semibold) et les changements de style (italique, oblique).
3
Taille & echelle
Suit les changements de font-size en px, rem, em et unites viewport, y compris clamp() et la typographie fluide.
4
Hauteur de ligne & rythme vertical
Surveille les ajustements de line-height qui peuvent perturber le rythme vertical et le flux general de vos pages.
5
Espacement des lettres & mots
Detecte les changements de letter-spacing et word-spacing qui affectent la densite et la lisibilite du texte.
6
Decoration & transformation
Identifie les modifications de soulignement, barre, text-transform (majuscules/minuscules) et text-overflow.
Exemple interactif
Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.
Avant
Apres
Scénarios concrets
🎯
La police qui ne charge plus
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.
⚠️
Le line-height qui casse les cartes produit
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 font-weight invisible
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.
Pret a detecter chaque regression visuelle ?
Telechargez Delta-QA et detectez les changements CSS dans vos pages web — sans code.