Mercer & Type

Typography Scale

DisplayAa
H1

A foundry built on the curve

H2

Letterforms with a point of view

H3

Optical sizing across the range

H4

Supporting display heading

H5
Uppercase label tier
H6
Smallest label

This is body text in Plus Jakarta Sans at the base size. Fraunces carries the display and title work; Jakarta keeps the running text clean and legible at reading sizes.

Eyebrow label · caption tier

Annotation and small text live here, one step below body, for metadata and asides.

Color Palette

studio-black
studio-ink
studio-mid
studio-rule
studio-ground
studio-paper
studio-press
studio-press-tint

Buttons

Primary action Secondary action Disabled

Links & Lists

A paragraph carries an inline link the way a reader expects it — underlined, in the press blue, with a second link further along to prove the pattern holds across a line of running text.

  1. Sketch the skeleton by hand
  2. Digitise and interpolate the masters
  3. Hint and test across platforms
  4. Ship the family with a specimen

Blockquote

Kerning is the difference between a wordmark and a logo — the space carries the craft.

Code

Bind the variable-font axis with a custom property like --kern-opsz and let the cascade resolve it.

:root {
  --kern-opsz: 48;
}
.specimen {
  font-variation-settings: "opsz" var(--kern-opsz);
}

Separator

Cards

Specimen
Serif · Variable Mercer Display

A high-contrast editorial serif across nine optical sizes.

Specimen
Sans · Grotesque Harbour Grotesk

A workhorse grotesque built for signage and interface.

Specimen
Mono · Fixed Plotter Mono

A monospace tuned for data tables and code listings.