---
titel: Typografie
quelle: https://brand.meinklarbuch.de/typografie
stand: 2026-09-24
---

# Typografie

- **Outfit (variabel)** (schrift) – Headlines, Seitentitel, große Zahlen.. Lizenz: SIL Open Font License 1.1. Download: [WOFF2](https://brand.meinklarbuch.de/assets/schriften/Outfit-Variable.woff2)
- **Figtree (variabel)** (schrift) – Fließtext, UI, Tabellen, Knöpfe.. Lizenz: SIL Open Font License 1.1. Download: [WOFF2](https://brand.meinklarbuch.de/assets/schriften/Figtree-Variable.woff2)
- **DM Mono Regular** (schrift) – Labels, Tastenkürzel, Codes.. Lizenz: SIL Open Font License 1.1. Download: [WOFF2](https://brand.meinklarbuch.de/assets/schriften/DMMono-Regular.woff2)
- **DM Mono Medium** (schrift) – Labels in Versalien.. Lizenz: SIL Open Font License 1.1. Download: [WOFF2](https://brand.meinklarbuch.de/assets/schriften/DMMono-Medium.woff2)

## 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

| 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.