Font Families

Maison Regular (.sans)

Body-Text und Standard-Schriftart für alle normalen Inhalte.

Maison Mono (.mono)

Für Icons, Code und spezielle monospace Anwendungen.

Sans Font Mods - Alle Klassen aus $root font-mods

Sans M2 (.sans-m2) - 12px/20px

Sans M1B (.sans-m1b) - 15px/25px

Sans M1 (.sans-m1) - 16px/25px

Sans H6 (.sans-h6) - 20px/30px

Sans H5 (.sans-h5) - 20px/30px

Sans H4 (.sans-h4) - 20px/30px

Sans H3 (.sans-h3) - 25px/35px

Sans H2C (.sans-h2c) - 25px/35px

Sans H2B (.sans-h2b) - 40px/40px

Sans H2 (.sans-h2) - 40px/50px

Sans H1 (.sans-h1) - 80px/80px

Sans T4 (.sans-t4) - 16px/25px

Sans T2 (.sans-t2) - 17px/27px

Sans T1 (.sans-t1) - 18px/29px

Sans S1 (.sans-s1) - 40px/45px

Mono Font Mods - Alle Klassen

Mono I2 (.mono-i2) - 14px/25px

Mono I1B (.mono-i1b) - 16px/25px

Mono I1 (.mono-i1) - 14px/25px

Standard HTML Headings

Heading 1 - Automatische Größe je Breakpoint

Heading 2 - Automatische Größe je Breakpoint

Heading 3 - Automatische Größe je Breakpoint

Heading 4 - Automatische Größe je Breakpoint

Heading 5 - Automatische Größe je Breakpoint

Heading 6 - Automatische Größe je Breakpoint

Link-System - Standard Links (.link)

Dies ist ein Text mit einem Standard Link darin.

Mehrere Links: Erster Link und Zweiter Link.

Span als Link

Outer Links (.link-outer)

Komplexer Link mit inneren Elementen

Vor dem Link-Text Hauptlink Nach dem Link-Text

Hover-Effekt Link

Focus-Ring Link

Button Links (.link-btn)

BUTTON LINK

→ MIT ICON LINKS

MIT ICON RECHTS ←

Links ohne href (Quasi-Reset)

Dies ist ein Link ohne href der sich wie normaler Text verhält.

Auch ohne tabindex funktioniert das.

Praktische Anwendungsbeispiele

Große Überschrift für Hero-Bereiche

Haupt-Überschrift für Sektionen

Kompakte H2-Variante

Bold H2 ohne zusätzliche Line-Height

Special Text S1 für Highlights

Optimaler Fließtext für beste Lesbarkeit

Text T2 für wichtige Inhalte

Text T4 Standard

Standard Body Text

Body Text Bold Variante

Kleine Zusatzinformationen oder Captions

Mono Text für Code oder technische Inhalte

Mono Text Bold

Mono Text größere Variante

Fließtext Beispiele

Standard Absatz (p)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Intro Text (.intro)

Haupttext (.main-text)

Kleiner Text (.small)

Caption Text (.caption)

Bildunterschrift oder kleine Zusatzinformationen werden oft in dieser Größe dargestellt.

Verlinkte Texte in Fließtext

Standard Links in Text

Hier ist ein normaler Link im Fließtext. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Noch ein Link zur Demonstration.

Outer Links in Text

Komplexer Link mit inneren Elementen und weitere Texte drumherum.

Button Links in Text

Hier ist ein BUTTON LINK STIL im Fließtext integriert.

Links ohne href (erben Textstil)

Das ist ein Link ohne href der sich wie normaler Text verhält und die Schriftart des Parent-Elements erbt.

Text Formatierungen

Fett und Kursiv

Das ist fetter Text und das ist kursiver Text. Hier ist fett und kursiv kombiniert.

Hochgestellt und Tiefgestellt

Die Formel für Wasser ist H₂O. Einstein's berühmte Formel ist E=mc². Das war im 21^sten Jahrhundert.

Vollständig fetter Absatz

Ungeordnete Listen

Standard Liste (ul)

Erster Listenpunkt
Zweiter Listenpunkt mit längere Beschreibung die über mehrere Zeilen geht
Dritter Listenpunkt
Vierter Listenpunkt

Verschachtelte Liste

Hauptpunkt 1
- Unterpunkt 1.1
- Unterpunkt 1.2
- Unterpunkt 1.3
Hauptpunkt 2
- Unterpunkt 2.1
- Unterpunkt 2.2
Hauptpunkt 3

