Foundations · 02

Typography

Three typefaces with three clearly separated jobs. When it is not obvious which one to use, the answer is almost always Geist.

The three families

TypefaceRoleUsed forToken
Publica Sans The Face of the Company logo, large display headlines (hero, page titles, footer CTA) --font-display
Geist The Communicator body copy, section headings, everything neutral --font-sans
Geist Mono The Analytic One labels, counters, numbers, tables, navigation, buttons --font-mono

Publica Sans and Geist are formally related — Geist is built on the same geometric construction. That is why they can sit directly above one another without looking like two typefaces: Publica Sans sets the title, Geist sets everything else.

Publica Sans is commercial and is not in hand yet. Until a licence is bought and PublicaSans-Variable.woff2 is placed in assets/fonts/, the stack falls back to Geist. The site is fully functional that way but loses its headline character. Geist and Geist Mono are OFL-licensed and free — they are self-hosted rather than loaded from the Google Fonts CDN, for GDPR reasons.

Scale

The values are the rendered sizes from the 1440 px Figma frame. Display sizes are fluid via clamp() so the proportion survives on small screens.

Find the answers.

.t-display-1 · Publica Sans Bold · 40–64 px · 1.02 · −0.02em

Jetzt Projekt starten!

.t-display-2 · Publica Sans Bold · 32–40 px · 1.15

Das Team hinter Control-F

.t-h1 · Geist Medium · 28–40 px · 1.3

Tausende Sensoren erzeugen Daten, aber daraus keine Antworten.

.t-h2 · Geist Medium · 22–32 px · 1.3 — the most common heading on the site

Weniger Ausfälle

.t-h3 · Geist Medium · 24 px

Simon Deussen

.t-h4 · Geist SemiBold · 20 px — person names, card titles

Wir machen mehr aus Ihren Daten und entwickeln die Infrastruktur, die Datenströme in Geschäftsmodelle verwandelt.

.t-lead · Geist Light · 16 px · 1.45

Sie wollen mehr aus den Daten Ihrer Anlagen machen – und wissen nicht, wo Sie anfangen sollen? Das ist normal. Bevor wir irgendetwas versprechen, zeigen wir Ihnen in 2–4 Wochen, wo Ihre Daten den größten Hebel haben.

.t-body · Geist Light · 14 px · 1.45 — the smallest size allowed for prose

Was wir machen

.t-label · Geist Mono Medium · 11 px · +0.01em · uppercase

Kontakt aufnehmen

.t-label-lg · Geist Mono Medium · 12 px · +0.08em · uppercase — buttons

01 / 04   189   26.57°

.t-numeric · Geist Mono · tabular-nums — every number, always

On the 11 px question. The Figma export of the process cards sets body copy at 11 px too. In this implementation body copy is 14 px (--text-md); 11 px (--text-xs) is reserved for mono labels. Uppercase mono with letter-spacing stays legible at that size as a label; prose does not. The density of the card survives — it has more room than the 1440 px frame suggests.

Setting rules

Do

  • Set display headlines tight (1.02) and break them with text-wrap: balance.
  • Keep body measure between 60 and 75 characters.
  • Set numbers in Geist Mono with tabular-nums so columns line up.
  • Put a mono label above every section — that is the navigation inside the text.
  • Use proper typography: en dashes, real ° and ×, and the quote marks of the page language.
  • On a dark surface take the type colour from white — at whatever ink strength the hierarchy needs — or from the foil for one display headline.

Don't

  • No Publica Sans for body copy — it is a display face.
  • No Geist Mono for whole paragraphs; it marks, it does not narrate.
  • No italics for emphasis — the mono label does that job.
  • No text-transform: uppercase on prose or headings.
  • Don't invent in-between sizes; the scale has enough steps.
  • No lime letterforms on black — lime is light, not ink. It measures 18.5:1 and is still wrong: near-white luminance at maximum chroma blooms on a dark ground. → Colour

In use

The standard section opening: mono label, heading, body copy.

Unsere Mission

Wir machen mehr aus Ihren Daten und entwickeln die Infrastruktur, die Telemetriedaten in Geschäftserfolg verwandelt.

Andere Agenturen liefern Präsentationen. Wir liefern Code, der in Ihrem Betrieb läuft – und Zahlen, an denen Sie ihn messen können. 

<p class="t-label">Unsere Mission</p>
<h2 class="t-h2">Wir machen mehr aus Ihren Daten …</h2>
<p class="t-body t-secondary">Andere Agenturen liefern …</p>