1
Font Family Changes
Detects when a fallback font renders instead of your primary typeface, or when font-family declarations change.
45 test cases
Typography
Typography is the backbone of readability. Even a small change in font weight or line height can affect how users perceive your content. Delta-QA monitors every typographic property to ensure your text renders exactly as designed, across all pages.
What we detect
2
Font Weight & Style
Catches weight variations (400 vs 500, bold vs semibold) and style changes (italic, oblique) that affect text emphasis.
3
Font Size & Scaling
Tracks font-size changes in px, rem, em, and viewport units, including clamp() and fluid typography.
4
Line Height & Vertical Rhythm
Monitors line-height adjustments that can disrupt the vertical rhythm and overall layout flow of your pages.
5
Letter & Word Spacing
Detects changes in letter-spacing and word-spacing that affect text density and readability.
6
Text Decoration & Transform
Identifies modifications to underlines, strikethroughs, text-transform (uppercase/lowercase), and text-overflow behavior.
Live example
See exactly what Delta-QA detects. Compare the two versions side by side.
Before
After
Real-world scenarios
🎯
The font that stops loading
A developer runs npm update and unknowingly breaks the Inter font import. The browser silently falls back to Arial. Spacing changes, some headings wrap to two lines, a button overflows its container — the entire layout is subtly off. The change seemed harmless (a dependency update), so it was merged without visual review. Delta-QA compares screenshots of both versions and highlights every text shift, every heading that jumps a line, and every overflow caused by the font swap.
⚠️
The line-height that breaks product cards
A developer changes the global line-height to improve blog readability. Side effect: product titles that fit on one line now wrap to two in the catalog. Cards are no longer the same height, the grid becomes uneven — a "wonky" catalog that inspires less trust. QA checked the blog (the modified page), not the catalog that shares the same global styles. Delta-QA compares screenshots and highlights every card whose height changed — the grid misalignments jump out immediately.
💡
The invisible font-weight
The designer specified font-weight semi-bold (600) for headings. Over multiple sprints, different developers use sometimes 600, sometimes 700. Result: some headings are noticeably thicker than others on the same page. The visual hierarchy is inconsistent — one section heading looks more important than another for no reason. The designer was never notified of these gradual changes. Delta-QA compares screenshots and highlights the weight variations between headings — the bolder titles stand out in the overlay.
Ready to catch every visual regression?
Download Delta-QA and start detecting CSS changes in your web pages — no code required.