Die Typografie-Ansicht
Ein lebendiges Musterblatt — Überschrift, Lead, Fließtext, Listen, Formulare — in dem jede Schriftgröße ein Skalenschritt ist und jede Zeilenhöhe auf dem Grundlinienraster sitzt. Du tippst keine Größen ein; du wählst ein Element aus und verstellst es schrittweise entlang der Skala.
Die Werkzeugleiste
- Basis: Fest / Fluid — fest nutzt die Skala unverändert; fluid interpoliert die Basis zwischen zwei Viewport-Breiten (siehe unten).
- Überschrift- / Fließtext-Schriften — standardmäßig der System-Stack oder eine Auswahl aus einer kuratierten Google-Fonts-Liste; Überschrift- und Fließtext-Slots sind unabhängig.
- CSS-Einheit — rem oder px. Die Skala wird in beiden Fällen gegen die Basis definiert; rem hält sie responsiv gegenüber den Nutzereinstellungen.
- Grundlinie — zeigt die abgeleitete Grundlinien-Einheit mit
ausgeschriebener Ableitung:
8px (16/2). Die Grundlinie ist Basis ÷ 2, festgelegt durch die Skala — die Raster-Ansicht zeigt sie an, besitzt sie aber nicht. - Raster — legt das Spaltenraster vom größten Breakpoint als schreibgeschützten Spiegel darüber (die Raster-Ansicht ist der alleinige Besitzer der Spalten).
Arbeiten im Musterblatt
Klicke einen Block an, um ihn auszuwählen, doppelklicke, um seinen Text zu bearbeiten. Dann:
- ↑ / ↓ — verstelle die Schriftgröße schrittweise entlang der Skala.
- ← / → — verstelle die Zeilenhöhe in Halb-Grundlinien-Schritten.
- Shift+B — blende das Grundlinienraster hinter dem Musterblatt ein und aus.
- Shift+G — blende das Spalten-Overlay ein und aus.
Elemente derselben Art in derselben Zeile teilen sich ihre Größe — passe eine Spaltenüberschrift an, und ihre Geschwister folgen. Der Musterblatt-Text selbst ist Inhalt: bearbeite ihn frei, und Sprachwechsel überschreiben ihn nicht.
Die Skalen-Karte
Die Seitenleiste listet die vollständige erzeugte Skala mit rem-Werten auf; Häkchen markieren die Stufen, die das Musterblatt tatsächlich verwendet. Es ist dieselbe Liste, die deine Exporte enthalten werden — das Musterblatt ist eine Vorschau der Tokens, kein separates Artefakt.
Fluider Modus
Der fluide Modus interpoliert die Basis zwischen einem minimalen und einem
maximalen Viewport (Standardwerte 16→18px über 375→1280). Jeder Skalenwert
wird zu einem CSS-clamp()-Ausdruck; die Viewport-Leiste lässt dich die
Vorschau über die gesamte Spanne scrubben, wobei die Raster-Breakpoints als
Sprungpunkte markiert sind. Die
Anleitungen zur fluiden Typografie behandeln,
wann sich fluid lohnt und wie die Mathematik funktioniert.
Zoom
Die schwebende Zoom-Steuerung skaliert die Vorschau — einpassen oder 50–150 %. Sie ist eine Linse über der Werkbank: Zoom berührt nie deine Werte oder den Export.