pile.org

Colophon

This site uses Equity Text B and Concourse T6 for body text and headers, respectively. The fonts’ generous licensing terms allow them to be used on the web; I used Font Squirrel’s webfont generator to produce the WOFF files.

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 Text B Italic — I would write my font-face definitions as follows:

@font-face
{
	font-family: 'Equity Text B';
	src: url('/fonts/equity-text-b-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face
{
	font-family: 'Equity Text B';
	src: url('/fonts/equity-text-b-italic-amp.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

This way, to display the font “Equity Text B” with normal weight, no italics, the browser first tries to use equity-text-b-italic-amp.woff. That file has only one single character (the ampersand), so the browser generally falls back to the previously-defined file, equity-text-b-regular.woff.

(I also use a similar trick for old-style numerals — 1234567890 — as opposed to lining numerals — 1234567890.)


I’m using CSS media queries to get the site to render differently if your browser is in light or dark mode. This looks something like the following:

@media (prefers-color-scheme: light)
{
	body
	{
		color: #202020;
		background-color: #fbfbfb;
	}
	a
	{
		color: #2222ff;
	}
}
@media (prefers-color-scheme: dark)
{
	body
	{
		color: #cccccc;
		background-color: #111111;
	}
	a
	{
		color: #3333cc;
	}
}

There are further elaborations for the peppercorn image used as a fleuron (see below).


The leaf at the top of the site is from the black pepper, piper nigrum. The original illustration is in Köhler’s Medizinal-Pflanzen (Franz Eugen Köhler, 1887), as cleaned up at Wikimedia Commons. The fleuron (above and below this paragraph) is peppercorns from the same image. In both cases, I merely extracted the objects from the (really quite pretty) larger image.


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 IE.

Content is managed using Hugo, a static site generator, and is hosted at DreamHost. Previously, it was managed with Textpattern and hosted at TextDrive.