Typografische Skala
Erzeuge eine modulare Typografie-Skala für dein Design. Wähle Basisgröße und Verhältnis für perfekt proportionierte Überschriften.
Was ist eine modulare Typografie-Skala?
Eine modulare Typografie-Skala ist eine Reihe von Schriftgrößen, die einem mathematischen Verhältnis folgen - z.B. Major Third (1,25x) oder Perfect Fourth (1,333x). Jede Überschrift von h1 bis h6 ist proportional größer als die darunter. Das Ergebnis ist eine harmonische, visuell ausgewogene Typografie.
Das richtige Verhältnis wählen
Kleinere Verhältnisse wie Minor Second (1,067) erzeugen kompakte Skalen für dichte UIs. Größere wie Perfect Fourth (1,333) oder Goldener Schnitt (1,618) schaffen dramatische Kontraste für redaktionelle Seiten. Major Third (1,25) ist ein sicherer Standard für die meisten Bildschirmgrößen.
Das generierte CSS verwenden
Das CSS-Panel gibt Custom Properties in :root (z.B. --text-h1) und direkte Selektoren für jede Überschriftsebene aus. Füge es in dein Stylesheet ein. rem sorgt für barrierefreie, skalierbare Schriftgrößen; px eignet sich für feste Maße.
Typografie-Skala und Barrierefreiheit
Die Verwendung von rem statt px macht Typografie mit der Systemschriftgröße des Nutzers skalierbar - ein wichtiger Aspekt der Barrierefreiheit. WCAG empfiehlt, dass Text um bis zu 200% vergrößerbar ist. Eine modulare Skala mit rem erfüllt diese Anforderung automatisch.