Colophon

This is a (mostly) handmade website that respects your privacy with minimal analytics using the open source GoatCounter. It’s built with the static site generator Hugo and a number of tools that approximate the conventions of print typography, which I find so much more intuitive than CSS stuff like reference pixels and line boxes.

First, I use a CSS library called Tachyons that offers shorthands for people who either want to build something quickly or aren’t formally trained web developers. It’s been a great learning tool: I begin with the shorthands, then gradually pare back and replace them with fuller CSS syntax once I understand what each element does. Still, I love how Tachyons uses print terminology (“measure” rather than line-length), and how reading its documentation feels like “perusing a modern day typecase,” as Robin Rendle puts it.

Mechanical Ragger is a little script by Oak Studios that emulates the printing practice of “text ragging,” which evens out a paragraph’s line lengths — its ragged right edge — by alternating long-short, long-short.

The color of the page you’re now reading is #EDEBE7, which — according to the Print & Probability project’s Coloring Book — is the average background color of every page in this volume of the stunning Bomberg Talmud.

This website uses several fonts, all free and open source. First, Source Serif 4, by Frank Grießhammer for Adobe, is one of the fullest-featured open source typefaces out there: it’s got optical sizing, small caps, oldstyle figures, and countless languages supported. Captions are set in the companion Source Sans, by Paul D. Hunt. Other bits are set in Fraunces by Undercase Type, an eclectic design with influences franging from William Morris romanticism to 1970s grocery bags to the 1905 typeface Windsor with its distinctive, “mulleted” a. Fraunces has super fun variable axes named “softness” and “wonk.”

The site’s monospaced font is Fira Code, by Nikita Prokopov and maintained by a dedicated volunteer community. Fira Code uses ligatures to unite multi-character sequences used in programming languages, so that they appear as pleasing, single glyphs: != and >= become != and >=. Navigation links in the header and footer use Lithops, by Anne-Dauphine Borione, a font released by the wonderful open source type foundry Velvetyne. Text on the Now and Then pages is set in styles from a family called Compagnon, by Juliette Duhé, Léa Pradine, and others. Compagnon is also published by Vevetyne and inspired by typefaces in the Typewriter Database.

To prepare these fonts, I use Wakamai Fondue (“what can my font do?”), a web app and command line tool that shows a font’s layout features, supported languages, alternate glyphs, variable axes, all through an interactive type viewer. It also generates CSS for your fonts.

Finally, Glyphhanger is like a sieve for fonts. It takes note of every character used on your website then sifts through your font files, removing any unused glyphs and creating smaller, “subset” font files that load faster. Sara Soueidan wrote a friendly walkthrough of installing and using Glyphhanger.