Typografie-Skala-Generator
Der Type Scale Generator berechnet eine modulare Typografie-Skala aus einer Basis-Schriftgröße und einem Verhältnis – von Minor Second (1.067) bis zum Goldenen Schnitt (1.618) – und gibt neun Größen als CSS Custom Properties aus.
Über dieses Tool
Der Type Scale Generator berechnet eine modulare Typografie-Skala aus einer Basis-Schriftgröße und einem Verhältnis – von Minor Second (1.067) bis zum Goldenen Schnitt (1.618) – und gibt neun Größen als CSS Custom Properties aus.
So funktioniert’s
- Gib eine Basis-Schriftgröße in Pixeln ein (16 px ist der Browser-Standard).
- Wähle ein Skalenverhältnis, etwa Major Third (1.25).
- Wähle die Ausgabeeinheit: rem, px oder em.
- Klicke auf „CSS-Variablen kopieren“, um die Größen von --xs bis --4xl zu verwenden.
Gut zu wissen
- Jede Stufe einer modularen Skala multipliziert die vorherige Größe mit demselben Verhältnis.
- Der Generator erzeugt neun Stufen: zwei unter der Basis, die Basis selbst und sechs darüber.
- Kleinere Verhältnisse (1.067–1.2) passen zu dichten Oberflächen; größere Verhältnisse (1.333–1.618) zu redaktionellen Seiten mit großen Überschriften.
- rem-Werte werden relativ zu einer Root-Schriftgröße von 16 px berechnet.
- Mit rem skaliert der Text mit der im Browser eingestellten Schriftgröße des Nutzers.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Was ist eine modulare Typografie-Skala?
Eine Reihe von Schriftgrößen, bei der jede Größe die vorherige multipliziert mit einem festen Verhältnis ist – so wirken Überschriften und Fließtext visuell stimmig.
Welches Skalenverhältnis sollte ich verwenden?
Major Third (1.25) und Perfect Fourth (1.333) sind beliebte Allrounder. Nutze ein kleineres Verhältnis für Apps und Dashboards und ein größeres für Landingpages und Blogs.
Sollten Schriftgrößen in rem oder px angegeben werden?
rem wird allgemein empfohlen, weil es die vom Nutzer bevorzugte Browser-Schriftgröße respektiert, was die Barrierefreiheit verbessert.
Welche Basis-Schriftgröße sollte ich verwenden?
16 px ist der Standard der Browser und eine gute Basis für Fließtext; viele Websites nutzen 16–18 px für angenehmes Lesen.