Skip to content
Hey AlbertBrand and design system
As MarkdownDeutschDE

Foundations

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.

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

The four roles

RoleTypefaceForNever for
--schrift-titelBricolage Grotesque, 800, tightgreeting, surface titles, large numbers, website headingsbody text, buttons
--schrift-textInter, 400 / 500 / 600everything that is read and operated: card titles, text, buttons, pills, small capstitles above --grad-abschnitt
--schrift-monoRoboto Monotechnical identifiers: calendar week, time axes, dense grids, codesentences
--schrift-handReenie BeanieAlbert’s pencil margin notes in storyteller momentsbuttons, 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.

--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 · 17pxSwimming with Lena
--grad-karten-titel · 14.5pxKartentitel
--grad-text · 14pxSwimming with Lena
--grad-zweit · 12pxZweitzeile, Zeiten
--grad-klein · 11pxSwimming with Lena
--grad-kapitaelchen · 10pxWed 3
  • 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 licenceshey-albert-schriften.zip

Licences

TypefaceLicence according to LIZENZEN.mdDesigner
Bricolage GrotesqueSIL Open Font License 1.1Mathieu Triay
InterSIL Open Font License 1.1Rasmus Andersson
Roboto MonoApache License 2.0Christian Robertson, Google
Reenie BeanieSIL Open Font License 1.1James Grieshaber

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

In short