joel.design/system← Back to site
Foundations / Type

Calibre and Tiempos.

The Whitney pairing from Klim Type Foundry. Calibre carries display and chrome. Tiempos carries body and editorial moments. Same foundry, same designer (Kris Sowersby), built to work together.

Why this pair, not the obvious one
The most common Klim pairing is Söhne + Tiempos. That’s Stripe’s stack. I picked Calibre instead because Söhne is too closely associated with one specific brand. Calibre is softer, more geometric, and used by The Whitney Museum, Wealthsimple, and Apple Music. Same Klim cred, none of the Stripe baggage.

Calibre.

Display sans. Used for the wordmark, headlines, navigation, buttons, labels, and any chrome where the geometry should feel engineered, not decorative. Black weight (900) owns the hero. Medium (500) carries body chrome.

joel.design
FamilyCalibre
DesignerKris Sowersby, 2011
FoundryKlim Type Foundry

Weights in use

Light
The quick brown fox
300
Regular
The quick brown fox
400
Medium
The quick brown fox
500
Semibold
The quick brown fox
600
Bold
The quick brown fox
700
Black
The quick brown fox
900

Tiempos.

Body serif. Used for hero subheadings, long-form prose, pull quotes, and any moment where weight should give way to readability. Currently using Tiempos Headline at all sizes. I’ll add Tiempos Text and Tiempos Fine when the full Klim license ships.

Reduce the noise.
FamilyTiempos Headline
DesignerKris Sowersby, 2010
FoundryKlim Type Foundry

Weights in use

Regular
Reduce the noise.
400
Italic
Reduce the noise.
400 i
Semibold
Reduce the noise.
600

Scale.

Major Third (1.25 ratio). Restrained, editorial, doesn’t blow up at the top like Golden Ratio. Base size is 16px. Display sizes use Calibre Black. Body uses Tiempos Headline.

h1 · 1.25^6
The quick brown fox
72px
h2 · 1.25^4
The quick brown fox
48px
h3 · 1.25^3
The quick brown fox
32px
h4 · 1.25^2
The quick brown fox
24px
lead · 1.25^1.5
The quick brown fox
21px
body · 1.25^0
The quick brown fox
16px
small · 1.25^-1
The quick brown fox
13px
micro · 1.25^-2
The quick brown fox
11px

OpenType features.

The designer-visible details. Old-style figures everywhere except where alignment matters. Tabular lining figures in invoices, prices, contracts. Always-on: kern, liga, calt, onum on body.

onum
Old-style figures
0123456789
lining (off)
0123456789
old-style (on)
tnum + lnum
Tabular lining (for columns)
$1,234.56
$8,901.23
proportional
$1,234.56
$8,901.23
tabular
kern
Pair kerning
AVATAR
kern off
AVATAR
kern on
liga
Standard ligatures
ffi fl
liga off
ffi fl
liga on

How the pair lives together.

The hero treatment shows the working pair: Calibre Black 900 carrying the headline, Tiempos Headline carrying the sub. The orange period in the headline ties the type decision to the brand mark.

Formerly at Dyson · Milwaukee, WI

Reduce the noise.

Brand strategy, web design, and automation from a one-person studio. I design it. I build it. It works.

Rules.

  • Heavy weights, looser tracking. At 900 weight, letter-spacing should be near zero. -0.04em at Black collapses the glyphs.
  • Use font-size-adjust: 0.52 on display elements to compensate for Calibre’s smaller x-height vs. system fallbacks.
  • Old-style by default. Body and prose use onum. Lining figures only where alignment matters.
  • Never fake italics. Tiempos Italic is a separate face. Always use the real italic, never font-style: italic on a Roman.
← ColorSpace →