Typografie

Das Typo-System nutzt Fluid Typography — Schriftgrößen passen sich automatisch an die Viewportbreite an. Kein manuelles Setzen von Breakpoints für Texte nötig.

So funktioniert Fluid Type

Jede Schriftgröße ist mit clamp() definiert. Die Größe bewegt sich fliessend zwischen einem Minimum und Maximum, basierend auf der Container-Breite (cqi). Das Ergebnis: perfekte Lesbarkeit auf Handy und Desktop, ohne Breakpoints.

Beispiel

--text-h1: clamp(2.5rem, 10cqi, 5rem)

Bedeutet: H1 ist mindestens 2.5rem (40px), hoechstens 5rem (80px) und skaliert dazwischen basierend auf der Containerbreite.

Überschriften

Ändere die Browserbreite, um die fluide Skalierung zu sehen.

h1 --text-h1

Willkommen auf unserer Webseite

h2 --text-h2

Unsere Leistungen im Überblick

h3 --text-h3

Webentwicklung mit modernsten Tools

h4 --text-h4

Technische Details und Spezifikationen

h5 --text-h5

Häufig gestellte Fragen

h6 --text-h6

Zusätzliche Hinweise und Anmerkungen

Fliesstexte

p.large --text-paragraph-large

Dies ist ein großer Absatz für Einleitungstexte und hervorgehobene Informationen. Er wird häufig direkt unter Überschriften verwendet, um den Kontext zu setzen.

p --text-paragraph

Dies ist der Standard-Absatztext. Er wird für den Hauptinhalt der Seite verwendet. Die Zeilenhoehe von 1.6 sorgt für gute Lesbarkeit, auch bei laengeren Texten. Idealerweise sind Absätze nicht länger als 3-4 Zeilen, damit der Inhalt leicht erfassbar bleibt.

small --text-small

Kleiner Text für Hinweise, Bildunterschriften, Copyright-Angaben und Meta-Informationen.

Abstands-Regeln (Prose Flow)

Zwischen Überschriften und Absätzen werden automatisch sinnvolle Abstände gesetzt. Das erspart manuelle Spacing-Klassen im Fließtext.

Automatische Abstände in Aktion

Dieser Text steht direkt unter einer H3. Der Abstand wird automatisch durch die Prose-Flow-Regeln bestimmt — kein manuelles mt-4 nötig.

Zwischen zwei Absätzen ist der Abstand etwas kleiner als nach einer Überschrift.

Weitere Unterpunkte

Auch vor Unterueberschriften wird automatisch mehr Platz eingefügt, damit die visuelle Hierarchie stimmt.

Listen werden ebenfalls korrekt dargestellt
Mit Aufzaehlungspunkten und passendem Einzug
Links wie dieser hier bekommen die Primary-Farbe