Review

Pimpin’ the Typographic Hierarchies of a Tech Blog

Learn how to improve the typographic visual hierarchy of a page, and better guide your reader through your content. This is a great example to see how much difference small changes can make.

Thanks to Caleb, who sent in his site for typographic review! Watch the video here.

Key takeaways

  • Give your elements sufficient space.
  • For your link styles in the body text, make them as subtle as possible. Find a balance between being noticeable and distracting.
  • If your text is different, then style it accordingly (the footer should contrast with the article’s content itself).

Analysis of the current design

  • The used typeface Georgia is not bad, but not unique either.
  • Header and navigation draw too much attention to themselves.
  • Header and h1 compete with each other, they are too close.
  • The colorful links in the body text are overemphasized, which make it hard to focus.
  • The footer with the meta about the article is not visually separated from the main content itself.
  • I love Caleb’s focus state and how obvious it is!
The original web design of Bowl of Tardis
The original design Caleb sent in for typographic review. Too many elements have the same visual weight, which makes it hard to focus as a reader.

My conclusion: It’s not clear what’s the most important element on the page, which makes is hard to dive into the content.

What I pimped

  • Header and navigation are now a bit smaller and differentiate better from the rest of the page.
  • The “Good Afternoon” greeting message from the top right got removed, since it was too distracting.
  • Distance between the header and the h1 got increased.
  • The font size of the h1 got slightly smaller (from 1.7 to 1.6 rem).
  • The links below the h1 are in gray and not styled (they don’t need to stand out that much here).
  • For the links in the body text, I removed the color, except for the underline.
  • The footer is now set in a smaller font size (to around 75% of the body text).
The pimped design
After: The design is calmer now, visual hierarchies are clearer, the header and links don’t stand out that much, and the footer appears separated from the main content.

What do you think about my improvements? Let me know your thoughts in the comments! If you want to, you can send in your web or app design for typographic review here as well.

Typographic power to your inbox!

  • FontFriday: I personally recommend one typeface per week and for what application it’s best. Every second week, it’s a free font.
  • Pimp my Type: Every second Tuesday a short article or a video from the YouTube channel that help you improve the design of your website, app or digital product.
  • No Comic Sans, Open Sans 😉 or any other BS, like annoying ads. Your email will only be used to send out the newsletters, unsubscribe anytime.

10 Comments

    1. Nice one, Caleb! Thanks for sharing, definitely try a demo for your Blog and let me know when you did!

    2. Hi Oliver,
      falls du dir die Schrift schon näher angesehen hast, würde mich deine Meinung dazu interessieren. Beispielsweise ob die Lesbarkeit dieser Schrift wirklich besser ist
      beste Grüße, Lena

  1. A textbook before/after example – so much of the revision is about recognizing and using emptiness or negative space.

  2. Just a suggestion for a future article. It would be interesting to know what fonts and styles you see being used in design trends for 2022. I suspect we will see more outline fonts, stretched fonts and animated text.

Leave a Reply

Your email address will not be published. Required fields are marked *