Erkennungskategorie

Typografie

Typografie ist das unsichtbare Gewebe, das alle Inhalte einer Oberfläche trägt: Überschriften, Absätze, Buttons, Formularbeschriftungen, Statusmeldungen. Eine typografische Regression führt selten zu einem Crash, verschlechtert aber die Lesbarkeit, bricht die visuelle Hierarchie und kostet Stunden, weil Nutzer-Vorfallsmeldungen aufgearbeitet werden müssen. Auf einem Business-Dashboard verschiebt eine Überschrift, die plötzlich zweizeilig umbricht, alle darunter liegenden Kennzahlen; auf einer Produktseite kann eine Preisbeschriftung mit veränderter Schriftstärke eine Aktion suggerieren, die es gar nicht gibt. Die typischen Ursachen sind bekannt: ein npm-Dependency-Update, das den Import einer Webfont bricht, eine Änderung der Variable --font-family in einem Design System, eine Modifikation der globalen line-height zur Verbesserung der Lesbarkeit einer einzelnen Seite, die Einführung eines text-wrap: balance, der die Zeilen neu berechnet, oder ein schlichter Mangel an Fallback für eine Custom-Schriftfamilie. Abweichungen zwischen font-weight 600 und 700 zwischen Sprints bleiben eine klassische Quelle typografischer Drift, vor allem wenn mehrere Entwickler ohne strikte Charta arbeiten. Delta-QA integriert diese Aspekte in seine Vergleichslogik: Das Werkzeug prüft nicht nur, ob ein Text vorhanden ist, sondern vergleicht das visuelle Ergebnis und erkennt jede Änderung von Stärke, Zeichenabstand, Zeilenhöhe oder Schrift-Fallback. Die Referenz-Screenshots dienen als stabile typografische Baseline, und jede neue Ausführung hebt Textverschiebungen, umbrechende Überschriften, Überläufe und Gewichtsabweichungen zwischen Versionen hervor. Dieses visuelles Testing erlaubt es QA-Teams, eine Design-System-Überarbeitung oder ein Framework-Update zu validieren, ohne jeden Bildschirm manuell erneut prüfen zu müssen.

64 / 437 getestete Fälle 0 Fehlalarme 0 Fehlauslassungen

Die deterministische KI von Delta-QA -- kein LLM -- wird gegen alle 437 Stresstest-Fälle neu validiert, 64 davon in dieser Kategorie: 0 False Positives, 0 False Negatives.

Was wir erkennen

Schriftfamilien-Änderungen

Erkennt, wenn eine Fallback-Schrift anstelle Ihrer primären Schriftart gerendert wird oder wenn sich Font-Family-Deklarationen ändern.

Schriftstärke & -stil

Erfasst Gewichtsvariationen (400 vs 500, Bold vs Semibold) und Stiländerungen (Kursiv, Oblique), die die Texthervorhebung beeinflussen.

Schriftgröße & Skalierung

Verfolgt Font-Size-Änderungen in px, rem, em und Viewport-Einheiten, einschließlich clamp() und fluider Typografie.

Zeilenhöhe & vertikaler Rhythmus

Überwacht Zeilenhöhen-Anpassungen, die den vertikalen Rhythmus und den gesamten Layout-Fluss Ihrer Seiten stören können.

Zeichen- & Wortabstand

Erkennt Änderungen in Letter-Spacing und Word-Spacing, die die Textdichte und Lesbarkeit beeinflussen.

Textdekoration & -transformation

Identifiziert Änderungen an Unterstreichungen, Durchstreichungen, Text-Transform (Groß-/Kleinschreibung) und Text-Overflow-Verhalten.

Praxisszenarien

01 Die Schriftart, die nicht mehr lädt

Ein Entwickler führt ein npm update durch und bricht dabei unwissentlich den Import der Inter-Schriftart. Der Browser fällt stillschweigend auf Arial zurück. Die Abstände ändern sich, einige Überschriften umbrechen auf zwei Zeilen, ein Button überläuft seinen Container: das gesamte Layout ist subtil verschoben. Die Änderung schien harmlos (ein Dependency-Update), sie wurde ohne visuelle Prüfung gemergt. Delta-QA vergleicht die Screenshots beider Versionen und hebt jede Textverschiebung, jeden Zeilenumbruch und jeden Überlauf hervor, der durch den Schriftwechsel verursacht wurde.

02 Die Zeilenhöhe, die Produktkarten zerstört

Ein Entwickler ändert die globale line-height, um die Lesbarkeit des Blogs zu verbessern. Nebeneffekt: Produkttitel, die auf eine Zeile passten, umbrechen jetzt auf zwei Zeilen im Katalog. Die Karten haben nicht mehr dieselbe Höhe, das Raster wird unregelmäßig: ein „schiefer" Katalog, der weniger Vertrauen erweckt. Die QA hat den Blog geprüft (die geänderte Seite), nicht den Katalog, der dieselben globalen Styles verwendet. Delta-QA vergleicht die Screenshots und hebt jede Karte hervor, deren Höhe sich geändert hat: die Verschiebungen im Raster fallen sofort auf.

03 Die unsichtbare font-weight-Änderung

Der Designer hat font-weight semi-bold (600) für Überschriften festgelegt. Im Laufe der Sprints verwenden verschiedene Entwickler mal 600, mal 700. Ergebnis: Einige Überschriften sind auf derselben Seite sichtbar dicker als andere. Die visuelle Hierarchie ist inkonsistent: ein Abschnittstitel wirkt ohne Grund wichtiger als ein anderer. Der Designer wurde über diese schrittweisen Änderungen nicht informiert. Delta-QA vergleicht die Screenshots und hebt die Gewichtsunterschiede zwischen Überschriften hervor: die dickeren Titel fallen in der Überlagerung auf.

Bereit, jede visuelle Regression zu erkennen?

Erstellen Sie ein kostenloses Konto und erkennen Sie CSS-Änderungen in Ihren Webseiten – ohne Code.

Ohne Kreditkarte · Jederzeit kündbar