JAN 16, 2020

New year, new styles

I’ve had a few issues with this blog that I had been meaning to clean up for quite a while… and well, I finally did it. Nothing crazy but here is a quick list of some of the changes.

• CSS has been simplified quite a bit. It is still probably too bloated and confusing for a site of this simplicity but I’m not a developer or designer. It will be fun to see if I can simplify further. But overall – much better than it was.
• New header font! I’m now using Noto Sans instead of Nunito. Nunito was a bit too rounded, smoothed off and it didn’t fit well with Zilla Slab (the serif font I’m using for body copy).
  • I stuck with serif for body font and san serif for headers. This seems to be the inverse of a lot of modern blog styles but I prefer it so whatever.
• Slightly reduced max width for better readibility.
• Fixed a lot of spacing, marging, and padding issues. Headers in particular were a mess previously. But line heights, paragraph spacing, and lists are better now too.
  • Lists in particularly were bugging me the most. Glad to have fixed those issues for good. I made the line height on list items a little tighter than on paragraphs so each item feels a little more contained. Subtle but it helps. I swear.
• Added the tiniest amount of border radius to images (2px!) that is barely noticeable but it makes me happy.
• Put in styles for code blocks finally (including syntax highlighting when a language is specified).
• Made the base font size 20px. I think Zilla Slab reads better at this size and it was simpler to have it as the default instead of doing everything off a base of 16px and using 1.25rem constantly.
• Added a date above each post, which also serves a permalink to the individual post. This is not super intuitive but I want the blog to primarily serve as a minimalist feed. Therefore I don’t like requiring every post to have a title so it is a workaround to view every individual post when there isn’t always a title to click. I know this is not the best usability wise but it works for me for now.
• Related – cleaned up the formatting of individual posts so they don’t look like trash now that there is a way to view them.
• Put footnotes into their own, more clearly contained little section. Much happier with this treatment¹.
• Loaded the 500 weight italiced version of Zilla Slab for use within block quotes. I love, love having this weight and style available. Adds a nice subtle distinction from the normal 400 weight and it looks nicer than the fake browser version of italics that you usually get instead.
  • Note: I’m not a typography snob but I wouldn’t mind becoming one. Enjoying these posts from Frank Chimero lately.
• Added some negative left margin to block quotes so the text continues to align with the normal paragraphs but the left border hangs out in its own gutter. I tried a lot of different styles for block quotes before landing on this one.

I think that is about it! Really happy with how it all played out in the end. I also added a style guide page so I had somewhere to easily see the impact of various changes. I should have done that sooner. Lesson learned.