The Right Space Around Headings in Web Typography

In this call with software engineer Hugo Müller-Downing, I review his blog. We dive into the spacing around his headings, to structure his website better, talk about font sizes for headings, how to style captions, and I adore his marginalia and favicon.

Key takeaways

• Reduce the space below headings and increase the space above them.
• Add space between entries and make links obvious.
• Check if the fonts are loaded or spelled correctly.
• Use as little different styles as possible.
• Use the optical sizing of variable fonts (if they provide it).
• Reduce the line height of short lines.
• Use less line breaks in your text, so it does not fall apart that much.
• Use curly apostrophes.
• It’s okay to have a larger H1 than the page title.
• Use custom typography over system fonts to let your site’s personality stand out more.

Before and After

Hugo did the work and applied my feedback to his blog hugo.md. See it for yourself or the comparison here.

The four major improvements here are:

1. The title is larger, and a bit lighter.
2. The space below the headings it is reduced as well.
3. Hugo removed the line breaks in the first paragraphs.
4. The marginalia now has less line height.

System fonts vs. custom typography

Another aspect that Hugo told me about was, that he first used system fonts only. He’s a software developer and did not want to download all that baggage just for typefaces. But then he got interested in the subject and discovered Pimp my Type. He tried out Newsreader, one of my FontFriday recommendations. Hugo made a before and after companions and sent it to his friends to gather feedback.

Hugo’s friends all said he should go for the custom typography, using Newsreader and Libre Franklin. This made his site much more interesting and individual. What a great example of how typography influences the perception.

---

Let me know in the comments, what you think of the changes! You can also submit your design for a free typographic review here, or schedule a private coaching call with me.