2021 June Week No. 4

Design Updates

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:

Samplers of Poppins, Tex Gyre Adventor, and ITC Avant Garde. They especially share the distinctive circular counters and bowls.

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

The cover is dominated by text in Avant Garde, with alternate capital As that lean to the right so the right stroke is vertical. "Avant Garde. Portraits of the American People. A monumental portfolio of Photographs."

Cover of Avant Garde magazine, Volume 13, Spring 1971.

Cover with title and byline in Avant Garde Bold.
Introduction page describing the setting of the module and notes for the Dungeon Master. The titles and body text is set in Avant Garde.

Dungeon Module S2: White Plume Mountain, 1979.

The capital C of Commodore has been enalarged, so the "ommodore&quote; part squeezes between the open ends of the capital C.

Cover of COMPUTE!’s Commodore Collection, Volume 1, 1984.

Screenshot of a game. An office hallway is cast in deep red and purple light. The screen-filling caption Central Executive in bold white Avant Garde is overlaid.

Control, 2019. The game is set in modern times, but the setting takes cues from 60s offices and Brutalist-style architecture.

I’m not sure at what point I decided to spend more time collecting examples of the type I’m no longer using instead of new one, but here we are.

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.

Sampler of the Karla font.

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 span with 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?