# Typografische Skala: Schriftgrößen mit Verhältnissen [Canonical HTML page](https://gradiently.design/de/guide/typographic-scale) Wählst du Schriftgrößen nach Gefühl, laufen sie auseinander: 18, 22, 23, 30, 31. Eine typografische Skala ersetzt das Raten durch eine Basisgröße und ein Verhältnis, sodass jede Größe zur selben Familie zu gehören scheint. ## The short version - Eine typografische Skala ist ein kurzer Satz Schriftgrößen, der entsteht, indem du eine Basisgröße immer wieder mit demselben Verhältnis multiplizierst. - Kleine Verhältnisse wie 1,2 passen zu dichten Oberflächen, große wie 1,5 zu Plakaten, Social Posts und Landingpages. - Mit 16 px Basis und dem Verhältnis 1,25 läuft die Skala über 16, 20, 25, 31, 39 und 49 px. - Die meisten Designs brauchen nur fünf oder sechs Größen, und das Runden auf ganze Pixel ist in Ordnung. - In CSS pflegst du eine typografische Skala am leichtesten als Custom Properties, fließend gemacht mit clamp(). Eine **typografische Skala** ist ein Satz Schriftgrößen, gebaut aus einer Basisgröße und einem Verhältnis. Du startest mit deiner Textgröße, sagen wir 16 px, und multiplizierst sie mit dem Verhältnis für die nächste Größe, dann wieder für die nächste. Mit dem Verhältnis 1,25 erhältst du 16, 20, 25, 31, 39 und 49 px. Weil jede Stufe im gleichen Verhältnis wächst, wirken die Größen verwandt, und die Wahl einer Überschriftgröße ist kein Raten mehr. ## Warum eine Skala Größen verwandt wirken lässt Das Auge liest Größe als Verhältnis, nicht als Pixel. Der Sprung von 16 auf 20 fühlt sich an wie der von 39 auf 49, denn beide sind ein Viertel größer. Nach Gefühl gewählte Größen ballen sich an manchen Stellen und lassen an anderen Lücken, sodass zwei Überschriften fast gleich groß sind und wie ein Fehler aussehen. Eine Skala gibt jeder Ebene einen klaren, gleichmäßigen Schritt, das Rückgrat der [visuellen Hierarchie](https://gradiently.design/de/guide/visual-hierarchy). ## Gängige Verhältnisse der Skala im Vergleich Viele beliebte Verhältnisse haben ihre Namen von Intervallen der Musik, und eine so gebaute Skala heißt oft modulare Skala. Der Name zählt weniger als die Größe des Schritts: Je größer das Verhältnis, desto mehr Drama zwischen den Ebenen und desto weniger Ebenen passen auf eine Seite. | Name | Verhältnis | Wirkung | Gut für | | --- | --- | --- | --- | | Kleine Sekunde | 1.067 | Kaum verschieden | Dichte Datentabellen, kleine Bildschirme | | Große Sekunde | 1.125 | Sanft | Apps und Dashboards | | Kleine Terz | 1,2 | Ruhig und klar | Oberflächen, Dokumentation, langes Lesen | | Große Terz | 1,25 | Ausgewogen | Websites und Blogs, ein sicherer Standard | | Reine Quarte | 1.333 | Selbstbewusst | Marketingseiten, Redaktionelles | | Übermäßige Quarte | 1.414 | Stark | Landingpages, Präsentationen | | Reine Quinte | 1,5 | Kräftig | Plakate, Social Posts, große Headlines | | Goldener Schnitt | 1.618 | Dramatisch | Display-Schrift mit wenigen Ebenen | Gängige Verhältnisse von klein bis groß. Im Zweifel startest du mit 1,25 fürs Web und 1,5 für Social Posts. ## Skalenwerte in Pixel Hier läuft dieselbe Basis von 16 px durch vier Verhältnisse. Sieh, wie schnell die großen Verhältnisse steigen: Bei Stufe 4 liegt eine 1,5-Skala schon bei 81 px, eine 1,2-Skala bei 33 px. | Stufe | 1,2 | 1,25 | 1.333 | 1,5 | | --- | --- | --- | --- | --- | | Klein (Stufe −1) | 13 | 13 | 12 | 11 | | Fließtext (Basis) | 16 | 16 | 16 | 16 | | Stufe 1 | 19 | 20 | 21 | 24 | | Stufe 2 | 23 | 25 | 28 | 36 | | Stufe 3 | 28 | 31 | 38 | 54 | | Stufe 4 | 33 | 39 | 51 | 81 | | Stufe 5 | 40 | 49 | 67 | 122 | Auf ganze Pixel gerundete Werte. Die Stufe unter der Basis ist die Basis geteilt durch das Verhältnis, gedacht für Bildunterschriften und Labels. Runden ist in Ordnung. Niemand sieht den Unterschied zwischen 31,25 und 31 px, und ganze Zahlen merkt man sich leichter und richtet sie besser am Raster aus. ## So baust du deine eigene Skala 1. **Basisgröße wählen** Das ist dein Fließtext. 16 bis 18 px passen für die meisten Websites; auf einer 1080 px breiten Social-Fläche startest du bei 40 px. 2. **Ein Verhältnis passend zum Inhalt wählen** Viel Text und viele Überschriftebenen wollen ein kleines Verhältnis. Wenige Wörter und eine große Headline wollen ein großes. 3. **Fünf oder sechs Stufen erzeugen** Multipliziere nach oben für Überschriften und teile einmal für kleinen Text. Die meisten Designs nutzen nie mehr als sechs Größen. 4. **Runden und benennen** Runde auf ganze Pixel und benenne die Stufen nach ihrer Rolle, etwa Caption, Body, Title und Display, nicht nach Nummer. 5. **Zeilenhöhe pro Stufe festlegen** Größere Größen brauchen engeren Zeilenabstand. Fließtext etwa 1,5, Titel etwa 1,2, Display-Schrift nahe 1.0. 6. **Mit echten Wörtern testen** Setze eine echte Headline, Unterzeile und einen Absatz. Wirken zwei Stufen zu ähnlich, lass eine aus oder erhöhe das Verhältnis. ## Eine typografische Skala für Social Posts Social Posts brauchen ein größeres Verhältnis als Webseiten, denn eine 1080 px breite Fläche schrumpft am Handy auf ein Drittel ihrer Breite, und es gibt nur zwei oder drei Textebenen. Eine Basis von 40 px mit dem Verhältnis 1,5 ergibt 40, 60, 90 und 135 px, was sauber zu den Größen in [Schriftgröße für Instagram-Posts](https://gradiently.design/de/guide/font-size-for-social-media) passt. Ein Hochformat-Social-Post mit einer großen Kennzahl „3-mal schnellerer Checkout“ über kleinerem Begleittext Ein Zahlenpost braucht drei klare Ebenen: die Zahl, das Detail und das Label. In einer 1,5-Skala sind das 135, 60 und 40 px. Ein Hochformat-Karussell-Slide mit dem Titel „Vor dem Posten“ und einer kurzen Checkliste darunter Ein Listen-Slide nutzt die unteren Stufen derselben Skala und passt deshalb gut neben den Zahlen-Slide in einem Karussell. Eine Skala über alle Slides eines Karussells macht ein Set gestaltet statt zusammengestückelt. Dieselben Größen in denselben Rollen, Slide für Slide. [Textlayout für Social-Media-Posts](https://gradiently.design/de/guide/text-hierarchy-social) zeigt, wie du sie anordnest. ## So schreibst du eine typografische Skala in CSS Speichere die Skala als Custom Properties, damit jede Komponente daraus schöpft. Du kannst Multiplikationen mit `calc()` verketten oder die gerundeten Werte ausschreiben. Für eine Skala, die mit dem Bildschirm wächst, gibst du jeder Stufe einen [clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)-Bereich: ein Minimum fürs Handy, ein Maximum für breite Bildschirme und dazwischen einen fließenden Wert. ```css /* A 1.25 scale from a 1rem (16px) base */ :root { --ratio: 1.25; --step-0: 1rem; --step--1: calc(var(--step-0) / var(--ratio)); --step-1: calc(var(--step-0) * var(--ratio)); --step-2: calc(var(--step-1) * var(--ratio)); --step-3: calc(var(--step-2) * var(--ratio)); --step-4: calc(var(--step-3) * var(--ratio)); --step-5: calc(var(--step-4) * var(--ratio)); } /* Fluid headings: smaller ratio on phones, larger on desktop */ h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; } h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; } h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; } body { font-size: var(--step-0); line-height: 1.55; } small { font-size: var(--step--1); } ``` Ändere `--ratio` einmal, und jede Stufe zieht nach. Behalte `rem` im Minimum jedes clamp, damit der Text die eigene Schriftgrößeneinstellung der Leser weiter respektiert. ### Vermeiden - Zehn Größen, wo fünf reichen würden - Zwei Überschriften mit 2 px Unterschied - Dasselbe Verhältnis für ein Dashboard und ein Plakat - Feste Pixelgrößen, die die Schrifteinstellungen der Leser ignorieren ### Besser so - Fünf oder sechs Stufen, jede mit benannter Rolle - Eine Stufe auslassen, wenn zwei Ebenen gleich aussehen - Kleines Verhältnis für dichte Bildschirme, großes für wenige Wörter - Größen in rem, fließend mit clamp() Eine Skala ist ein Teil größerer Entscheidungen über Schriften, Abstände und Rollen. [Typografiesystem](https://gradiently.design/de/guide/brand-typography-system) bringt sie zusammen, und [Tracking oder Kerning](https://gradiently.design/de/guide/tracking-vs-kerning) behandelt die Abstandswerte, die zu jeder Stufe passen. Gestaltest du Social Content, enthält das Markenkit von Gradiently deine Überschrift- und Fließtextschriften, und der Designer wendet sie auf jede neue Größe an, wodurch sich eine einmal gewählte Skala leicht halten lässt. ## FAQ ### Was ist eine typografische Skala? Ein Satz Schriftgrößen, der entsteht, indem man eine Basisgröße wiederholt mit demselben Verhältnis multipliziert, sodass jede Größe im Verhältnis zu den anderen steht. ### Welches Verhältnis ist das beste? Ein einziges bestes gibt es nicht. 1,2 oder 1,25 passt zu Websites und Apps mit viel Text; 1,5 oder mehr zu Plakaten und Social Posts mit wenigen Wörtern. ### Wie viele Schriftgrößen sollte ein Design nutzen? Meist fünf oder sechs: eine kleine Größe, Fließtext, zwei oder drei Überschriftebenen und eine Display-Größe. ### Soll ich die Werte der Skala runden? Ja. Das Runden auf ganze Pixel macht keinen sichtbaren Unterschied und macht die Skala leichter nutzbar und merkbar. ### Wie mache ich eine typografische Skala in CSS responsiv? Nimm `clamp()` für jede Stufe, mit einem Minimum in rem, einem fließenden Mittelwert in Viewport-Einheiten und einem Maximum für breite Bildschirme.