Schriftgrößen-Skala-Generator
Erstellen Sie eine modulare Typografie-Skala aus Basisgröße und Verhältnis — Live-Vorschau, px/rem-Tabelle und kopierfertige CSS-Variablen.
601 Aufrufe
Warum eine modulare Skala
Anstatt Überschriftengrößen nach Augenmaß zu wählen, multipliziert eine modulare Skala eine Basisgröße mit einem festen Verhältnis pro Stufe: Basis 16 px mit dem Verhältnis 1,25 (große Terz) ergibt 20, 25, 31,3, 39,1, 48,8... Die Größen verhalten sich zueinander wie musikalische Intervalle, und die gesamte Hierarchie bleibt konsistent — ändern Sie die Basis oder das Verhältnis, und alles wird gemeinsam neu gestimmt.
Gängige Verhältnisse: 1,125 (große Sekunde — dichte UI), 1,25 (große Terz — der sichere Standard), 1,333 (Quarte — redaktionell), 1,618 (Goldener Schnitt — dramatisch, braucht wenige Stufen). Die erzeugten CSS-Custom-Properties lassen sich direkt in Ihr Stylesheet einfügen; rem-Werte setzen einen 16-px-Wurzelwert voraus.
Häufig gestellte Fragen
Welches Verhältnis sollte ich wählen?
Produkt-/UI-Arbeiten liegen meist bei 1,125-1,25 (Überschriften nicht viel größer als Fließtext); Marketing- und redaktionelle Seiten vertragen 1,333-1,618 gut. Wirkt h1 zu laut, reduzieren Sie das Verhältnis um eine Stufe, statt eine einzelne Größe von Hand anzupassen.
Warum reicht die Skala unter die Basis?
Negative Stufen (Basis ÷ Verhältnis) liefern Bildunterschriften und Kleingedrucktes, die zum selben System gehören — 12,8 px bei einer 16/1,25-Skala statt einer willkürlichen 13.
Sollte ich px oder rem verwenden?
rem im CSS: Nutzer, die ihre Browser-Schriftgröße erhöhen, erhalten eine proportional größere Skala. Die px-Spalte dient Mockups im Design-Tool.
Ähnliche Tools
Problem melden
Schriftgrößen-Skala-Generator