Tokenlabor

Schriftgrößen-Skala berechnen

Die Schriftgrößen-Skala berechnet aus Basisgröße und Verhältnis eine modulare Typo-Skala in px und rem, zeigt sie in der Vorschau und gibt sie als CSS-Variablen aus, auf Wunsch fluide mit clamp().

    Skala
    NameStufepxrem
    Vorschau
    CSS-Variablen

    Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

    Modulare Typo-Skala verstehen

    Die Schriftgrößen-Skala berechnet eine modulare Skala: Ausgehend von der Basisgröße des Fließtexts wird jede Stufe mit demselben Faktor multipliziert. Bei 16 px und dem Verhältnis Major Third (1,25) ergeben sich 20, 25, 31,25 und 39,06 px nach oben und 12,8 px nach unten. Diese Type Scale sorgt dafür, dass Überschriften, Fließtext und Kleingedrucktes in einem hörbar harmonischen Verhältnis stehen; die Namen der Verhältnisse stammen aus der Musik (Terz, Quarte, Quinte). Der Goldene Schnitt mit 1,618 liefert sehr große Sprünge und eignet sich eher für wenige, plakative Stufen.

    Kleine Verhältnisse wie 1,125 oder 1,2 passen zu textreichen Seiten und Anwendungen mit vielen Ebenen, große wie 1,333 oder 1,5 zu Landingpages mit kräftigen Überschriften. Für fluide Typografie schalten Sie die clamp()-Ausgabe ein: Dann wählen Sie für schmale Bildschirme eine kleinere Basis und ein kleineres Verhältnis, und jede Stufe gleitet zwischen den beiden Viewport-Breiten linear von der mobilen zur Desktop-Größe. Der Rechner gibt den Ausdruck in rem plus vw aus, damit die Werte mit der Schriftgröße im Browser mitwachsen.

    Die Ausgabe sind CSS-Variablen für :root, die Sie direkt in Ihr Stylesheet übernehmen. Rundungen auf ganze Pixel sind nicht nötig, Browser rendern Bruchteile sauber. Den Zusammenhang von px und rem erklärt px in rem umrechnen; passende Abstände erzeugen Sie mit der Abstands-Skala.

    Anleitung: Schriftgrößen-Skala in 4 Schritten

    1. Bei „Basisgröße“ die Größe des Fließtexts in Pixeln eintragen, meist 16.
    2. Unter „Verhältnis“ eine Stufe wie Major Third (1,25) oder einen eigenen Faktor wählen.
    3. Die Anzahl der Stufen nach oben und unten sowie die Benennung festlegen.
    4. Optional „Fluide Werte mit clamp()“ einschalten, Werte für kleine Bildschirme eintragen und die CSS-Variablen kopieren.

    Typische Anwendungsfälle

    • Für ein neues Design-System Überschriften h1 bis h6 und kleine Texte aus einer Formel ableiten.
    • Eine bestehende Sammlung zufälliger Schriftgrößen durch eine stimmige Skala ersetzen.
    • Für Mobilgeräte ein kleineres Verhältnis wählen und per clamp() fließend zum Desktop übergehen.
    • Die Werte als Design Tokens an Design und Entwicklung gemeinsam weitergeben.
    Fragen

    Häufige Fragen

    Welches Verhältnis passt zu meiner Website?

    Für Blogs, Dokumentationen und Anwendungen mit viel Text eignen sich 1,125 bis 1,25. Für Marketingseiten mit wenigen, großen Überschriften 1,333 bis 1,5. Probieren Sie in der Vorschau aus, wie die Stufen wirken.

    Warum rem statt px?

    rem bezieht sich auf die Schriftgröße des Wurzelelements. Ändert ein Nutzer im Browser die Standardschrift, wachsen alle Größen mit. Mit px würden die Texte diese Einstellung ignorieren.

    Was macht clamp() in der Ausgabe?

    clamp(min, bevorzugt, max) begrenzt einen fließenden Wert. Die bevorzugte Größe hängt über vw von der Fensterbreite ab, bleibt aber zwischen der mobilen und der Desktop-Größe.

    Wie berechnet sich eine Stufe?

    Größe = Basis × Verhältnis hoch Stufe. Stufe 0 ist der Fließtext, positive Stufen werden größer, negative kleiner. Bei 16 px und 1,25 ist Stufe 2 also 16 × 1,25² = 25 px.

    Wie viele Stufen braucht eine Typo-Skala?

    Für die meisten Websites reichen zwei Stufen unter dem Fließtext (Kleingedrucktes, Bildunterschriften) und vier bis sechs darüber für Überschriften. Mehr Stufen machen die Auswahl schwerer, ohne dass Leser die Unterschiede bemerken.

    Sollte die Zeilenhöhe mit der Schriftgröße wachsen?

    Nein, relativ eher sinken: Fließtext liest sich gut mit einer Zeilenhöhe um 1,5, große Überschriften wirken mit 1,1 bis 1,25 geschlossener. Eine einheitlose line-height passt sich automatisch an jede Schriftgröße an.

    Weitere Werkzeuge

    Das könnte auch helfen

    Alle 558 Werkzeuge

    Farbumwandler

    HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

    Öffnen

    Farbpalette aus Bild

    Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

    Öffnen

    Kontrast prüfen (WCAG)

    Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

    Öffnen

    CSS-Gradient-Generator

    Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

    Öffnen

    Box-Shadow-Generator

    CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

    Öffnen

    Flexbox-Generator

    Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

    Öffnen