The Old Ways Are The Best Ways

I wouldn’t care to relive the past month. Suffice to say there are reasons why I haven’t written much. Nevertheless, I haven’t been idle.

Redesigning

I unveiled my previous design on the 19^th of April. The colours, the background image, and the general layout were the work of a single night. I deliberately erred on the side of haste to avoid paralysis. That bit of colour made me happy, but it was the easy choice: rather than complement the content, I simply added all the colours of the rainbow. I’ve mentioned several times that I’d like to redesign it all, so I did just that a couple of weeks ago.

I started with a typographic scale. The base size remains 20.8 pixels on a small screen and 27.2 pixels on larger screens. I chose a ratio of 1.250:1 for the scale on smaller screens. I found more drastic ratios on larger screens jarring.

With a clear typographic hierarchy in place, I removed the background image, leaving me with the usual black text on white. It looked too plain, so I changed it to a slightly off-white colour. I began to see some potential. I could eventually add a different background to create a structure similar to what I had earlier, but only if it truly improved the site. I’d rather have nothing than saddle myself with another stopgap.

A new old face

I’d been living with Proxima Nova for three weeks. I was tired of how bland it was and the lack of small caps was a constant irritation, so I went through a few long lists of options. Latinotype’s Trenda looked promising for a week or so. I almost left it in place, but I felt a continual hesitation. I tried the alternative style too. It has a nice double-storey a which is more pleasing and legible than the single-storey default, but the other alternative glyphs aren’t as good. I didn’t want to try to fuse the alternative a and the other default glyphs together to create my own font, or write complicated, poorly-supported CSS @font-face declarations just to fix it—Trenda wasn’t that nice.

I’d had enough. It was time for Garamond. I don’t care what I’ve said on the subject before, it’s simply a beautiful font and the right choice.

Garamond, then, but which one? Well, Cormorant Garamond is too fine. ITC Garamond is the opposite. Garamond Premier has many quirks that detract from its otherwise lovely appearance. The same applies to ATF Garamond. I ultimately settled on Adobe Garamond, which is close to perfect. Since it’s a much more delicate face than Proxima Nova, I increased the ratio of the type scale to 1.414:1 on larger screens.

To celebrate, I added a new :abbr Markdown directive. It uses the Garamond small caps along with a touch of extra spacing. I updated all of my past entries (except for Thoughts & Spoilers), leaving proper nouns alone. The effect is so beautiful:

‘DotA’ (as in GG WP, DotA) looks a bit odd, but I can’t convince myself it shouldn’t be marked up as an abbreviation, or that it should be ‘DOTA’ instead.

Adobe Garamond’s OpenType ordinals naturally fit much better with regular text than HTML’s normal superscript does. I added special styling for ordinals and then even added an :ordinal directive so I could sprinkle them throughout my content:

Much better.^[1] Really, Garamond just looks so beautiful I could cry. (You may see a pattern here.) Why did I resist for so long?

Since I was completely revamping the site, I also updated the code blocks, which had no font specified. I selected the very popular Recursive. It’s distinct, clear, and fully-featured. I had to coax the Google Fonts API to give me the files I wanted so I could self-host them, and I ended up without the discretionary code ligatures, but that suits me. I don’t like ligatures in code—it breaks the correspondence between size and character. On the other hand, I do want to see how to enable specific stylistic sets (ss12 for the more recognizable @ and ss07 for simplified italics), which don’t appear to be available in the Google Fonts version.

Miscellany

The design notice is gone! I don’t see any reason to continue to show it. I’ll implement complete support for Webmentions in good time.

• Footnotes are now smaller but selecting one will increase the size.

• I fixed some spacing issues on smaller screens, particularly with blockquotes and images. I also fixed spacing issues around headings, images, and floats.

• Floated images are now correctly sized.

• Lists of posts were numbered incorrectly when I started hiding music posts. This is fixed.

• I popped list markers (the numbers or bullets in front of list items) outside their boxes where they belong.

• Practical Typography warns against modular type scales. I don’t agree with everything on the site, but it’s the work of a master, it oozes style & class, and it implements the headings-on-the-left layout I’ve often considered. Will I be persuaded to undo the scaling here in favour of more muted headings? Find out next time on ‘Which Design Principles Has Shiv Been Swayed By This Week?’!

• I missed a trick by not spending $5,000 on TEFF Lexicon for my blog. Too late now, I suppose.

• I wonder whether I should lay out floated image groups (like the Trenda screenshots earlier) vertically instead of horizontally on larger screens too. It didn’t look bad when I tried it, but I’m not sure it looked better.

Next in series: How I Create an Article Series in Eleventy(#15 in Colophon: Finding A Place For My Head)