At some point I should admit that this site itself is the hobby. Not the writing or photography, but the slow exploration and experimentation of web layout and typography. Here are some recent site changes:
The accent typeface in the header and footer used to be Poppins, with Devangari by Ninad Kale and Latin by Jonny Pinhorn. It’s a really nice geometric sans-serif that draws heavily from Herb Lubalin’s 1970 type ITC Avant Garde.It’s not exactly a clone, not in the way that TeX Gyre Adventor is, for example. I originally wanted to choose something modern that would contrast with the main type, EB Garamond. But the more I thought about it, while Avant Garde is relatively modern to Claude Garamont’s 16th century type, it’s still retro, firmly evoking the 70s and early 80s.
It’s the type of Avant Garde magazine, natch, but also of 8-bit home computers and early tabletop gaming. Even when it shows up in contemporary media, like 2019’s Control, it’s period (although the offices in Control seem rooted in the 60s rather than the 70s).
This does not mean Poppins it’s bad! It’s a very nice typeface. But as much as I love retro computing and gaming, it’s not the feeling I want for Diplograph.
I’m trying out Karla, also by Jonny Pinhorn. It’s contemporary, chic, a little unconventional,Unconventional in form, not in popularity with web designers. and even a bit feminine.
I’ve also made some changes for Safari 15’s new design: the banner has moved to the footer, and the little strip of color is now gone. The page background now blends with the browser chrome at the top. As a bonus, the site looks better on phones in landscape.
The site also now looks much better when printing? This is how you know I have my priorities right. When printing, sidenotes show their contents inline, and links show the URLs they point to inline. Header and footer navigation is hidden. Image sizes are capped to fit on a single page.Support for paged media in CSS is pretty basic, so I’ve just chosen values that work for both A4 and Letter paper sizes. Browser support for printing features is inconsistent, so some browsers will still split images across pages. Type sizes are scaled down, but are still relatively large, as one of the common use cases for printing is for easier reading for low vision users.
Finally, there have been dozens of other small changes. Titles can now include HTML tags, e.g.
<cite>. Because of this, the last words are joined by a non-breaking space rather than wrapped in a
white-space: nowrap. Inline code is now bordered instead of marked with a background color, so hopefully it doesn’t look highlighted anymore. Header anchor links now specify a
scroll-margin so when you link to one there’s some space between the top browser chrome and the header. There have been several small changes to multi-column layouts. And Ink, the software that creates this site, has had a bunch of refactoring, both to support these changes and to fix up some of the roughest parts of the code.
Maybe the site itself is the hobby, but that’s not entirely a bad thing?