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 blocksfinally (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 treatment1.
- 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.
Important as I love being able to use footnotes for some reason. ↩