Detection category

Typography

Typography is the invisible fabric carrying every piece of content in an interface: headings, paragraphs, buttons, form labels, status messages. A typography regression rarely produces a crash, but it erodes readability, breaks the visual hierarchy, and forces teams to spend hours triaging user incident reports. On a business dashboard, a heading that wraps to two lines pushes every metric below it down; on a product page, a price label whose font weight changes can suggest a promotion that does not exist. The usual culprits are well known: an npm dependency update that breaks a web font import, a change to the --font-family variable in a design system, a global line-height tweak meant to fix readability on a single page, the introduction of text-wrap balance that recomposes line breaks, or a missing fallback for a custom font family. Drift between font-weight 600 and 700 across sprints remains a classic source of typographic inconsistency, especially when several developers contribute without a strict guideline. Delta-QA bakes these concerns into its visual regression logic: the tool does not merely confirm a string is present, it compares the rendered output and detects every change in weight, spacing, line-height, or font fallback. The baseline screenshots act as a stable typographic reference, and each new run highlights text shifts, headings that jump a line, overflows, and weight variations between versions. This gives QA teams a way to validate a design system overhaul or a framework upgrade without manually reviewing every screen.

64 / 437 cases tested 0 false positives 0 false negatives

Watch it catch them

Test it on your own pages

What we detect

Font Family Changes

Detects when a fallback font renders instead of your primary typeface, or when font-family declarations change.

Font Weight & Style

Catches weight variations (400 vs 500, bold vs semibold) and style changes (italic, oblique) that affect text emphasis.

Font Size & Scaling

Tracks font-size changes in px, rem, em, and viewport units, including clamp() and fluid typography.

Line Height & Vertical Rhythm

Monitors line-height adjustments that can disrupt the vertical rhythm and overall layout flow of your pages.

Letter & Word Spacing

Detects changes in letter-spacing and word-spacing that affect text density and readability.

Text Decoration & Transform

Identifies modifications to underlines, strikethroughs, text-transform (uppercase/lowercase), and text-overflow behavior.

Real-world scenarios

01 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.

02 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.

03 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.

macOS & Windows · free · no sign-up