It's not broken: I'm (re)designing this in the open. Follow along if you like! →

Playing with type

What follows below is my highly unscientific approach to comparing and choosing some fonts or typefaces. Since this is still in the early stages of the whole redesign, the choices below may come to be changed.

 TL;DR

Settled on Milligram Text by Zeta Fonts. It's legible and stands out without being distracting. From the start I wanted to use Vulf Sans by OHNo because it's so deliciously wonky, simple as that.
The Figma file containing some of the exploration is publicly available.

Beware the Vulf

Before I even started setting all of this up I had already decided that I would make use of Vulf Sans by OH no. It's been sitting dormant in my not-so-extensive font catalogue, if one could call it that. But this is the perfect time to dust off its wings!

Demo image of Vulf Sans and Vulf Mono - Source: OH No type

Just look at it, how funky is that?!

Inter

One obvious contender is Inter by Rasmus Andersson. It's robust, comes in a lot of weights, renders great and is highly legible in most sizes. Similar to the likes of Helvetica it does what is needed and without getting in the way. That is also why I'm not going with Inter this time. This is my personal space-to-be so I want it to feel like me.

A quote from The Grand Budapest hotel set in Inter

Sturdy, solid and reminds be of a Ron Swanson quote: "Straight down the middle, no hook, no spin, no fuss."

Maison Neue

I've also looked and tried Maison Neue by Mileu Grotesque. Compared to Inter, Maison offers a bit more personality. The lowercase "a". The somewhat extended "beaks" on the lower- and uppercase "s". The lowercase "g" is just slightly different.

A quote from The Grand Budapest hotel set in Maison Neue

Maison Neue is definitely heading in the right direction. A solid sans-serif with a slight sense of wonky. I like wonky. However, the slightly narrower characters and tighter kerning is not really what I'm after. Ultimately, it's a pass.

Milligram

Milligram Text by Zetafonts. This is the font you've been reading all of this in. It has a somewhat tighter kerning similar to Maison Neue and has pretty much the same width characters as Inter. The serifs, perhaps called "spurs", of the lowercase "a" are absolutely delightful. Milligram also offers a higher contrast compared to Inter. It's really subtle when looking at individual characters, but in an actual text context it really helps the legibility. At least to me.

A quote from The Grand Budapest hotel set in Milligram text

The one downside to Milligram, which is ultimately out of my control, is browser (and/or OS) rendering. In my tests Inter and Maison Neue have been fairly consistent but Milligram seems to render a bit fat. Not enough for me to dismiss it, but something I will keep an eye on.

Typesetting

Next up is actually setting the type. This is where line heights, margins, font sizes, hierarchy and all of that comes in. It will take some experimenting and as soon as progress has been made on that front, I'll be sure to write something up!