Kapitel 04
Typografie
Outfit für Headlines und Zahlen, Figtree für Text, DM Mono für Labels – lokal eingebunden.
Als Markdown für KIAa Bb 0123
Aa Bb 0123
Aa Bb 0123
Aa Bb 0123
Schriften
| Schrift | Rolle | Schnitte |
|---|---|---|
| Outfit | Display: Headlines, Seitentitel, große Zahlen, Wortmarke. Eng gesetzt. | 400, 500, 600, 700 (variabel) |
| Figtree | Text: Fließtext, UI, Tabellen, Knöpfe. | 400, 500, 600 (variabel) |
| DM Mono | Nur Labels in Großbuchstaben, Tastenkürzel, Codes. | 400, 500 |
Alle drei stehen unter der SIL Open Font License 1.1 – frei nutzbar, auch kommerziell. Wir binden sie lokal ein (keine Anfragen an Google Fonts).
Schriftstile der App
seite-kontext · Outfit 400 · 44pxÜbersichtseite-titel · Outfit 600 · 56pxSeptember 2026karten-titel · Outfit 500 · 18pxLiquiditätzahl-xl · Outfit 500 · 56px84.320,45 €zahl-l · Outfit 500 · 38px71.860 €zahl-m · Outfit 500 · 26px21.400 €text · Figtree 400 · 15pxDer Unternehmer führt, die Kanzlei prüft.text-klein · Figtree 400 · 13pxBeispieldaten · Stand September 2026label · DM Mono 500 · 12pxSteuer-Cockpit| Stil | Schrift | Größe | Gewicht | Laufweite | Zeilenhöhe | Einsatz |
|---|---|---|---|---|---|---|
seite-kontext |
Outfit | 44px | 400 | -0.03em | 1 | Erste Zeile des Seitentitels in text.leise („Übersicht“). Mobil 34 px. |
seite-titel |
Outfit | 56px | 600 | -0.04em | 1.1 | Zweite Zeile („September 2026“). Mobil 40 px. |
karten-titel |
Outfit | 18px | 500 | 0em | 1.3 | |
zahl-xl |
Outfit | 56px | 500 | -0.03em | 1 | Hauptkennzahl; Nachkommastellen 55 % Größe in text.leise. Tabellarische Ziffern. |
zahl-l |
Outfit | 38px | 500 | -0.03em | 1 | |
zahl-m |
Outfit | 26px | 500 | -0.03em | 1.1 | |
text |
Figtree | 15px | 400 | 0em | 1.5 | |
text-klein |
Figtree | 13px | 400 | 0em | 1.4 | Metadaten, Hinweise in text.leise. |
label |
DM Mono | 12px | 500 | 0.12em | 1.3 | Eyebrows in Großbuchstaben, Tastenkürzel. |
Schriftstile Marketing und Folien
| Stil | Größe / Zeilenhöhe | Schnitt | Einsatz |
|---|---|---|---|
| display-xl | 72 / 76 px, −0,02 em | Outfit 600 | Website-Hero, Titelfolien. Max. zwei Zeilen. |
| display-l | 52 / 56 px, −0,02 em | Outfit 600 | Folientitel, Sektionsköpfe |
| heading | 34 / 40 px, −0,01 em | Outfit 600 | Kartentitel groß, Unterüberschriften |
| title | 22 / 28 px | Figtree 600 | Kartentitel, Listenköpfe |
| body-l | 19 / 28 px | Figtree 400 | Einleitungen, Folien-Fließtext |
| body | 16 / 24 px | Figtree 400 | Fließtext |
| small | 14 / 20 px | Figtree 400 | Hinweise, Quellen, Metadaten |
| label | 12 / 16 px, +0,12 em, Versalien | DM Mono 500 | Eyebrows, Labels |
Regeln
- Headlines linksbündig (zentriert nur bei Social und Titelfolien), Fließtext immer linksbündig.
- Große Zahlen in Outfit 500, eng gesetzt, mit tabellarischen Ziffern; Nachkommastellen kleiner und leise: 84.320,45 €.
- Beträge in der App nie in Mono – Mono nur für Labels, Tastenkürzel und Codes.
- Seitentitel zweistufig: Kontext in Outfit 400 in Grau („Übersicht“), darunter groß in Outfit 600 („September 2026“).
- Klar-Markierung höchstens einmal pro Headline, nie im Fließtext.
- Keine Unterstreichungen außer für Links im Fließtext; keine Kursivschrift für Hervorhebung – lieber Halbfett.