T · 20 / 26

T — Typographic

The letterform as the whole picture.

The style

The words are the picture.

Typographic design takes away the photograph and the drawing and leaves the letters to do both jobs. In 1965 Herb Lubalin set the word “Mother” with an ampersand curled inside its O, a child in the womb, and the logo is still nothing but type.

In 1984 Rudy VanderLans and Zuzana Licko started Emigre and drew faces for the first Macintosh screens, proving that a letter could be a voice of its own. Variable fonts went further: one file, a whole family between its axes. Fraunces, by Undercase Type in 2020, adds two of its own, softness and a wonky lean.

On a screen the style means one family on its axes, a real measure, small caps and old-style figures, a baseline you can feel, and a single colour that marks one thing.

In use

A reader made only of type.

Folio, an e-reader, opens Ada Morrow’s Notes from the Composing Room. Change the size, the measure and the leading, take over the optical size, justify it, turn the paper to night, open a note in the margin and move through the chapters.

The measure firstThe column is set in ch, so a size change keeps the line length. Push it past 75 and the panel says so, in red.
Size picks the cutOptical size follows the font size unless you take it over: small type opens up, large type sharpens.
Nothing but typeNo icons in the text, no boxes. Chapter, drop cap, small-caps labels and a note in the margin do the work.

Notes from the Composing Room

Chapter one

The case

My first job was to put the letters back. Every evening the compositors left their sticks on the bench, and every evening I broke the lines apart and dropped each piece of metal into its box in the case. The capitals lived in the upper case, the small letters in the lower, and that is why we still call them so.

The boxes were not the same size. The e had the largest, near the middle, where the hand falls without looking; the j and the k sat in the corners with the q, which nobody wanted. After a month I could feel the case the way you feel the stairs of your own house in the dark.

Old Petrie, who had set type for forty years, said the case taught you what a language is made of. English, he said, is mostly e and t and the space between words. A compositor who knows that sets faster than one who reads well.

He was wrong about the reading. The good ones read everything, upside down and backwards, as it went into the stick. They caught the author’s mistakes before the proofreader did, and they never said so.

Type

Size19px

Measure64ch

Comfortable · 45–75 is the band

Leading1.55

Suggested 1.50 at this measure

Optical size, follow the size

opsz 19, cut for 19px text

Alignment

Paper

Chapter 1 of 3 · 0% · 1 min left

The kit

Every part, every state.

The parts the reader is built from: an ink button, a field that is only a rule, labels in small caps, figures that sit in the text. The rows of states hold still for comparison; everything else works.

01Button

Labels in small caps, +8% tracking; hover draws a 3px red rule

02Text field

The weekly specimen, by emailOne typeface a week. No pictures.

Field: 1px ink rule; focus 2px red; error red-ink 5.9:1

03Select

TypefaceSoft serif, four axes

04Switch, checkbox, radio

Hyphenate

Ligatures

Old-style figuresLining figures

The office printed 1,975 fine specimens, five of them for the official affiliates.

05Slider

Tracking+80 / 1000 em

Small caps want +60 to +100; text stays at 0

06Progress

Chapter two38%

479 of 1,260 words4 min left

Old-style figures in text, lining in tables

07Segments and tabs

The proof came back clean

Three chapters, 4,200 words.

08List rows

09Card and loading

Memoir · 1961

Notes from the Composing Room

Ada Morrow

A year setting type by hand, told in three chapters and 4,200 words.

18 min · 3 chapters

Loading: a bar on each baseline, the shape of the text to come

10Toast

One line, one action, four seconds

11Modal

No shadow: a 6px paper rule lifts it, the backdrop does the rest

12Steps

1Manuscript, done
2Edit, done
3Proof, current
4Print

13Badges and avatars

New editionSignedAnnotatedOut of print

Reading with youThree readers on chapter two

Radius: none, except a face. Badges are words, never colour alone

Signature

Inside the letter, then along it.

Two tools. An anatomy plate: point at a part of the word, or pick it from the list, and it lights in red on the measured font. Then a tester for Fraunces’ axes and a modular scale you can copy.

Bowl

The curved stroke that closes a round space, as in d, b, p and a.

Quick wafting zephyrs vex bold Jim

Your words

Weightwght 400

Optical sizeopsz 14

SoftnessSOFT 0

ItalicThe real cut, not a slant

WonkyWONK: leaning n, m, h

Modular scale

Basepx 18

Ratio

Each size is the one below it times 1.25. A small ratio suits long reading; a large one, posters and covers.

Title · 43.9pxNotes from the Composing Room
Heading · 35.2pxNotes from the Composing Room
Subhead · 28.1pxNotes from the Composing Room
Lead · 22.5pxNotes from the Composing Room
Body · 18pxQuick wafting zephyrs vex bold Jim
Caption · 14.4pxQuick wafting zephyrs vex bold Jim

