Typografie-Skala
Type Scale Generator
Baut aus Basisgröße und Verhältnis eine modulare Schrift- und Abstandsskala, exportiert als CSS oder Tokens.
Baut eine modulare Schriftgrößenskala aus einer Grundgröße und einem Verhältnis und zeigt jede Stufe in ihrer tatsächlichen Größe mit den Zahlen daneben, die zählen: rem, Zeilenhöhe, Laufweite und – die eine, die entscheidet, ob eine Größe für Fließtext brauchbar ist – wie viele Zeichen bei Ihrer Spaltenbreite in eine Zeile passen. Es leitet aus demselben Verhältnis eine Abstandsskala ab, auf ein 4px-Raster eingerastet.
Skala
Verhältnis: 1.25
Abstände aus demselben Verhältnis
- space-14px
- space-24px
- space-38px
- space-48px
- space-58px
- space-612px
- space-716px
- space-820px
Auf ein 4px-Raster gerastet — das Raster, das fast jedes Designsystem ohnehin hat, und ein Abstand von 13px neben einem von 12px ist Rauschen.
Vorschau
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg
Grün markiert 45–75 Zeichen pro Zeile — Bringhursts Spanne für lateinischen Text, der Hangul mit seinen Wortabständen näher steht als dem vollbreiten CJK.
Export
Soll eine dieser Größen mit dem Viewport wachsen, statt in Stufen zu springen? Der Fluid-Size-Rechner macht aus zweien davon ein einziges clamp().
So funktioniert es
Legen Sie die Grundgröße fest
Die Größe des Fließtexts, fast immer 16px. Alles andere ist diese mit dem Verhältnis multipliziert oder dividiert, sie zuerst richtig zu setzen erspart es also, das Verhältnis später neu zu wählen.
Wählen Sie das Verhältnis – das ist die Entscheidung
Eine große Sekunde (1.125) ist die sichere Voreinstellung für Oberflächen: Acht Stufen landen noch in einem sinnvollen Bereich. Eine reine Quarte (1.333) ist redaktionell – drei Stufen über 16px sind schon 38px. Der Goldene Schnitt ist berühmt und zu steil für Oberflächentext. Jede Vorgabe sagt, wofür sie ist; wählen Sie nach dem Bereich, den Sie brauchen, nicht nach dem Namen.
Entscheiden Sie, wie viele Stufen, und ob gerundet wird
Stufen nach unten sind für Bildunterschriften und Beschriftungen; Stufen nach oben für Überschriften. Exakt behält die Geometrie und gibt Ihnen Bruchteile von Pixeln; Rundung auf 1px oder 2px gibt Zahlen, die man im Kopf behalten kann, und bricht das Verhältnis leicht. Rundung ist die übliche Wahl, und der exakte Wert wird neben jedem gerundeten trotzdem angezeigt.
Setzen Sie die Spaltenbreite und lesen Sie die Zeichenzahlen
Tippen Sie die Breite der Spalte ein, in der dieser Text tatsächlich sitzt. Die rechte Zahl in jeder Zeile sind Zeichen pro Zeile bei dieser Breite, und sie wird zwischen 45 und 75 grün – der Bereich mit echten Belegen dahinter für laufenden Fließtext. Eine Größe, die sich für sich genommen gut liest und 110 Zeichen pro Zeile ergibt, ist die falsche Größe für Fließtext.
Exportieren Sie die Tokens
CSS-Variablen, ein Tailwind-Theme-Block, SCSS oder JSON. Die Abstandsskala geht mit hinaus, eine Einfügung deckt also beides ab.
Häufige Fragen
Zeigt die Vorschau meine tatsächliche Schrift?
Nein – sie rendert in der Schrift dieser Seite. Größen, Zeilenhöhen und Laufweite sind echt, aber eine andere Schrift hat eine andere x-Höhe, und die x-Höhe ist es, die tatsächlich entscheidet, wie groß 16px wirken. Betrachten Sie die Vorschau als Prüfung der Proportion, und bestätigen Sie die Grundgröße in Ihrem eigenen Produkt.
Sollte ich die ganze Skala verwenden?
Nein, und elf Stufen zu erzeugen ist kein Grund, elf zu verwenden. Die meisten Oberflächen brauchen vier oder fünf Größen. Die zusätzlichen Stufen existieren, damit Sie sehen, wohin das Verhältnis geht, und damit eine selten gebrauchte Größe einen definierten Wert hat, statt spontan erfunden zu werden.
Woher kommen die Zeilenhöhen und die Laufweite?
Aus einer Regel, nicht aus Ihrer Schrift: Die Zeilenhöhe fällt, wenn die Größe wächst, die Laufweite wird auf den großen Stufen enger und auf den kleinen leicht weiter. Es ist der konventionelle Ausgangspunkt, und er ist oft genug richtig, um nützlich zu sein, aber eine schmale Schrift oder eine koreanische Schrift mit hohen Silbenblöcken wird andere Zahlen wollen. Passen Sie an, nachdem Sie hingesehen haben.
Warum ist die Abstandsskala auf 4px eingerastet, wenn die Schriftskala es nicht ist?
Weil das Auge sie unterschiedlich liest. Eine 17px-Überschrift neben einer 18px-Überschrift ist eine Hierarchie; ein 13px-Abstand neben einem 12px-Abstand ist Rauschen, und es ist die Art von Rauschen, die das Review überlebt und dann kopiert wird. Fast jedes Designsystem hat schon ein 4px-Raster, die Abstandsskala trifft es also dort.
Eingabe aus
Fluid-Size-Rechner
Fluid Size Calculator
Berechnet einen clamp()-Ausdruck, der eine Größe zwischen zwei Viewport-Breiten gleichmäßig skaliert.
Schriftpaarung
Font Pairing
Schlägt Paare aus Überschrift- und Fließtextschrift aus System-Font-Stacks vor, mit Vorschau in Ihrem eigenen Text – koreanisch wie lateinisch –, und liefert das CSS.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Fluid-Size-Rechner
Fluid Size Calculator
Berechnet einen clamp()-Ausdruck, der eine Größe zwischen zwei Viewport-Breiten gleichmäßig skaliert.
CSS-Token-Extraktor
CSS Token Extractor
Zieht Farben, Abstände, Radien und Schriften aus einem Stylesheet und schlägt einen Satz Custom Properties vor.
Schriftpaarung
Font Pairing
Schlägt Paare aus Überschrift- und Fließtextschrift aus System-Font-Stacks vor, mit Vorschau in Ihrem eigenen Text – koreanisch wie lateinisch –, und liefert das CSS.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.