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.
Frequently Asked Questions
Q: Was ist eine modulare Waage?
Was ist eine modulare Waage? Eine modulare Skala ist eine Reihe von Größen, die aus einer Basisgröße abgeleitet werden, die wiederholt mit einem festen Verhältnis multipliziert wird – die gleiche Mathematik wie bei Musikskalen.
Q: Welches Verhältnis soll ich wählen?
Welches Verhältnis soll ich wählen? Beginnen Sie mit 1,333 (perfekter vierter Wert) für die allgemeine Webnutzung. Verwenden Sie 1.2 für dichte Schnittstellen, 1.5 für auffällige Marketingseiten und 1.618 für dramatische redaktionelle Designs.
Q: Warum ist 16 Pixel die Standardbasisgröße?
Warum ist 16 Pixel die Standardbasisgröße? 16px ist die Standard-Root-Schriftgröße in allen Browsern. Wenn Sie Ihre Skala darauf aufbauen, stellen Sie Konsistenz sicher, wenn Benutzer den Browser-Zoom oder die Barrierefreiheitseinstellungen ändern.
Q: Sollte ich rem anstelle von px verwenden?
Sollte ich rem anstelle von px verwenden? Ja. Definieren Sie die Skalierung in px, wenden Sie sie jedoch zur Barrierefreiheit mit rem an: 1rem entspricht der Stammschriftgröße, sodass rem-basierte Größen mit den Benutzereinstellungen skaliert werden.
Q: Wie viele Schritte benötigt eine Waage?
Wie viele Schritte benötigt eine Waage? 6–8 Schritte decken die meisten Anforderungen ab: Beschriftung, Klein, Text, H4-H1-Bereich und eine Anzeigegröße. Weitere Schritte erhöhen den Wartungsaufwand ohne großen Nutzen.
Bauhaus-Farben
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.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.