Type

Three families do the talking and a fourth only handles code. Anybody stretches for posters, Schibsted Grotesk reads for hours, Shantell Sans letters the comic balloons, and Geist Mono stays inside code blocks where it belongs. Every piece of text uses a role class, never a raw size.

The families#

Anybody, on its width axis. The standard voice is near-normal and upright for heads; the wide italic and the condensed are for three words or fewer on one line: posters, SFX and the volume dial.

Schibsted Grotesk for body, labels and controls, at 16 px or more with a generous leading.

Shantell Sans, all caps, in balloons and captions only. Balloons stay short: 35 words is the page limit.

Geist Mono appears in code blocks and inline code, nowhere else (D-D9). No mono headlines, no mono labels, no mono "tech vibes".

Roles#

The roles by family, each printed in its own class with its size token. Sizes are fluid where the role is.

The second ink#

Display type of 2 rem and larger prints twice: the second ink lands off register as it arrives and stays there at rest (D-D6, Max's call). It is one token switch, data-mk-second-ink, with three settings:

Below 2 rem the offset reads as blur, so smaller type never prints twice. Quiet and more contrast turn it off too.

Fitting display lines#

A short display line can be fitted to its slot, so a poster word fills the width exactly: that is FittedLine. It never jumps on load, because the first paint is already close.

• On the server, fitEm(text, role, voice) from @maxgrits/overprint-react/art measures a line in ems with Anybody's own advance widths and kerning (the server advance table, within 1.5 % of the browser). Pass the result to FittedLine estimate, and the first paint prints at the smaller of the role's size and the slot's width divided by the ems.
• estimateFit(em, width, lo, hi) does the same sum for any caller that knows its slot width, clamped between two sizes.
• FIT_CUTS holds each display role's width, weight and tracking per voice, the numbers both helpers use.
• On the client, the fitter then measures the real words and sets the exact size; the reserved height never changes, and it refits when a reader's text spacing arrives (WCAG 1.4.12).
• Too long for the floor? The fitter goes below the role's floor, down to half of it and never under 16 px, before it would wrap (D-N140). Every other display line breaks a word that cannot fit inside its box instead of overflowing the page.

import { fitEm } from "@maxgrits/overprint-react/art";
import { FittedLine } from "@maxgrits/overprint-react/fitted-line";

export function PosterWord() {
  return (
    <FittedLine render={<p />} estimate={fitEm("Built to be tested", "display")}>
      Built to be tested
    </FittedLine>
  );
}