# Schrift > Vier Schriften mit vier Aufgaben – Bricolage Grotesque für Titel, Inter für alles, was gelesen und bedient wird, Roboto Mono für Kennungen, Reenie Beanie für Alberts Randnotizen. Alle lokal ausgeliefert. Quelle: https://brand.heyalbert.family/schrift/ · Hey Albert Marke und Designsystem Hey Albert hat vier Schriften. Jede hat genau eine Aufgabe. Eine fünfte gibt es nicht, auch nicht für eine Kampagne. | Rolle | Familie | Einsatz | | --- | --- | --- | | schrift-titel | "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif | | | schrift-text | Inter, system-ui, -apple-system, sans-serif | | | schrift-mono | "Roboto Mono", ui-monospace, "SF Mono", monospace | | | schrift-hand | "Reenie Beanie", "Bradley Hand", cursive | | Dateien: [bricolage-grotesque-latin-ext.woff2](https://brand.heyalbert.family/schriften/web/bricolage-grotesque-latin-ext.woff2), [bricolage-grotesque-latin.woff2](https://brand.heyalbert.family/schriften/web/bricolage-grotesque-latin.woff2), [inter-latin-ext.woff2](https://brand.heyalbert.family/schriften/web/inter-latin-ext.woff2), [inter-latin.woff2](https://brand.heyalbert.family/schriften/web/inter-latin.woff2), [reenie-beanie-latin.woff2](https://brand.heyalbert.family/schriften/web/reenie-beanie-latin.woff2), [roboto-mono-latin-ext.woff2](https://brand.heyalbert.family/schriften/web/roboto-mono-latin-ext.woff2), [roboto-mono-latin.woff2](https://brand.heyalbert.family/schriften/web/roboto-mono-latin.woff2), [BricolageGrotesque[opsz,wdth,wght].ttf](https://brand.heyalbert.family/schriften/app/BricolageGrotesque[opsz,wdth,wght].ttf), [Inter[opsz,wght].ttf](https://brand.heyalbert.family/schriften/app/Inter[opsz,wght].ttf), [OFL-BricolageGrotesque.txt](https://brand.heyalbert.family/schriften/app/OFL-BricolageGrotesque.txt), [OFL-Inter.txt](https://brand.heyalbert.family/schriften/app/OFL-Inter.txt), [OFL-ReenieBeanie.txt](https://brand.heyalbert.family/schriften/app/OFL-ReenieBeanie.txt), [OFL-RobotoMono.txt](https://brand.heyalbert.family/schriften/app/OFL-RobotoMono.txt), [ReenieBeanie.ttf](https://brand.heyalbert.family/schriften/app/ReenieBeanie.ttf), [RobotoMono[wght].ttf](https://brand.heyalbert.family/schriften/app/RobotoMono[wght].ttf), [LIZENZEN.md](https://brand.heyalbert.family/schriften/LIZENZEN.md) ## Die vier Rollen | Rolle | Schrift | Wofür | Nie für | |---|---|---|---| | `--schrift-titel` | Bricolage Grotesque, 800, eng | Anrede, Flächentitel, große Zahlen, Überschriften der Website | Fließtext, Knöpfe | | `--schrift-text` | Inter, 400 / 500 / 600 | alles, was gelesen und bedient wird: Kartentitel, Text, Knöpfe, Pillen, Kapitälchen | Titel über `--grad-abschnitt` | | `--schrift-mono` | Roboto Mono | technische Kennungen: Kalenderwoche, Zeitachsen, dichte Raster, Code | Sätze | | `--schrift-hand` | Reenie Beanie | Alberts Bleistift-Randnotizen in Erzähler-Momenten | Knöpfe, Listen, Tabellen, Safe, Finanzen, jede Bedienung | Bricolage steht immer in `--gewicht-titel` und mit `--laufweite-titel`, also eng gelaufen. So wirkt eine Anrede wie „Guten Morgen, Anna.“ wie ein Wort und nicht wie eine Zeile. Inter trägt drei Gewichte: `--gewicht-text` für Lesetext, `--gewicht-text-halb` für Zweitknöpfe und Etiketten, `--gewicht-text-fest` für Kartentitel und den Primärknopf. Die Handschrift steht höchstens ein- bis zweimal je Fläche. Sie ist eine Randnotiz, kein Stil. Beispiel aus dem Jahresbuch: „Am Freitag ist Platz.“ ## Grade Die Grade sind feste Stufen. Eine Zwischengröße gibt es nicht. | Token | CSS | Wert | Dunkel | Bedeutung | | --- | --- | --- | --- | --- | | gewicht-titel | var(--gewicht-titel) | 800 | | | | gewicht-text | var(--gewicht-text) | 400 | | | | gewicht-text-halb | var(--gewicht-text-halb) | 500 | | | | gewicht-text-fest | var(--gewicht-text-fest) | 600 | | | | grad-anrede-mac | var(--grad-anrede-mac) | 40px | | „Guten Morgen, Anna.“ auf dem Mac | | grad-anrede-phone | var(--grad-anrede-phone) | 30px | | dieselbe Zeile auf dem iPhone | | grad-zahl-gross | var(--grad-zahl-gross) | 34px | | Zahl-Kachel: 8,7 h | | grad-block-titel | var(--grad-block-titel) | 22px | | Logo in der Leiste | | grad-abschnitt | var(--grad-abschnitt) | 17px | | | | grad-karten-titel | var(--grad-karten-titel) | 14.5px | | Kartentitel | | grad-text | var(--grad-text) | 14px | | | | grad-zweit | var(--grad-zweit) | 12px | | Zweitzeile, Zeiten | | grad-klein | var(--grad-klein) | 11px | | | | grad-kapitaelchen | var(--grad-kapitaelchen) | 10px | | Wochentag im Tagesreiter | | laufweite-titel | var(--laufweite-titel) | -0.03em | | eng, wie in den Screensets | | laufweite-text | var(--laufweite-text) | 0em | | | | laufweite-kapitaelchen | var(--laufweite-kapitaelchen) | 0.08em | | | | zeile-titel | var(--zeile-titel) | 1.02 | | | | zeile-karten-titel | var(--zeile-karten-titel) | 1.2 | | | | zeile-text | var(--zeile-text) | 1.45 | | | - Die Anrede ist auf dem Mac `--grad-anrede-mac`, auf dem iPhone `--grad-anrede-phone`. - Große Zahlen auf farbigen Kacheln stehen in `--grad-zahl-gross`, in Bricolage, mit tabellarischen Ziffern: „8,7 h“. - Der Kartentitel ist `--grad-karten-titel` in Inter 600. Darunter steht die Zweitzeile in `--grad-zweit` und `--text-zweit`. - Kapitälchen (`--grad-kapitaelchen`, `--laufweite-kapitaelchen`, Großbuchstaben) stehen nur im Tagesreiter und als Etikett über Gruppen. ## Zeilen und Ziffern - Zeilenhöhe: Titel `--zeile-titel`, Kartentitel `--zeile-karten-titel`, Text `--zeile-text`. - Zahlen und Zeiten immer mit `--ziffern-tabellarisch`. Dann stehen 07:30 und 16:40 sauber untereinander. In SwiftUI heißt das `.monospacedDigit()`. - Uhrzeit immer `16:40`, Beträge mit Komma: `48,00 €`. ## Lokal, nie von Google Alle vier Schriften liegen bei uns und werden von unserem Server ausgeliefert. Kein Aufruf geht an `fonts.googleapis.com` oder `fonts.gstatic.com`. So verlässt keine IP-Adresse eines Besuchers das Haus. Der Grund: Das Landgericht München I hat am 20.01.2022 (3 O 17493/20) das Einbinden von Google Fonts über Googles Server als Verletzung des Persönlichkeitsrechts gewertet. Für eine Familien-App mit Kinderdaten kommt das nicht in Frage. - **Website und Web-App:** woff2 aus `packages/design-system/assets/fonts/`, eingebunden über `tokens/fonts.css`. Es sind variable Schriften: eine Datei trägt alle Gewichte. - **App:** variable TTF aus `assets/fonts/ttf/`, im App-Paket gebündelt und registriert. Die App wählt aus den benannten Schnitten den nächsten in Gewicht und optischer Größe. - [Schriften mit Lizenzen](https://brand.heyalbert.family/downloads/hey-albert-schriften.zip) ## Lizenzen | Schrift | Lizenz laut `LIZENZEN.md` | Urheber | |---|---|---| | Bricolage Grotesque | SIL Open Font License 1.1 | Mathieu Triay | | Inter | SIL Open Font License 1.1 | Rasmus Andersson | | Roboto Mono | Apache License 2.0 | Christian Robertson, Google | | Reenie Beanie | SIL Open Font License 1.1 | James Grieshaber | Alle dürfen kommerziell genutzt und lokal ausgeliefert werden. Die Lizenztexte reisen mit jeder Weitergabe mit. Wir verändern keine Schrift. > **Offen: Lizenz von Roboto Mono** > > `assets/fonts/LIZENZEN.md` und `tokens/fonts.css` nennen für Roboto Mono die Apache License 2.0. Die mitgelieferte Datei `assets/fonts/ttf/OFL-RobotoMono.txt` sagt dagegen SIL Open Font License 1.1. Beide erlauben unsere Nutzung. Zu klären ist nur, welcher Text in `LIZENZEN.md` steht. ## Kurz > **So** > > - Titel in Bricolage, alles andere in Inter. > - Nur Grade aus den Tokens. > - Tabellarische Ziffern für jede Zahl und jede Uhrzeit. > - Handschrift sparsam, nur als Randnotiz von Albert. > **Nicht so** > > - Eine fünfte Schrift, auch nicht für Social Media. > - Schriften über Google-Server, auch nicht „nur zum Testen“. > - Bricolage in Fließtext oder Knöpfen, Handschrift in Bedienung. > - Freie Grade wie `font-size: 15px`, Großbuchstaben für ganze Sätze.