Colophon: paper, ink, and a red seal
How this site is set: three typefaces, four colours, and the reasoning behind each.
A colophon is the note at the back of a book that records how it was made: the typeface, the paper, the press. This site doesn’t have a press, but it does have a few deliberate choices that are worth writing down.
Typefaces#
Long-form reading on screens asks a lot of a typeface. It has to stay comfortable at body size, hold together on low-resolution displays, and still look good at headline size. Three families split that work between them.
Newsreader#
Newsreader by Production Type sets everything you read here. It was drawn specifically for reading on screens, and it has an optical size axis that runs from 6 to 72 points. At small sizes the letters open up, gain contrast and loosen their spacing. At large sizes they tighten and become more elegant. The browser picks the right optical size automatically, so this paragraph and the title above use the same font file but are cut differently for their sizes.
Its italic is a true italic, not a slanted roman. That matters in a blog, where emphasis, titles and asides lean on it constantly.
IBM Plex Sans & Mono#
IBM Plex, designed by Mike Abbink with Bold Monday, handles everything that isn’t prose: navigation, dates, labels, captions, tables and code. Its slightly engineered character makes a good counterpoint to the warmth of Newsreader, and the Sans and Mono share proportions, so labels and code read as one family. In Plex Mono, the zero never looks like an O, and the l, 1 and I are unmistakable, which is what you want from a code face.
Japanese text#
CJK fonts run to several megabytes each, so none are downloaded. Japanese text falls back to the best mincho face already on your system, such as Hiragino Mincho on Apple devices or Noto Serif JP elsewhere: 日本語の文章は、お使いの端末の明朝体で表示されます。
All fonts are self-hosted as WOFF2, trimmed to Latin and Latin Extended. Nothing is fetched from a third party, and pages display immediately with fallback fonts while the web fonts load.
Colour#
The palette borrows from four traditional Japanese colours: washi paper, sumi ink, shu vermilion (the red of a name seal) and ai indigo. The paper is warm rather than white, because pure white on a bright screen is tiring over long stretches. The ink is a warm near-black, not #000.
- Washi paper
#f7f3ea - Sumi ink
#24211c - Shu vermilion
#b5432a - Ai indigo
#2b4b7c
Vermilion is the accent: the seal in the header, drop caps, list markers and rules. It is used sparingly, the way a seal is stamped once at the end of a letter. Indigo is reserved for links, so anything you can click looks clickable.
At night the scheme inverts into an indigo-black with paper-coloured ink. The vermilion and indigo are lifted so they keep their character against the dark ground without glowing.
- Yoru night
#14161b - Washi ink
#e8e2d6 - Shu lifted
#e7795a - Ai lifted
#9cbbe6
The site follows your system’s light or dark setting by default. The button in the header overrides it, and your choice is remembered.
Contrast#
Every text colour meets WCAG AA against its background, and body text comfortably exceeds AAA.
| Pairing | Light | Dark |
|---|---|---|
| Body text on paper | 14.5 : 1 | 14.0 : 1 |
| Links | 7.9 : 1 | 9.2 : 1 |
| Vermilion accent | 5.0 : 1 | 6.3 : 1 |
| Muted labels | 5.1 : 1 | 5.6 : 1 |
Layout#
The text column is capped at about 38 rem, which keeps lines between roughly 60 and 75 characters, the range most comfortable for reading. Type scales fluidly with the window, so there are no awkward jumps between phone and desktop. Headings use balanced wrapping, which spreads them evenly over their lines. Paragraphs use pretty wrapping, which avoids a lonely word on the last line.
That’s all of it: three typefaces, four colours and one column. Everything else is the writing.