Design

Cotton is the paper, ink is the words. The accent is for links, the full stop after the greeting, and whatever is hovered or focused. Muted is for notes in the margin, border is the hairline, and card sits behind code and quoted passages.

Caslon for words, the common type of the American colonies. Its italic is for emphasis and for anything written beside the text, like a date or a category. Atkinson Hyperlegible for headings, the nav, and controls. There are no small capitals, because this cut of Caslon has none to give. Figures are old-style in text. Monospace is for code and for the figures in the writing index.

Every line is 1.75rem tall. The space between things is that line scaled by the golden ratio, so a page is rows of one unit from the masthead to the signature.

• A post’s title, the trail and the occupancy note share one baseline.
• Nothing inline changes a line’s height. A code word is set at line-height: 1.
• Categories are written beside a name, in italic, never boxed.
• An article’s text takes a column of 36rem, about seventy characters, and is hyphenated. Pictures and code keep the width of the page.
• A quotation overhangs that column by one unit on each side.
• In a feed, the lines of one entry sit closer than two entries do, and each day starts half a unit down.

• A hovered link or mark takes 180ms to reach the accent.
• The colophon, the field guide and the region list are slips of paper. Each arrives in 220ms.
• A post’s title travels between the front page and its post in 300ms.
• A project’s mark moves only while its row is hovered or focused.
• With reduced motion set, the marks, the slips and the titles hold still.

The parts the site draws itself. Most are presence: another reader’s cursor, the wire the birds sit on, the chip that says who is in the room. The rest is the trail back, the wordmark, a project’s mark, a favicon that greys when you look away, a camera for Rochester, and the small type: a category, a code word, a GitHub label.