Render-Fehler:
Live-Steuerung & Typografie-Parameter
56px
1.4
0.00em
50%
A
Primäre Schrift
(A)
Inter / System UI
— kein File
geladen —
Weight:
400
B
Vergleichsschrift (B)
Georgia / System
Serif
— kein File
geladen —
Weight:
400
Font
A
Ascending to Better Typography
Font
B
Ascending to Better Typography
Ascending to Better Typography
Ascending to Better Typography
UI Component Stress-Test: Input Overflow & Baseline Drift
Prüft starre Höhen (40px Text-Input) auf inneres
Scrollen (scrollHeight > clientHeight)
und – aus den fontkit-Metriken berechnet – auf Descender-Clipping.
Effective-Height Shift (B vs. A): 0%
Font A: Input (Border-Box 40px)
CLIPPING
RISK
OVERFLOW
DETECTED
scrollHeight: 40px
clientHeight: 40px
benötigte Textbox: –
Font B: Input (Border-Box 40px)
CLIPPING
RISK
OVERFLOW
DETECTED
scrollHeight: 40px
clientHeight: 40px
benötigte Textbox: –
OS/2 · fsSelection Bit-Audit
Bit 7 (USE_TYPO_METRICS, Maske 0x80) entscheidet, ob Browser die sTypo-Werte
statt der Windows-Bounds für die Zeilenhöhe verwenden.
Technischer Deep Dive & Metriken-Vergleich
Parsed via fontkit (SFNT / CFF / WOFF / WOFF2)| Eigenschaft / Tabelle | Font A | Font B |
|---|---|---|
| Lade Schriftdateien per Drag & Drop, um binäre Metadaten zu parsen. | ||
Zeichensatz-Analyse
Glyphenbestand, OpenType-Ligaturen und Sprachabdeckung der ausgewählten Schrift.
Analysiere:
Zero-CLS Fallback & @font-face Kompensation
Berechnete size-adjust, ascent-override, descent-override zur Eliminierung von
Cumulative Layout Shift
/* Lade beide Schriften, um @font-face Kompensations-CSS zu berechnen */