/* Fraunces, text */
.sample {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'opsz' 14, 'SOFT' 0, 'WONK' 0;
}

/* A modular scale: 18px × 1.25 */
:root {
  --step-4: 43.9px; /* title */
  --step-3: 35.2px; /* heading */
  --step-2: 28.1px; /* subhead */
  --step-1: 22.5px; /* lead */
  --step-0: 18px; /* body */
  --step--1: 14.4px; /* caption */
}

Tokens

The system, in numbers.

Eight colours with their contrast, a scale of 1.25 from 18px, space taken from the 28px line, three measures and three speeds. Copy them as custom properties, with the prose, label and display styles.

Colour

--paper #f6f3ecPaper: the page
--paper-2 #ece7dcSecond paper: wells, skeletons
--rule #d3cbbbRules and guides, never type
--ink #111111Ink: type and the button, 17:1
--ink-2 #57534cSecond ink: captions, 6.9:1
--red #e23b2eRed: baselines, marks, large type, 4.8:1
--red-ink #b3261aRed for small text, 5.9:1
--night #161513Night: the reader after dark

Scale · 1.25 from 18px

5 · 54.9pxDisplay
4 · 43.9pxTitle
3 · 35.2pxHeading
2 · 28.1pxSubhead
1 · 22.5pxLead
0 · 18pxBody
-1 · 14.4pxCaption
-2 · 11.5pxFine print

Space, from the line

7
14
28
56
112

Measure

Narrow< 45chCaptions, sidenotes
Text45–75chReading, 66 is the target
Long> 75chNever for running text

Motion

Turn200ms easeUnderlines, switches, tabs
Set600msType settling into its axes
Page900msSections and the cover

:root {
  /* Paper and ink */
  --paper: #f6f3ec;
  --paper-2: #ece7dc;
  --rule: #d3cbbb;
  --ink: #111111;
  --ink-2: #57534c;

  /* The red: baselines, marks and mistakes */
  --red: #e23b2e;
  --red-ink: #b3261a;

  /* Type: one family on its axes, a mono for specs */
  --font-text: 'Fraunces', Georgia, serif;
  --font-spec: 'DM Mono', ui-monospace, monospace;

  /* A modular scale, 1.25 from 18px */
  --step--1: 14.4px;
  --step-0: 18px;
  --step-1: 22.5px;
  --step-2: 28.1px;
  --step-3: 35.2px;
  --step-4: 43.9px;
  --step-5: 54.9px;

  /* The line sets the space */
  --leading: 1.55;
  --line: 28px;
  --measure: 66ch;

  /* No radius, no shadow: hierarchy is size and weight */
  --radius: 0;
  --hairline: 1px solid var(--rule);

  --turn: 200ms ease;
  --set: 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Running text */
.prose {
  max-width: var(--measure);
  font: 400 var(--step-0) / var(--leading) var(--font-text);
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums proportional-nums;
  hanging-punctuation: first;
  hyphens: auto;
  text-wrap: pretty;
}

/* Labels: small caps, tracked a little */
.label {
  font: 500 13px var(--font-text);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}

/* Headings: tight, large, optical size up */
.display {
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

Do

1Set the measure first, between 45 and 75 characters, then the size.
2Use one family and let size, weight and italic make the hierarchy.
3Use real quotes, dashes, small caps and old-style figures in text.
4Let the red mark one thing on the page, and only that.

Don’t

A line from edge to edge
At 120 characters the eye loses its place on the way back. A wide screen is not a reason for a wide line.
Fake bold, fake italic
A regular slanted by the browser, or thickened with a stroke, is a drawing of a style. Use the real cut or none.
Five typefaces, all shouting
Every change of face is a change of voice. Five on one card and none of them is heard.

In the wild

Where the style shows up outside this page.

1967
New Alphabet
Wim Crouwel
Letters built for early screens from straight lines and 45° corners.
1984–2005
Emigre
Rudy VanderLans, Zuzana Licko
A magazine as a type specimen: the faces were the story.
1994
The Public Theater identity
Paula Scher, Pentagram
Wood-type headlines in mixed weights, loud enough to be the poster.
2013
Whitney Museum identity
Experimental Jetset
One zigzag line, the responsive W, that reshapes to fit any space.

T — Typographic

The words are the picture.

A reader made only of type.

The case

Every part, every state.

01Button

02Text field

03Select

04Switch, checkbox, radio

05Slider

06Progress

07Segments and tabs

08List rows

09Card and loading

Notes from the Composing Room

10Toast

11Modal

12Steps

13Badges and avatars

Inside the letter, then along it.

The system, in numbers.

Do

Don’t

A line from edge to edge

Fake bold, fake italic

Five typefaces, all shouting

In the wild

New Alphabet

Emigre

The Public Theater identity

Whitney Museum identity