HomeCasa Prompts

Typografische Skala für ein Designsystem mit Tokens und fluidem CSS

Lege eine vollständige Typo-Skala fest: begründetes Verhältnis, Größen, Zeilenhöhen und Schriftschnitte je Stil, fluide Typografie mit clamp(), Leseregeln, Barrierefreiheit und Tokens. Entwickelt für ChatGPT, Claude, Gemini und Microsoft Copilot. Er enthält 6 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Fortgeschritten · Text · Redaktionelle Prüfung ausstehend

Entwickelt für:

Prompt

Handle als Typografin und Design-System-Designerin.

Kontext:
- Produkt oder Marke: {{produkt}}
- Plattformen: {{plattformen}}
- Verfügbare Schriftfamilien: {{schriften}}
- Basisgröße für Fließtext: {{basisgroesse}}
- Bevorzugtes Verhältnis: {{verhaeltnis}}
- Vorherrschende Inhaltsart: {{inhalt}}

Liefergegenstände:
1. Empfehlung zum Verhältnis: bestätige oder hinterfrage das gewählte Verhältnis für diese Inhaltsart (große Verhältnisse passen zu Marketing, kleine zu dichten Oberflächen) und begründe es.
2. Skalentabelle mit 8-10 Stilen (Display, H1-H4, Fließtext groß, Fließtext, Fließtext klein, Label, Caption): Token-Name, Größe in px und rem, Zeilenhöhe, Schriftschnitt, Laufweite und empfohlene Verwendung.
3. Fluide Typografie für Überschriften mit clamp(), inklusive der minimalen und maximalen Viewport-Breite der Berechnung.
4. Unterschiede zwischen Mobil und Desktop sowie Anpassungen für die genannten Plattformen.
5. Absatzregeln: 45-75 Zeichen pro Zeile, Absatzabstände und Hierarchie in Listen und Tabellen.
6. Barrierefreiheit: rem-Einheiten, 200 % Zoom, lesbare Mindestgrößen, Zeilenhöhe von mindestens 1,5 im Fließtext und Unterstützung der Textabstände nach WCAG 1.4.12.
7. Tokens als JSON (Design-Tokens-kompatibles Format) und als CSS-Variablen.
8. Fünf Nutzungsregeln: was zu tun und was zu vermeiden ist.

Einschränkungen:
- Erfinde keine Schriftmetriken (x-Höhe, verfügbare Schnitte); markiere benötigte Angaben als [AUSFÜLLEN].
- Erinnere mich daran, die Schriftlizenzen für Web und App zu prüfen.
- Runde Größen auf praktikable Werte und erkläre die Rundungen. Fehlen wichtige Informationen, frage mich zuerst.

Format: Skalentabelle, JSON- und CSS-Codeblöcke und die Liste der Regeln.

So verwenden Sie ihn

  1. Nenne die Schriften, für die du Lizenzen hast, und die Basisgröße. 2. Prüfe, ob das empfohlene Verhältnis zu deinen Inhalten passt. 3. Importiere die JSON-Tokens in dein Token-Tool oder übernimm die CSS-Variablen ins Projekt.

Anwendungsbeispiel

Produkt: Analytics-Dashboard · Schriften: Inter und JetBrains Mono · Basis: 16 px · Verhältnis: 1,2 · Inhalt: dichte Oberfläche.

Beispielergebnis

1. Verhältnis

Ich bleibe bei 1,2 (kleine Terz): Bei einer dichten Oberfläche mit Tabellen würde ein größeres Verhältnis die Überschriften aufblähen und den Daten Platz nehmen.

2. Skala (Basis 16 px)

TokenpxremZeilenhöheGewichtEinsatz
display4831,1700Kennzahl im Dashboard
h1402,51,15700Seitentitel
h23221,2600Abschnitt
h3281,751,25600Kartentitel
h4241,51,3600Unterabschnitt
body-lg201,251,5400Einleitungen
body1611,5400Fließtext
body-sm140,8751,5400Tabellenzellen
caption120,751,4500Achsen und Hinweise

Rundung: 1,2ⁿ ergibt 19,2 · 23,04 · 27,65 · 33,18 · 39,81; ich runde auf Vielfache von 4, damit alles im 4-px-Raster liegt.

3. Fluide Typografie (360-1280 px)

:root {
  --font-ui: "Inter", system-ui, sans-serif;
  --font-figures: "JetBrains Mono", ui-monospace, monospace;
  --text-body: 1rem;
  --text-h1: clamp(2rem, 1.804rem + 0.87vw, 2.5rem);
  --leading-body: 1.5;
}

Bitte die Lizenzen von Inter und JetBrains Mono für Web und App prüfen. Metriken wie die x-Höhe: [AUSFÜLLEN]…

Wichtige Fakten

Kategorie
UI/UX-Design · Designsysteme
Ausgabetyp
Text
Niveau
Fortgeschritten
Entwickelt für
ChatGPT, Claude, Gemini und Microsoft Copilot
Verifiziert in
Redaktionelle Prüfung ausstehend
Variablen
Produkt oder Marke, Plattformen, Schriftfamilien, Basisgröße, Verhältnis und Vorherrschender Inhalt
Sprache
Deutsch
Preis
Kostenlos, ohne Anmeldung
Aktualisiert
07.11.2026

Häufig gestellte Fragen

Welches Skalenverhältnis sollte ich wählen?

Dichte Oberflächen funktionieren meist mit sanften Verhältnissen wie 1,125 oder 1,2; Marketing- und Editorial-Seiten profitieren von 1,25 oder 1,333 für mehr Kontrast zwischen Überschriften und Text.

Warum rem statt px?

rem-Einheiten respektieren die Schriftgröße, die Nutzer im Browser eingestellt haben. Das verbessert die Barrierefreiheit für Menschen, die größere Schrift brauchen.

Wofür ist dieser Prompt gedacht?

Lege eine vollständige Typo-Skala fest: begründetes Verhältnis, Größen, Zeilenhöhen und Schriftschnitte je Stil, fluide Typografie mit clamp(), Leseregeln, Barrierefreiheit und Tokens.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude, Gemini und Microsoft Copilot entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Produkt oder Marke, Plattformen, Schriftfamilien, Basisgröße, Verhältnis und Vorherrschender Inhalt). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Er ist für Fortgeschrittene: Es hilft, das Thema zu kennen, um guten Kontext zu liefern und das Ergebnis kritisch zu prüfen.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts