Improving the Typography of a Podcast Website

Marc sent me the redesign of the blog for his German podcast Neu-gierig and wanted to know my opinion on his font selection. In the video analyze it and give some suggestions for improvement.

TL;DW: I change the font for body text, activate stylistic alternates for the headings and tweak the navigation a bit to achieve a more harmonic end appearance.

The Design Briefing

  • The key audience are web designers and designers.
  • Their top 3 values are creativity, open-minded, curiosity.
  • The atmosphere of the blog should be friendly and welcoming.

The current Design

Original Blog Design of Neu-gierig
The original blog design

The design is colorful and contrasting. The typefaces are Bree and Pulpo. Bree is a soft, friendly typeface with a handwritten touch that fits nicely to Mark’s briefing. Choosing a slab-serif typeface for the body text is a good idea as well, since it might be a bit traditional, human. But the particular choice of Pulpo in combination with Bree does not work that well. Why? Read on!

Pimpin’ it

Change the typeface

Bree has a large x-height and a narrower, Pulpo has a low x-height and seems wider. Bree also has an even stroke and simpler construction, Pulpo has some contrast going on (the horizontal lines are lighter than the vertical). This all results in a not so ideal combination. I’d go with Bree as the primary typeface, since it fits the desired atmosphere best and look for another typeface for the body text. Adelle is by the same foundry as Bree and has closer metrics and also a simpler, cleaner touch to it, even though it’s a slab-serif. This makes it a better combination.

The words Neugier x written in Bree, Pulpo and Adelle
Bree on the left side is pretty narrow with a large x-height. Pulpo on the first line right has a lower x-height and seems wider. Adelle on the second line right comes closer to Bree regarding the x-height and stroke.

Activate stylistic alternates

Bree is great, but it is very often seen and wide-spread. To make it a bit more unique, we could activate the stylistic alternates in the open type features. This way the very characteristic loop of the y and g get replaced among other characters. It basically becomes a little straighter.

The words "a good typeface" shown without the stylistic alternates activated and with them
Both lines are set in Bree – crazy, right? On the first line the default design with its characteristic loops at the g and y and a lively e. On the second line the stylistic alternates are activated showing a two-story a and g, a straighter y and e.

Adapt the navigation

The navigation is really big and not aligned to the bottom of the logo. Making it smaller will emphasize the logo more. Aligning it to the bottom of the logo is also better since it is the same baseline.

Extra-Bold is very strong for this smaller font-size now, it’s too dark. Bold will be sufficient. When something is set in all caps it’s beneficial to increase tracking (the space between letters), so they don’t sickt together that tight.

At the top the original navigation in Bree Extra-Bold at 25 px size. At the bottom the adapted design using Bree Bold in 20 px size and slightly increased tracking, aligned to the baseline of the logo. This makes it more elegant and lighter.

The result

The pimped design of the Neu-gierig Blog
The pimped design using Adelle as body text, Bree with stylistic alternates and an adapted navigation.

What do you think of the redesign? Leave it in the comments below! If you would like to receive some tips for improvement on your design, submit it here.

Typographic power to your inbox

  • Font Friday: I recommend one typeface per week, free fonts included.
  • Type Tuesdays: articles & videos that up your design game.
  • Join 2500+ typography enthusiasts, unsubscribe anytime.

4 Comments

  1. Thank you for your teachings on typography. This one wa sparticularly good and helpful. Keep your good work.

  2. It’s really super interesting. A huge thank you for these explanations.
    On the improved version, is it me or is the menu a bit too low compared to the logo?

    1. You’re very welcome, Elle! And you’re totally right – the navigation was too low! Kind of missed that 😉 . Fixed it now.

Leave a Reply

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