Colophon

This site uses Equity B and Concourse 6 for body text and headers, respectively. The fonts’ generous licensing terms allow them to be used on the web; their newest versions (April 2021) include WOFF2 files with OpenType features, leading to far fewer font files than the previous versions.

One thing that’s not widely known about webfonts is that if a given font is missing a character, the browser should “fall back” to the previously-specified font file. So if I wanted to, say, use the best available ampersand — &, from Equity B Italic — I would write my font-face definitions as follows:

@font-face {
	font-family: 'Equity B';
	src: url('/fonts/equity_ot_b_regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Equity B';
	/* this font file has exactly one character:  an italic ampersand */
	src: url('/fonts/equity_ot_b_italic_amp.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

This way, to display the font “Equity B” (a slightly lighter version than Equity A) with normal weight, no italics, the browser first tries to use equity_ot_b_italic_amp.woff2, the last-specified file. That file has only one single character (the ampersand), so the browser generally falls back to the previously-defined file, equity_ot_b_regular.woff2.

(I previously used a similar trick for old-style numerals — 1234567890 — as opposed to lining numerals — 1234567890 — but the new versions encode that into the one file, so I can use font-variant-numeric: oldstyle-nums to select them. I did the same thing for small caps, too; I can now use font-variant-caps: small-caps.)

As of 2021, I’m finally using variables and math in my CSS. Here’s how I define colors:

:root {
	--foreground: #202020;
	--background: #fbfbfb;
}
@media (prefers-color-scheme: dark) {
	:root {
		--foreground: #cccccc;
		--background: #222222;
	}
}

(The media query lets the CSS specify different behavior — e.g. different colors — depending on whether the operating system is in light or dark mode. There are further elaborations for things like the peppercorn image used as a fleuron.)

And then I can use those colors not only for text, but also for things like borders:

body {
	color: var(--foreground);
	background-color: var(--background);
}
table {
	border-color: var(--foreground);
}

I can also do things like make paragraph indentation be based on the line height:

:root {
	--lineheight: 1.6; /* 1.6x the font size */
}
article {
	line-height: var(--lineheight);
}
/* a paragraph immediately following a paragraph, anywhere within the article element */
article p ~ p {
	text-indent: calc(var(--lineheight) * 1em);
}

The leaf at the top of the site is from the coffea arabica tree. The original illustration is in Flora de Filipinas (Francisco Manuel Blanco, c. 1880), as cleaned up at Wikimedia Commons. The fleuron (above and below this paragraph) is roasted coffee beans from Köhler’s Medizinal-Pflanzen (Franz Eugen Köhler, 1887), also as cleaned up at Wikimedia Commons. In both cases, I merely extracted the objects from the (really quite pretty) larger images.

(Prior to this, I used iconography from piper nigrum, black pepper.)

I do my best to get this looking nice in Safari (desktop and iOS) and Chrome, with Firefox a distant third. I assume it’s legible in other browsers.

Content is managed using Hugo, a static site generator, and is hosted at DreamHost. Previously, it was managed with Textpattern and hosted at TextDrive, and before that I think it was hand-written HTML hosted at Hurricane Electric.