Typografische Skala für Überschriften erstellen

Eine typografische Skala verwandelt eine Grundgröße und ein Verhältnis in eine vorhersehbare Überschriftenhierarchie. Geben Sie etwa 16 als Basis und 1.25 als positives Verhältnis für eine große Terz ein. Der Generator ordnet den Ebenen aufeinanderfolgende Potenzen dieses Verhältnisses zu und liefert ab h1 eine geordnete, maschinenlesbare Liste. Damit können Sie CSS-Tokens erstellen, ein Designsystem dokumentieren oder prüfen, ob eine Hierarchie einer einheitlichen mathematischen Regel statt willkürlichen Einzelgrößen folgt.

Wählen Sie Basis und Verhältnis passend zum Lesekontext

Beginnen Sie mit der Größe des Fließtextes. Eine Basis von 16 Pixeln ist im Web üblich, aber nicht verbindlich: Dichte Anwendungsoberflächen können kleiner beginnen, redaktionelle Layouts dagegen bei 18 oder 20 Pixeln. Das Verhältnis bestimmt, wie schnell sich Überschriften von der Basis entfernen.

1.125 ergibt eine zurückhaltende Folge, 1.2 eine deutlich erkennbare mittlere Hierarchie und 1.25 wird häufig als große Terz bezeichnet. Höhere Werte führen rasch zu großen Schaugrößen, besonders bei allen sechs HTML-Ebenen. Diese Fähigkeit akzeptiert jedes endliche positive Verhältnis.

Bei 1 bleiben alle Größen gleich; unter 1 sinken sie mit wachsendem Exponenten. Nur null und negative Werte sind Fehler. Verwenden Sie in Ihrem System durchgehend dieselbe Einheit.

Die Ausgabe nennt aus praktischen Gründen px, doch das Zahlenverhältnis selbst ist einheitenlos. Entscheiden Sie anhand echter Inhalte, verfügbarer Breite, Schriftmetriken und Zielgeräte und verlassen Sie sich nicht allein auf die traditionelle Bezeichnung eines Verhältnisses.

Verstehen Sie die Berechnung der Überschriftenebenen

Die Basisschriftgröße ist Schritt null und erscheint nicht selbst als Überschrift. Bei sechs Ebenen erhält h6 die Basis multipliziert mit dem Verhältnis hoch 1, h5 verwendet den Exponenten 2 und die Folge reicht bis h1 mit Exponent 6. Ist das Verhältnis größer als 1, liegt h1 am weitesten vom Fließtext entfernt; die Ausgabe bleibt dennoch in der vertrauten Reihenfolge h1 bis h6.

Bei drei Ebenen enthält sie h1, h2 und h3: h3 nutzt die erste, h2 die zweite und h1 die dritte Potenz. Jede Zeile nennt Ebene, Exponent und berechnete Größe. Die Rundung auf sechs Dezimalstellen entfernt störendes Gleitkommarauschen und bewahrt genügend Genauigkeit für CSS-Variablen.

Unverhältnismäßig große Ergebnisse werden abgelehnt, bevor eine unendliche oder unbrauchbare Ausgabe entsteht.

Nutzen Sie die Skala, ohne Größe und Struktur zu verwechseln

Betrachten Sie die erzeugten Werte als Gestaltungsvorschläge, nicht als Anweisung, Tags nach ihrem Aussehen auszuwählen. HTML-Ebenen vermitteln Browsern, Suchmaschinen und assistiven Technologien die Dokumentstruktur; ein h2 bleibt ein Unterabschnitt von h1, selbst wenn eine Komponente dafür ein kleineres Token verwendet. Ein sinnvoller Ablauf ist: Skala erzeugen, Größen in semantisch benannte Tokens übernehmen und diese anschließend per Stil den Strukturelementen zuordnen.

Testen Sie den größten Wert mit echten Titeln, schmalen Mobilansichten, Übersetzungen, fetten Schnitten und Schriften mit abweichenden Metriken. Sie können nur einen Teil der Skala verwenden, große Werte responsiv begrenzen oder mehreren Ebenen dieselbe Größe geben. Solche Anpassungen machen die Regel unter realen Layoutbedingungen brauchbar.

Speichern Sie für Prüfungen Basis, Verhältnis, Ebenenzahl und Ergebniszeilen gemeinsam, damit spätere Änderungen eindeutig nachvollziehbar bleiben.