# Type

> Four typefaces with four jobs – Bricolage Grotesque for titles, Inter for everything that is read and operated, Roboto Mono for identifiers, Reenie Beanie for Albert’s margin notes. All served locally.

Source: https://brand.heyalbert.family/en/schrift/ · Hey Albert brand and design system

Hey Albert has four typefaces. Each has exactly one job. There is no fifth, not even for a campaign.

| Role | Family | Use |
| --- | --- | --- |
| 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 |  |

Files: [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)

## The four roles

| Role | Typeface | For | Never for |
|---|---|---|---|
| `--schrift-titel` | Bricolage Grotesque, 800, tight | greeting, surface titles, large numbers, website headings | body text, buttons |
| `--schrift-text` | Inter, 400 / 500 / 600 | everything that is read and operated: card titles, text, buttons, pills, small caps | titles above `--grad-abschnitt` |
| `--schrift-mono` | Roboto Mono | technical identifiers: calendar week, time axes, dense grids, code | sentences |
| `--schrift-hand` | Reenie Beanie | Albert’s pencil margin notes in storyteller moments | buttons, lists, tables, safe, finances, any control |

Bricolage always sits at `--gewicht-titel` with `--laufweite-titel`, set tight. That way a greeting like “Guten Morgen, Anna.” reads as one word rather than a line.

Inter carries three weights: `--gewicht-text` for reading, `--gewicht-text-halb` for secondary buttons and labels, `--gewicht-text-fest` for card titles and the primary button.

Handwriting appears once or twice per surface at most. It is a margin note, not a style. An example from the yearbook: “Am Freitag ist Platz.” (Friday is free.)

## Sizes

The sizes are fixed steps. There is no size in between.

| Token | CSS | Value | Dark | Meaning |
| --- | --- | --- | --- | --- |
| 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 |  |  |

- The greeting is `--grad-anrede-mac` on the Mac and `--grad-anrede-phone` on iPhone.
- Large numbers on coloured tiles use `--grad-zahl-gross`, in Bricolage, with tabular figures: “8,7 h”.
- The card title is `--grad-karten-titel` in Inter 600. Below it the second line sits in `--grad-zweit` and `--text-zweit`.
- Small caps (`--grad-kapitaelchen`, `--laufweite-kapitaelchen`, upper case) appear only in the day tab and as a label above groups.

## Line height and figures

- Line height: titles `--zeile-titel`, card titles `--zeile-karten-titel`, text `--zeile-text`.
- Numbers and times always with `--ziffern-tabellarisch`. Then 07:30 and 16:40 line up cleanly. In SwiftUI that is `.monospacedDigit()`.
- Times always `16:40`, amounts with a decimal comma in German: `48,00 €`.

## Local, never from Google

All four typefaces live with us and are served from our own server. No request goes to `fonts.googleapis.com` or `fonts.gstatic.com`. No visitor’s IP address leaves the house.

The reason: on 20.01.2022 the Munich Regional Court I (3 O 17493/20) ruled that embedding Google Fonts from Google’s servers violated a visitor’s personality rights. For a family app with children’s data that is out of the question.

- **Website and web app:** woff2 from `packages/design-system/assets/fonts/`, included via `tokens/fonts.css`. They are variable fonts: one file carries every weight.
- **App:** variable TTF from `assets/fonts/ttf/`, bundled in the app and registered. The app picks the nearest named instance by weight and optical size.

- [Fonts with licences](https://brand.heyalbert.family/downloads/hey-albert-schriften.zip)

## Licences

| Typeface | Licence according to `LIZENZEN.md` | Designer |
|---|---|---|
| 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 |

All may be used commercially and served locally. The licence texts travel with every redistribution. We do not modify any typeface.

> **Open: licence of Roboto Mono**
>
> `assets/fonts/LIZENZEN.md` and `tokens/fonts.css` give the Apache License 2.0 for Roboto Mono. The bundled file `assets/fonts/ttf/OFL-RobotoMono.txt` says SIL Open Font License 1.1. Both allow our use. The only question is which text belongs in `LIZENZEN.md`.

## In short

> **Do**
>
> - Titles in Bricolage, everything else in Inter.
> - Only sizes from the tokens.
> - Tabular figures for every number and every time.
> - Handwriting sparingly, only as Albert’s margin note.

> **Don't**
>
> - A fifth typeface, including for social media.
> - Fonts from Google’s servers, even “just for testing”.
> - Bricolage in body text or buttons, handwriting in controls.
> - Free sizes like `font-size: 15px`, whole sentences in capitals.