Tools

Type Lab

A type scale worked out from the font itself, set in its own faces at a phone’s width and a desktop’s.

Type LabInter and Frauncesbody 16pxSketchpad. Nothing here is saved.
Open on a brand

Letterpress classes

Set it by hand

A four-week evening class in metal type. You compose a broadside letter by letter, lock it up, and print fifty copies on a platen press from the 1920s.

Book a seatSee last term’s prints
weeks, two evenings each
4
seats in each class
8
copies you take home
50

How the four weeks run

Each week adds one step, so by the last evening the whole process is yours.

  1. Composing

    Pulling sorts from the case and setting a line in the composing stick, spaces included.

    Week 1

  2. Spacing and leading

    Why a line looks tight or loose, and the thin strips of lead that fix it.

    Week 2

  3. Printing the edition

    Lockup, a proof to catch the mistakes, then the run of fifty.

    Weeks 3 and 4
Every space on the page is a piece of metal someone chose.

Notes

What leading meant first

5 min read · October 2026

Before it was a setting in software, leading was a strip of lead placed between lines of type.

A compositor added it by hand, a point or two at a time, until the lines sat right. With too little, the descenders of one line crowd the ascenders below. Too much, and a paragraph comes apart into stripes.

Why the word stuck

Software kept the name and dropped the metal. The judgment it asks for has not changed: look at the lowercase, then decide how much air the lines need.

Calder Street Press is an invented studio, made up for this specimen.

Fifty copies.

The next class starts in November. Bring a short text you want to see printed.

Book a seat
An invented page in 15 of 16 sizesdesktop, 1440
How type works

What the sizes are worked out from

Six things the calculator weighs, each set in the scale above. Change the lab and these follow; the buttons here change the lab.

One size, two faces

Two faces at the same size can look a size apart, because the eye reads the lowercase and every face draws it at its own height. So the lab starts there. Inter’s lowercase is 0.55 of its size, which puts the body at 16px.

Hxbg

Fraunces, 64pxlowercase 30.8px

Hxbg

Inter, 64pxlowercase 34.9px

How fast the sizes climb

A ratio is the step from one size to the next. A close one suits a dashboard, where many levels sit near each other; a steep one suits a page with few levels that has to read at a glance. Your headings climb by the major third, 1.25.

Major second, 1.125

29px

26px

23px

21px

Major third, 1.25

44px

35px

28px

24px

Yours
Perfect fifth, 1.5

92px

61px

41px

30px

Line height comes from the lowercase

The taller a face’s lowercase, the more of each line it fills and the more room it needs between lines for the eye to find the next one. The lab works the body’s line height out from Inter’s: 1.5.

Tight, 1.15

Before it was a setting in software, leading was a strip of lead a compositor set between lines of type, a point or two at a time.

The lab’s, 1.5

Before it was a setting in software, leading was a strip of lead a compositor set between lines of type, a point or two at a time.

Loose, 1.9

Before it was a setting in software, leading was a strip of lead a compositor set between lines of type, a point or two at a time.

Headlines close on a phone

A headline at its desktop size breaks into a word a line on a phone, so the large sizes fall furthest between the two screens. Display XL goes from 140px to 63px, while the body only moves from 16px to 15px: a phone is held closer to the eye.

Desktop size, 140px, on a 375 screen

Ten pages became two

Phone size, 63px, on a 375 screen

Ten pages became two

Large type sets tighter

Letters are spaced for reading sizes. Set large, the same spacing looks loose, so each size above the body takes a little out. Display MD sets at -0.025em.

As the font comes, 0em

Two pages

The lab’s, -0.025em

Two pages

Small sizes want a plain face

Labels, captions and figures need an open lowercase and even widths, which a face drawn for headlines often lacks. The lab measures each face. Fraunces: its lowercase and width suit reading and interface sizes. Inter: its lowercase and width suit reading and interface sizes.

Fraunces at 14px

Book a seat · Week 1 of 4 · 8 seats

Inter at 14px

Book a seat · Week 1 of 4 · 8 seats

Signed in

On a brand, type is set in Styles

Nothing in this lab is saved. On a site, Styles holds the brand’s type, and every change shows on the site’s own pages before anything is written.

Log in to open Styles on a site, or talk to us about setting up a brand.

  1. Faces

    Pick each of the brand’s faces from the fonts it holds.

  2. Text size

    One setting makes every size larger or smaller in proportion, with the body’s size as the readout and the brand’s ladder beside it.

  3. Save, or take it back

    Save writes one version of the brand. History restores any earlier one.

Not there yet: the calculator. On a brand today the sizes are the ones it was built with, moved together. Working them out from the font, and adding, deleting or locking a size, happens only in this lab until the scale comes to brands. After that, the page builder will offer the same sizes for each piece of text.