Type & Color
Four type styles and two surfaces. Everything on this site is built from what is on this page — the values below are read from the live stylesheet, so they cannot drift from what you are looking at.
Typography
Franklin Gothic sets the titles and the small copy; Adobe Garamond sets every line of prose. Display is the Title style scaled with the viewport, not a size of its own — so the system is really two faces, four steps.
Four Screens
The Binary Press
The trick is not tonal. It is spatial: break the image into dots of varying size.
A printing press is a binary device. It carries one film of ink at one density.
Fig. 3 · 1904 · The Half-Tone Process, Iliffe & Sons
Color
Two surfaces: chapters print dark on paper, the index and the darkroom invert. The four plate colors appear only where CMYK is the subject — they are an argument, not decoration.
- Paper—Page surface
- Ink—Body text
- Muted—Captions, metadata
- Rule—Hairlines, borders
- Paper—Page surface
- Ink—Body text
- Muted—Captions, metadata
- Rule—Hairlines, borders
- Cyan—Screen angle 15°
- Magenta—Screen angle 75°
- Yellow—Screen angle 0°
- Black—Screen angle 45°
Grid
Twelve columns, a 20px gutter, 32px margins — six columns on a phone. The rhythm of every page comes from which columns a block occupies.