In this review call, I give feedback to Kev Quirk’s personal blog. Fira Sans and Georgia don’t go so well together, the header could be more compact, the styling of info and warning boxes is too striking, and the footer also gets redesigned.
Key takeaways
- Check the font stack: the fallback system fonts should be the same category at least.
- Type choice: Fira Sans Condensed is a good type choice, because it’s highly legible, very widespread, though.
- Type combination: Georgia & Fira Sans don’t go well together, Meta Serif fits better.
- Header: save vertical space by moving the blog category and the date in one line.
- Pull quote: reduce the line height of large text to make it more compact.
- Footer: remove underlines in the footer links to make it calmer.
Kev did the work! For a detailed description of all the changes, check out his blog post about the typographic improvements. I’m super thrilled, that he implemented plenty of the suggestions right after our call, which resulted in this:
Let me know in the comments, what you think of the suggestions! Also consider submitting your app or website for a free typographic review.
Hi!
You might wanna check your merch site. When I open it on iPad Pro, everything’s blank. I can send you screenshot if that helps.
Hang loose,
Gary
Thanks for letting me know, Gary! That’s strange … when I check it, even on my iPad, it seems fine. If you hit the URL directly, it’s blank as well?
Danke, Oliver und Kev, für diese Präsentation. Sehr verständlich und nachvollziehbar erklärt, viel dabei gelernt. Und dann Kevs sehr interessante Website entdeckt – sie lohnt sich, genauer anzusehen!!!
Freut mich sehr, dass du etwas daraus mitnehmen konntest, Lothar!
These mostly look like really good moves to me. I do miss the calendar icon for the date somehow and also feel there is too much importance to the color underline for the tagging under the headline; especially when there are a lot of tags. I wished that was a softer / less contrasty color. Honestly the biggest issue for me remains—the *orphans* in the headlines, like in the Gemini Project story. Kev’s a smart guy, I’m sure there’s a programatic way to sniff for orphans and change the parent max-width or insert a break tag into the H1, no?
Anyway – here’s my rough take.
https://codepen.io/badcat/pen/bGYRgay
Nice suggestions, Kev! I think it looks calmer now in the header.
Good question about the automatic removal of orphans … I guess this must be done with some JavaScript, since you can never how wide the column is.
But honestly, I think I would live with that, it’s the flexibility of the web we have to deal with, especially, when it comes to blogging, where the content can be very different each time.
Cheers ¶ Oliver