Guten Morgen, Anna.
Bricolage Grotesque · --schrift-titel
"Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif
bricolage-grotesque-latin-ext.woff2 30 KBbricolage-grotesque-latin.woff2 75 KBBricolageGrotesque[opsz,wdth,wght].ttf 399 KB
Grundlagen
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.
Hey Albert hat vier Schriften. Jede hat genau eine Aufgabe. Eine fünfte gibt es nicht, auch nicht für eine Kampagne.
Freitag, 16:40 · Handball, Halle Süd. Tobias fährt.
Inter · --schrift-text
Inter, system-ui, -apple-system, sans-serif
inter-latin-ext.woff2 83 KBinter-latin.woff2 47 KBInter[opsz,wght].ttf 856 KB
KW 36 · 07:30 · 48,00 €
Roboto Mono · --schrift-mono
"Roboto Mono", ui-monospace, "SF Mono", monospace
roboto-mono-latin-ext.woff2 22 KBroboto-mono-latin.woff2 32 KBRobotoMono[wght].ttf 179 KB
Lena hat heute Schwimmen.
Reenie Beanie · --schrift-hand
"Reenie Beanie", "Bradley Hand", cursive
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.
--grad-anrede-mac · 40pxGuten Morgen, Anna.--grad-anrede-phone · 30pxdieselbe Zeile auf dem iPhone--grad-zahl-gross · 34px8,7 h--grad-block-titel · 22pxLogo in der Leiste--grad-abschnitt · 17pxSchwimmen mit Lena--grad-karten-titel · 14.5pxKartentitel--grad-text · 14pxSchwimmen mit Lena--grad-zweit · 12pxZweitzeile, Zeiten--grad-klein · 11pxSchwimmen mit Lena--grad-kapitaelchen · 10pxMi 3- 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-titelin Inter 600. Darunter steht die Zweitzeile in--grad-zweitund--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 übertokens/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.
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.