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 19th 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.

Regular Trenda and its alternative style

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.

Old design
New design

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:

‘HTTP’ as normal text
‘HTTP’ as an abbreviation

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:

Normal superscript
OpenType ordinals

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


  1. If Garamond fails to load, the reader will see regular text (since their system font probably won’t include OpenType ordinals). It’s a sacrifice I’m willing to make.