Escaping the Font Rabbit Hole

My first website template design started off well. I knew I wanted to create a theme for a restaurant. I had brand target words to aim for which were Fresh, Responsible, and Elegant.Additionally I had completed information architecture and separated the information into components. All I had to do now was either block out the layouts or choose fonts. My personal preference is to have fonts before blocking the layout, so I that is where I started.

I decided I wanted a serif and a sans-serif pairing because I knew that was common and that if I looked for those I would be able to quickly build a font repository for myself. My design experience at this point was only that of a full stack developer with a penchant for front end work. My font resources were sparse as the designer I worked with provided the font resources. So I went to google fonts and fontspace to peruse and collect fonts for my free and soon to be released open source theme.

I stumbled across Muli. When I first saw Muli, it really just spoke to me. I knew it was the sans-serif I was looking for. Problem was, even though it “spoke” to me, I didn’t really pay attention to what was being said. “No matter, I won’t question why I like this font so much. Time to find a serif that does the same thing!” I just wanted a gut response to a serif font just like the one I had with Muli. That was my misstep that sent me to the depths of the font rabbit hole.

So after spending an hour or two searching I was becoming frustrated. I found six fonts that I thought were nice, but my visceral reactions to all of them were fairly equal. I knew that continuing the search would only cause more irritation, but I needed to complete this before the coming day. I knew the emotional “feels right” moment definitely would not come in my current mental state.

Six serif contenders on the left, and Muli on the right

So I took a brief respite to clear my head and upon returning I finally realized I never asked why I liked Muli. I had not really bothered to explicitly define what made Muli “Fresh, Responsible, and Elegant”, what made it the ideal messenger on this mission to communicate this brand to a potential user. The moment I realized I had not questioned that feeling formally was pure empowerment. I had a clear step forward, and saw the possibility of a light at the end of the tunnel.

I looked at Muli and started picking out similar characteristics that communicated those brand target words. Some examples of the characteristics I picked out :

1. The proportions of the circle of the d, the p, and the o are all the exact same size and that consistency provides a sense of security and of responsibility.
2. The stroke’s width never varies giving the text a solid responsible foundation.
3. The M is symmetrical and proportionally spacious.
4. The proportionality of the enclosed portion of the e is spacious as are the circular enclosures on other letters which gives the font an open and fresh feeling.

I grouped those characteristics and came up with three metrics to characterize fonts by: stroke, proportionality, and symmetry.

After characterizing Muli, I examined the 6 contenders for the serif font. So I went font by font and characterized the features that were going to add or subtract from the brand target words. This was great as I could clearly see and formalize what features of the font were adding to the brand and which were detracting. By weighing the balance of the negative and positives I was able to start removing fonts from contention. Below you will see how many font choices I was able to eliminate just by this initial characterization.

Two fonts remain

With two remaining fonts, I decided to look back and compare the features of Muli against the remaining contenders. From this, I realized that Muli strongly embodied the “fresh” and “responsible” nature of the brand, but lacked the necessary stroke embellishments to truly accentuate the elegance of the brand. So I refined my search, knowing that from these two fonts I needed to select the one that would add the most elegance to the brand. After applying this heuristic, I chose Spectral.

Spectral supplemented Muli’s weakness in communicating brand elegance while still enhancing and matching Muli’s best features.

I chose Spectral over Merriweather in this instance. Muli had freshness and responsibile characteristics in spades. Merriweather was too similar to Muli to really add any additional elegance to the theme. However, the sharp stroke embellishments, the slight variances in stroke width, and similar proportions to Muli of Spectral were able to elegance to the theme without on contrasting too sharply from the sans serif counterpart.

So by creating a system of metrics to formally characterize fonts I was able to escape the font rabbit hole and get complete my first website theme. Hopefully, my experience can help you avoid or escape the font rabbit hole if you ever find yourself there!

Thanks for reading! Check out the theme I created in action, view it on behance, or look at the code on GitHub.

I would love to hear your experiences of falling down a font rabbit hole and how you escaped in the comments below!