coastdigitalgroup/coastai-skills

Fluid Typografie-System

Zweck

Die Fähigkeit „Fluid Typografie-System“ ermöglicht die Erstellung einer typografischen Skala, die sich nahtlos an die Viewport-Größe des Benutzers anpasst. Anstatt zwischen festen Größen an bestimmten Breakpoints zu springen, skaliert die Typografie linear zwischen definierten Min- und Max-Werten unter Verwendung der CSS clamp()-Funktion. Dies verbessert die visuelle Harmonie, Lesbarkeit und reduziert den Wartungsaufwand für zahlreiche Media Queries.

Anwendungsfälle

• Aufbau eines responsiven Designsystems von Grund auf.
• Modernisierung der Typografie einer bestehenden Website für eine bessere geräteübergreifende Konsistenz.
• Erstellung von Layouts, bei denen Text den verfügbaren Platz auf allen Bildschirmgrößen perfekt ausfüllen muss.
• Vereinfachung von CSS durch Ersetzen mehrerer @media-Regeln durch einen einzigen Satz fließender Variablen.

Wann NICHT verwenden

• Unterstützung älterer Browser: Wenn das Projekt Browser unterstützen muss, die clamp() nicht verstehen (z. B. Internet Explorer).
• Festbreitenlayouts: Wenn das Layout streng festgelegt ist und nicht responsiv sein soll.
• Extreme Präzision: Wenn spezifische Markenrichtlinien exakte Pixelgrößen bei jeder möglichen Auflösung vorschreiben, die nicht mit einer linearen Skala übereinstimmen.

Eingaben

Um ein fließendes Typografie-System zu generieren, benötigen Sie:

1. Viewport-Bereich:
   • min-width: Die Bildschirmbreite, bei der die Skalierung beginnt (z. B. 320px).
   • max-width: Die Bildschirmbreite, bei der die Skalierung endet (z. B. 1200px).
2. Basis-Schriftgröße:
   • min-size: Die Schriftgröße des Fließtexts bei min-width (z. B. 16px).
   • max-size: Die Schriftgröße des Fließtexts bei max-width (z. B. 20px).
3. Skalenverhältnis:
   • Ein Multiplikator zur Bestimmung der Größe von Überschriften (z. B. 1,250 für „Große Terz”, 1,333 für „Reine Quarte”).

Ausgaben

1. CSS-Custom-Properties: Ein Block von CSS-Variablen, die die fließende Skala definieren.
2. Typografie-Hilfsklassen: (Optional) CSS-Klassen zur einfachen Anwendung der Skala.
3. Hierarchie-Dokumentation: Eine klare Zuordnung der Größen von Fließtext bis H1.

Arbeitsablauf

1. Skalenparameter definieren

Bestimmen Sie die minimalen und maximalen Viewports sowie die Basisgrößen. Beispiel: 320px bis 1280px, 16px bis 18px Basis.

2. Typografische Skala auswählen

Wählen Sie ein Verhältnis, das zur Markenstimme passt.

• 1,067 (Kleine Sekunde): Subtile Unterschiede, gut für dichte Daten.
• 1,200 (Kleine Terz): Standard, ausgewogen.
• 1,414 (Vergrößerte Quarte): Hoher Kontrast, kräftige Überschriften.

3. Hierarchieebenen berechnen

Multiplizieren Sie die Basisgröße mit dem Verhältnis für jede Ebene (H6 bis H1). Formel: Size_level = Base * (Ratio ^ Level)

4. Fließende Formeln generieren

Konvertieren Sie die berechneten Min-/Max-Pixelwerte in eine clamp()-Funktion. clamp(min, preferred, max)

Die Berechnung des bevorzugten Werts: slope = (max_size - min_size) / (max_viewport - min_viewport) y_intercept = min_size - slope * min_viewport preferred = (y_intercept) + (slope * 100vw)

5. Implementierung

Wenden Sie die generierten CSS-Variablen auf das Design an.

Entscheidungsregeln

• Barrierefreiheit zuerst: Die min-size für Fließtext sollte selten unter 1rem (16px) liegen.
• Benutzereinstellung: Verwenden Sie immer rem-Einheiten für die endgültige Ausgabe, damit die Schriftgrößeneinstellungen des Browser des Benutzers respektiert werden. Verwenden Sie niemals eine reine vw-Größenangabe ohne rem-basierte Min-/Max-Clamping – reine Viewport-Einheiten ignorieren die Browser-Zoom- und Schriftgrößen-Einstellungen des Benutzers und können WCAG 1.4.4 (Textgröße anpassen) verletzen.
• Skalierungsintensität: Verwenden Sie für mobilastige Websites kleinere Verhältnisse, um zu verhindern, dass Überschriften auf kleinen Bildschirmen übermäßig groß werden.

Einschränkungen

• Responsivität: Die Typografie muss innerhalb der Grenzen ihres Containers bleiben, ohne Überlauf zu verursachen.
• Lesbarkeit: Die Zeilenlänge (Maß) sollte idealerweise zwischen 45 und 75 Zeichen liegen. Passen Sie die Containerbreiten entsprechend an, während der Text skaliert.
• Hierarchie: H1 muss immer visuell deutlich und größer als H2 sein, H2 wiederum größer als H3 usw.

Häufige Fehlermuster

• Falsche Berechnung: Führt dazu, dass der Text schrumpft, wenn der Bildschirm größer wird.
• Einheitenkonflikt: Mischen von px und rem auf eine Weise, die das Browser-Zooming beeinträchtigt.
• Überskalierung: Überschriften werden auf 4K-Monitoren so groß, dass sie den gesamten Viewport dominieren.
• Barrierefreiheit: Vergessen zu testen, wie sich die fließende Skala verhält, wenn ein Benutzer hineinzoomt oder die OS-/Browser-Basisschriftgröße erhöht (WCAG 1.4.4 Textgröße anpassen, WCAG 1.4.10 Umfluss).

Validierungskriterien

• Typografie skaliert gleichmäßig beim Ändern der Fenstergröße des Browsers.
• Es sind keine „Springe” oder plötzlichen Größenänderungen sichtbar.
• Der gesamte Text ist bei 320px Breite lesbar.
• Überschriften behalten im Verhältnis zum Fließtext eine klare Hierarchie bei.
• Das System verwendet rem-Einheiten für die Basis und clamp() für das fließende Verhalten.
• Text fließt ohne Verlust von Inhalt oder Funktion bei 400% Browser-Zoom um (WCAG 1.4.10 Umfluss) und respektiert die Schriftgrößeneinstellung des Benutzers (WCAG 1.4.4).