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.
- 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!
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).
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.