Liste mit Links

Verlinkter Listenpunkt
Normaler Punkt mit internem Link
Punkt mit BUTTON LINK

Geordnete Listen

Nummerierte Liste (ol)

Erster Schritt
Zweiter Schritt mit längerer Beschreibung
Dritter Schritt
Vierter Schritt

Verschachtelte nummerierte Liste

Hauptschritt 1
1. Unterschritt 1.1
2. Unterschritt 1.2
Hauptschritt 2
Hauptschritt 3
1. Unterschritt 3.1
2. Unterschritt 3.2
3. Unterschritt 3.3

Spezielle Listen-Stile

Inline Liste (.list.list--inline)

Punkt 1
Punkt 2
Punkt 3
Punkt 4
Punkt 5

Tag Liste (.list.list--tags)

Tag 1
Tag 2
Tag 3
Längerer Tag Name
Tag 5

Liste mit Hervorhebungen

Wichtiger Punkt:
Hier folgt eine längere Beschreibung zu diesem wichtigen Punkt, die über mehrere Zeilen geht und detaillierte Informationen enthält.
Zweiter wichtiger Punkt:
Auch hier gibt es eine ausführliche Beschreibung mit wichtigen Details und Zusatzinformationen.
Dritter Punkt:
Weitere wichtige Informationen zu diesem Thema.

Blockquotes und Zitate

Standard Blockquote

Dies ist ein wichtiges Zitat oder eine Hervorhebung, die als Blockquote formatiert ist. Es hebt sich vom normalen Fließtext ab und zieht die Aufmerksamkeit des Lesers auf sich.

Blockquote mit Quellenangabe

Design ist nicht nur, wie es aussieht und sich anfühlt. Design ist, wie es funktioniert.
— Steve Jobs

Inline Zitat (q)

Wie bereits erwähnt: Weniger ist mehr gilt besonders im modernen Webdesign.

Stack und Spacing Klassen

Plain Text Stacks (.plain)

Absatz 1 in einem Plain Stack

Absatz 2 mit automatischem Spacing

Absatz 3 mit korrekten Abständen

Mono Text Stack (.plain-mono-i1)

Monospace Text Absatz 1

Monospace Text Absatz 2 mit Link

Monospace Text Absatz 3

Plain Text Stack (.plain-txt)

Standardtext mit optimalen Abständen

Listenpunkt mit Custom-Bullets
Zweiter Punkt
Dritter Punkt

Nummerierte Liste
Mit Custom-Styling
Und korrekten Abständen

Responsive Breakpoint Klassen

Responsive Font-Größen

Alle Font-Klassen sind auch mit Breakpoint-Suffixen verfügbar:

H2 nur ab Small Breakpoint (.sans-h2__s)

H1 nur ab Medium Breakpoint (.sans-h1__m)

T1 nur ab Large Breakpoint (.sans-t1__l)

Verfügbare Breakpoints

__xs: ab 26em (416px)
__s: ab 36em (576px)
__m: ab 52em (832px)
__l: ab 72em (1152px)
__xl: ab 104em (1664px)

Alle verfügbaren Font-Klassen Übersicht

Font Familie Basis-Klassen:


		.sans

		.mono

Sans Font-Mod Klassen:


		.sans-m2 (12px/20px)

		.sans-m1b (15px/25px)

		.sans-m1 (16px/25px)

		.sans-h6 (20px/30px)

		.sans-h5 (20px/30px)

		.sans-h4 (20px/30px)

		.sans-h3 (25px/35px)

		.sans-h2c (25px/35px)

		.sans-h2b (40px/40px)

		.sans-h2 (40px/50px)

		.sans-h1 (80px/80px)

		.sans-t4 (16px/25px)

		.sans-t2 (17px/27px)

		.sans-t1 (18px/29px)

		.sans-s1 (40px/45px)

Mono Font-Mod Klassen:


		.mono-i2 (14px/25px)

		.mono-i1b (16px/25px)

		.mono-i1 (14px/25px)

Stack/Layout Klassen:


		.plain

		.plain-txt

		.plain-mono-i1

		.stack

		.chain

Link-System Klassen:


		.link

		.link-outer

		.link-inner

		.link-btn

		.link-hover

		.link-focus

Responsive Suffixe:

Alle oben genannten Klassen sind auch mit Breakpoint-Suffixen verfügbar:


		.__xs, .__s, .__m, .__l, .__xl

		Beispiele: .sans-h1__s, .sans-h1__m, .mono-i1__l

zurück zur Übersicht