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 >=. Headers use Tanker, by Ruosi Huang, a font released by the wonderful Indian Type Foundry, which publishes every fourth of its Latin typefaces for free.

And Latitude is a 16th century revival by the French typographer Ange Degheest (1928-2009). Latitude was released alongside a number of Degheest’s others as part of a recent exhibit devoted to her work. (Art you can take home!) These typefaces reflect the many technological changes seen over the course of her career, from a nautical chart offset printing process, to the Hermes 3000 portable typewriter, to the Minitel, a French precursor to the internet, whose bitmap typeface had an associated italic family, a serif variant, even a Gothic blackletter.

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.