The best font choices are the ones where readers do not notice the font but the message
I don’t intend the exploration of typography for my site’s redesign to be an argument for or against sans-serif fonts vs serif fonts. I think they both serve their purposes. As the quote above indicates, it really doesn’t matter which font combination you use, as long as the reader is able to focus on the message you are trying to convey.
What I’d like to share is how I got to the font pairing used in my site redesign.
As I mentioned before on why I’m rebuilding my website, I want my site to be a delightful medium to share things I’m learning. Meaning I hope folks delight in what I write about and how the information is presented.
What are the differences?
If you’re unfamiliar with the terms sans-serif and serif, they refer to the shape of the letters of a font. Serif fonts are fonts that have those little tail marks coming off of the main body of the font. Think fonts often found in physical books and newspapers. Sans-serif, as the name suggests are fonts without those little tail marks. Think fonts like the San Francisco font used on iOS or Open Sans which is a popular serif font for the web.
Inspiration
In the past, when I designed websites, I naïvely went with sans-serif fonts. Mostly because they were clean, minimal in design and easily legible in small font-sizes. In the past few years, I slowly started to recognize that a lot of the reading mediums I used were in serif fonts. Mediums like the Kindle, iBooks on iOS and even Medium the website. At first, I thought it was just a stylistic choice but I noticed that I tend to finish reading articles that used serif fonts.
Curious as to why this was, I did some research and found that there is a reason why it was easier for me to read text in serif fonts in extended amounts of time. Serif letters are more distinctive thus easier for our brains to recognize quickly. Serif fonts are used to guide the horizontal flow of the eyes.
For this reason, I decided to choose a serif font for the body of my website. Along with the limited character count per line, I believe the use of a serif font will make the content easier to read. This doesn’t mean I’ve completely gone without sans-serif fonts in the redesign.
Although serif letters are easier on the eyes, sans-serif fonts are better at smaller sizes since they are simpler in shape. I’ve decided to use a combination of serif and sans-serif throughout my site. While serif fonts will be used for the body of the website, sans-serif would be used for meta data such as dates. Sans-serif fonts will also be used in the headings.
The use of sans-serif headings while the body text is in serif is a pattern I often see on websites and newspapers. Without research (so don’t quote me on this), my best guess would be that it is easier to read sans-serif headings at far distances. In the case of newspapers, it is easy to read a headline in sans-serif font from afar and hopefully draw in readers to come closer, buy the paper and read the rest of the story up-close. Not quite sure what benefit there is in using a sans-serif font for a heading on websites, but I really like the visual combination when sans-serif fonts and serif fonts are paired.
My choices
The fonts that I have chosen for my site’s redesign are Crimson Text and Quattrocento Sans. As far as why I chose these fonts, I really don’t have a great deal of reason. One day I stumbled upon femmebot’s awesome typography project where passages of Aesop’s Fables were set in Google Fonts, and I fell in love with Crimson Text used in The North Wind and the Sun.
I really liked the shapes of the letters and found the text to be easy to read. It was paired with Julius Sans One, which I wasn’t too fond of. The main reason being that the font only had one style (or variation). I like fonts that provide various styles such as italics and different weights. I wanted a font that had more weight to it.
Knowing that I wanted a sans-serif font to pair with Crimson Text, my serif font of choice, I fired up Google Fonts to find something more suitable for my needs. I quickly went for the Google Fonts favorites such as Open Sans and Source Sans Pro. But neither of those seemed fitting with Crimson Text.
Going through several passes of all the sans-serif fonts with multiple styles on Google Font, I finally narrowed it down to two fonts — Montserrat and Quattrocento Sans. Of the two, I decided to go with Quattrocento Sans. This is because of the shapes of the letters. Montserrat’s letters were wider and rounder. Which I thought would look better paired with another sans-serif font. While Quattrocento Sans’ letters are narrower and thus appears longer. This for me looked better in combination with Crimson Text.
I also liked the tail (serif) marks used in Quattrocento Sans, especially for the letter Q.
One more font
I actually needed another font for my website. Since I often post code snippets and various commands, I required a font that would look good for code. The obvious choice is to go with a monospaced font.
Monospaced fonts are fonts where each letter and character take up the same amount of horizontal space. Monospace fonts are used often for programming because it is easier to distinguish between thin characters such as parenthesis or brackets. Hence most text editors and IDEs use monospace fonts by default.
My choice for a monospace font was actually pretty easy. Ever since Adobe released Source Code Pro, I’ve been a big fan. I quickly jumped at using this font in my Sketch mockups and actually thought it fit pretty well with Crimson Text and Quattrocento Sans.
I was honestly a little worried that a monospace font and a serif font wouldn’t look well together, but I’ve grown to like the pair. I think this works because the code on my site will be highlighted and there is enough visual distinction and space that the two fonts work well together.
Which do you prefer?
These are my choices for my upcoming site redesign. I would love to hear what you all think. Do you prefer serif or sans-serif fonts when reading online articles or physical books?