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.
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
@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
Much better. 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
for simplified italics), which don’t appear to be available in the Google Fonts version.
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.
- 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.↩
Next in series: How I Create an Article Series in Eleventy(#15 in Colophon: Finding A Place For My Head)