Choosing a Font for the New Into the Book

Update Filed in: Web Posted: October 18, 2020 1,099 words

For a website built entirely on the written word, there may not be a more impactful design decision than the choice of a font. Type is the dressing around every one of the words on this site, and the typeface of a site sets the tone, if you will, for the content that readers will encounter within.

Into the Book, for its part, began life set in the venerable Arial. It was free, it was web-safe, and those were the only two conditions that mattered in the choice of a font for a website. At the time, flash-based fonts (using technology like Cufón) were the only way to get premium typography on the web, and I preferred to keep things simpler.

After CSS @font-face landed in 2013, I redesigned Into the Book with full web font support. The body copy was set in OFL Sorts Mill Goudy (such a beautiful serif!), and display/UI text was set in Proxima Nova.

Now, in its temporary form, Into the Book is using the 2020 theme, which is set in Hoefler Text, accented by the striking Inter Text, which is especially calibrated for screens.

Round 1: Typefaces

Even though ItB has (almost) always been set in a serif typeface, I started this exploration determined to find a suitable sans-serif typeface for the site. After all, a blog is a screen-first medium, and it made sense to acknowledge the reality of screens.

Here are some initial explorations to that end:

Proxima Nova has an excellent balance and weight. I could *almost* read an entire book in Proxima, although it has just a bit too much personality for that. It does look great in display, though.

I was actually introduced to Neuzeit Grotesk through a board game, but it quickly became one of my favorite fonts. It’s just a bit too heavy and dense for type, though.

P22 underground is, of course, the iconic London Underground font (WAY OUT ➸), but you can tell this font wasn’t quite designed for large tracts of body copy. It’s got far too much personality, and looks empty on the page compared to the denser blocks of Proxima and Neuzeit. I’d get sick of reading this for too long.

Inter looks almost futuristic. The high X-height does indeed make the text quite readable, though I had to adjust the line height to compensate. Though it looks nice at heavier weights, it almost seems generic at body sizes.

Sofia has an excellent quality on the page. It’s lighter than all of the previous examples, but doesn’t have so much character that it needs to be very loosely (like Underground).

Caslon has a rhythm and flow that looks incredible on the printed page. Serif fonts remain much more legible and interesting at body font sizes — perhaps it’s unfair to include only a single serif against so many sans-serifs, but like I said, it was originally my goal to set the site in a sans-serif.

As much as I love it, Neuzeit was the first cut of the six. Underground was also not very successful as body copy. Proxima Nova, for all its great design, is a font I’ve used a lot in the last decade, and I’m ready to move on (I still might consider any of these options for display/heading use on the site).

Inter, though very legible, looks almost bland at regular text sizes. It’s the safe choice, but doesn’t quite match up with my goal of having large body copy.

Sofia is the font I wish Underground had been in lowercase, though I will need to bump the font weight up in the following round. I think at a large enough size it will do very well (it is also extremely similar to Gotham/Proxima, which can’t hurt its chances).

Caslon looks incredibly classic, and if I want to go for the ‘book page in digital form’ look, it’s the obvious choice. I’m still torn between that idea and my original idea of going all-digital.

Round 2: Pairings

I am in love with P22 Underground, and desperately wanted to use it on the site. As such, I pushed that as the display copy in my next round of options:

Sofia is great at display sizes, but as I was afraid of, it’s just too casual and informal in a full post. I do love the headings though (foreshadowing)

Inter is bland bland bland. This would be great if I were The Verge, or HP. But I’m neither of those websites. I tried using Underground as a heading font but it really doesn’t play well with the straight-laced Inter.

Caslon is the landslide winner for body copy, I think. The legibility is unmatched and the classic look matches what I’m going for. The text feels denser on the page than either Inter or Sofia, without feeling cramped or tight. Underground does great in the headings here, but can’t handle the longer quote text, so I set that in Caslon, which also struggles, especially in italic.

Round 3: Winner Winner Chicken Dinner

I found that I couldn’t give up the Sophia headlines. They were quirky without feeling too weird (Underground), geometric without feeling stale (like a kinder version of the Field Notes brand without any less of the charm). This might sound silly, but the capital ‘W’ in Sofia set me over the top — it’s simply perfect.

Sofia also handled the quote text perfectly, as well as sub-headings. It had almost all of the personality I loved in Underground (I even left a light-weight heading in there as a nod back to my initial explorations).

Caslon, of course, looks classy and classic as the body copy. I like the idea of a book-like blog the more I think of it — after all, its in the name! I’ve been pondering the intersection of digital and physical media for a while now, so why not bring the 18th-century printed page to the 21st-century web?

The two fonts are quite different: Sofia has a taller X-height with smaller descenders, so they don’t integrate well on the same line. I’m going to be pretty strict about keeping Sofia only for display (and website chrome/navigational text), and Caslon in the body column only.

If you held a gun to my head, I could convince myself to use nothing but Sofia in the body. For some blog posts, maybe that will be the appropriate tone — but we’ll cross that bridge when we get to it.

Up next: design and layout comps — time to get rid of this horrid pink color.