Erzeuge eine harmonische modulare Typografie-Skala mit Goldenem Schnitt, großer Terz und anderen klassischen Verhältnissen. Visuelle Größen-Vorschau und komplettes CSS kopieren.
Eine Typografieskala ist eine Reihe von Schriftgrößen, die einem konsistenten mathematischen Verhältnis folgen. Anstatt die Größen zufällig auszuwählen, wird jeder Schritt mit dem gleichen Verhältnis multipliziert – so entsteht ein visueller Rhythmus und eine Hierarchie über Überschriften, Fließtext und Bildunterschriften hinweg.
Wählen Sie eine Basisgröße (16 Pixel ist die Browser-Standardeinstellung und ein solider Ausgangspunkt) und wählen Sie dann ein Verhältnis. Kleinere Verhältnisse wie 1,125 erzeugen subtile, elegante Skalen für redaktionelle Websites. Größere Verhältnisse wie 1,618 erzeugen einen dramatischen Kontrast für Marketingseiten.
Eine typografische Skala ist ein fester Satz von Schriftgrößen, die einer mathematischen Proportion folgen, sodass jede Stufe mit der nächsten im selben Verhältnis steht. Statt Größen nach Augenmaß zu wählen — 14, 17, 22, 31... — wählen Sie eine Basisgröße und multiplizieren (oder dividieren) sie immer wieder mit dem Verhältnis: 16 × 1,25 = 20, × 1,25 = 25, und so weiter. Das Ergebnis ist eine Hierarchie, die gewollt wirkt: Überschriften, Fließtext, Bildunterschriften und Labels wirken wie Mitglieder desselben Designsystems, nicht wie ein Haufen zufälliger Größen.
Gängige Verhältnisse verhalten sich unterschiedlich. 1,125 und 1,2 erzeugen feine, elegante Stufen — ideal für dichte, textlastige Interfaces. 1,25 und 1,333 sind die Arbeitstiere des Webs: spürbare Hierarchie ohne Drama, und 1,333 ist nebenbei die klassische reine Quarte der Musik. 1,5 liefert kräftige Sprünge für Content-Seiten. 1,618 — der Goldene Schnitt — wirkt eindrucksvoll, aber aggressiv: wunderschön für Display-Überschriften und Marketingseiten, für lange Lesetexte meist zu viel.
16px ist der Browser-Standard und der richtige Ausgangspunkt für Fließtext am Desktop: entspricht dem Lesekomfort gedruckter Bücher, ist für die meisten gut lesbar und passt zu den Barrierefreiheits-Richtlinien. Mobile Interfaces dürfen etwas kleiner starten (15px) oder bei 16px bleiben. Ist die Basis fixiert, leitet sich alles andere daraus ab — Überschriften multiplizieren nach oben, Labels und Bildunterschriften dividieren nach unten — eine einzige Änderung der Basis stimmt die gesamte Hierarchie konsistent neu.
Eine Skala ist mehr als Schriftgrößen. Die Zeilenhöhe sollte wachsen, wenn der Text kleiner wird: 1,5–1,6 für Fließtext, 1,2–1,4 für Überschriften. Für den vertikalen Rhythmus multiplizieren Sie die Basisgröße mit dem Skalenverhältnis und erhalten Abstandsstufen — ist Ihre Skala 16/20/25/31, taugen dieselben Zahlen als Margen- und Padding-Schritte. Teilen sich Schriftgrößen und Abstände ein Verhältnis, rastet jedes Element an einem unsichtbaren Raster ein und die Seite wirkt komponiert statt zusammengestückelt.
Text sollte fließend zwischen Mobil und Desktop skalieren. Modernes CSS löst das in einer Zeile: font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) — ein Minimum, eine fließende Mitte, ein Maximum. Nehmen Sie Minimum und Maximum aus Ihrer Skala (z. B. 16px bis 28px), den Rest erledigt der Viewport-Term: Überschriften schrumpfen elegant auf dem Handy und wachsen am Monitor — ohne eine einzige Media Query.
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Das ikonische Rot der Bauhaus-Plakate und Drucksachen
Das leuchtende Gelb der Bauhaus-Ästhetik
Das tiefe Blau des Bauhaus-Farbkreises
Historisches Pigment aus Lapislazuli, von Goethe beschrieben
Erdpigment der deutschen Renaissance-Malerei
Das Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Das frische Grün der Frühlingslinden
Die roten Ziegeldächer der Altstädte
Der dunkle Grauton der Zeichenkunst und des Industriedesigns
Das Weiß der Bauhaus-Wände — Raum und Licht