The atomic units at the heart of every block of text are the letter shapes – the forms they take. They have the single largest impact on the overall vibe of a design. To the annoyance of some of my clients, I am obsessive about this at the beginning of any project. Selecting a typeface has a larger long-term impact than almost any other design decision.
The typefaces, or fonts, or whatever you want to call them – it doesn’t really matter – impact the “voice” people read your words in. They can determine whether your website feels editorial, authoritative, strong, modern, friendly, casual, or cold.
This makes typeface selection a fickle thing. Sometimes, it’s just about the tone of the text. Letterforms can be deceiving; context is necessary to understand how type looks. You have to see it rendered in paragraphs.
We have been lucky in the design community to have some great writing on this recently. If you have no idea what I’m talking about, Frank Chimero wrote a great primer as part of his redesign series. It’s a great introduction to picking typefaces.
Let me share my favourite part with you. At one point, Frank demonstrates the differences between Basis Grotesque and Avenir by examining the detail in their letterforms. He concludes that a reasonable person would presume, based on the letterforms alone, that Avenir is less quirky than Basis Grotesque. But then he shows them each in paragraphs. It’s the opposite of what a reasonable person would expect.
Here’s Frank:
My bet is that most people would identify Avenir as the more “flavorful” typeface in a paragraph context. An unexpected inversion has happened. The typeface with traditional letter shapes (Avenir) reads more distinctively than the typeface with quirks in its design (Basis). Basis’s oddities become less noticeable when typeset smaller, and the proportions of Avenir (it’s roundness, it’s size contrast between upper- and lowercase letters) go further in establishing the typeface’s fingerprint and impacting the text’s atmosphere.
In short: typography often lies to us. Paying attention to the shape of individual letters without paying attention to how the font works in the whole of the design work is sort of like picking a partner based on their eye colour and BMI. You’re missing the forest for the trees, and you come away with the wrong impression entirely.
Frank isn’t the only person writing about this. The super-smart folks at Hoefler, who have designed some of the finest typefaces available in the market, recently shared how basic pangrams (like “the quick brown fox jumps over the lazy dog”) have failed them during the design process of their typefaces.
Jonathan Hoefler writes:
In years past, our proofs were full of pangrammatic foxes and lynxes and the rest, which made for some very merry reading. But invariably, I’d find myself staring down a lowercase J — and if I questioned the amount of space assigned to its left side, I’d set off in search of some confirmation in the proof. Each time, I’d be reminded that while pangrams delivered all kinds of jocks and japes and jutes and judges, even our prodigious list featured not a single word with a J in the middle.
Hoefler has gone on to open-source their own pagrams (on Github), which I happen to really like, so I’ll use them throughout the rest of this post as examples.
Here’s what I find interesting about Hoefler’s post: most pangrams are a single sentence long. Hoefler’s new pangrams feature long-running sentences. Side by side, the words don’t make sense, but one can get a feel for how a typeface reads.
Picking a genre of type
I say all that to say two things: first, selecting typefaces is hard because, no matter what we mock up, our impressions of the type might change once we see it in properly rendered text.
Second, picking typefaces requires knowing a little bit about your long-term plans for the project. That’s why I wrote my post about what I’d like to do with this website first.
Let’s recap what’s on the website now, and what could eventually be on the website:
- Blog posts like this one. Sometimes long, essay-like mini-novellas. Sometimes short status updates.
- Photo sets, eventually.
- Perhaps brief film reviews and other assorted items of personal interest.
- I may start logging books I read here as well.
I said in my last post that I would like the site to add “an air of quiet elegance” to my writing. That makes a serif the obvious choice for extensive writing, like blog posts.
Most of the other text on the site is metadata: image captions, brief film reviews (if that comes to pass at all), dates, tags, and the like. A sans-serif is a great choice for that.
Of course, a sans-serif is also a great choice for a heading.
The “obvious” choice is one sans-serif and one serif. It may be worth exploring another option, though: one sans-serif for headings, and one sans-serif for metadata.
That would give me three typefaces:
- An editorial font for reading.
- A heading font.
- A “micro” font – a typeface for small text. Something like 13px or smaller.
This is a good place to start.
Now that we’ve narrowed down our ideas, let’s select a couple typefaces I might use for the initial mockups.
Everything I said earlier still applies. It’s hard to pick type. I might change my mind. The goal today isn’t to pick one font. The goal is to narrow down the choices to just a couple in each category.
How to analyze typefaces
If you’re new to this, or if you’re a budding designer looking for tips, let me share how I analyze typefaces.
I primarily consider three aspects of each face:
- Character. What does the font look like? Most people have a pretty natural understanding of this; after all, we intrinsically know it’s better to write a report in Times New Roman than Comic Sans. Times New Roman _looks_scholarly and intelligent; Comic Sans does not. This can become very nuanced, though: is a typeface playful or warm? How does that change the way the text reads? These are all questions I consider as I look at a font.
- Contrast. When we talk about contrast in type, we’re talking about the difference in thickness between their horizontal and vertical strokes. A high-contrast typeface is great for headlines, but won’t read as well at small sizes. A great example of an extreme high-contrast typeface is Didot from Hoefler & Co. (Because I plan on using the serif for text, I want to avoid something this high-contrast.)
- X‑height. In plain english, the x‑height of a font is the height of the lowercase “x” – or any other letter without ascenders (like in the letter “d”) or descenders (like in the letter “q”). If the x‑height is tall, that means that “x” is nearly as tall as “d”. And if it’s short, it’s the opposite. Typefaces designed for body text typically have tall x‑heights.
Picking a serif typeface
The serif typeface makes up the bulk of the body of text on this website. In my mind, it is absolutely critical to select the right one.
I already have a general idea of what I’m looking for. I’d like to incorporate an editorial serif: these are the typefaces used in (or inspired by) newspapers. Think Times New Roman. (Don’t worry; I won’t use Times New Roman.) I like the air of elegant authority these faces provide.
We give some credence to what we read in newspapers, and using a typeface akin to a newspaper font seems like an easy way to add gravitas to almost any text.
There are a few options in this category that are worth immediate consideration: Mercury from Hoefler, Tiempos Textfrom Klim, Freight Text from Joshua Darden, and Miller from Matthew Carter.
Before I make any comparisons here, it’s important to state that there aren’t any wrong answers here. Finding the right type is about creating the right feeling. It’s jazz, not classical.
Keep that in mind as we go through the rest of this. Without further ado: Let’s see how each of these look with the pangram that Hoefler and Co. have created.
First up: Miller. I’m starting with Miller because it’s designed by Matthew Carter. If you’re reading this on the un-designed version of the site, you’re reading Georgia, which is also designed by Matthew Carter. I often think of Miller as Georgia’s more refined brother.
Look back at Miller. How does its contrast and x‑height influence the way you read the font? Does it make it easier or harder to read?
This is Tiempos Text. (I labelled it “Test” because I’m using the test version of the font on my computer; I haven’t purchased it yet.) Tiempos Text is perhaps the most unusual typeface in this collection of serifs. Kris Sowersby, its designer, meant it to be an update of Plantin and Times for more modern use.
(It’s worth mentioning that Kris keeps meticulous notes and has a highly detailed blog for type nerds like me. If you’re into that, you should read his design notes about Tiempos.)
The proportions of this typeface make it extremely easy to read. It’s also a very high contrast typeface. In a long paragraph like this, a font like Tiempos Text can feel overwhelming. But over the course of many paragraphs and hundreds of words, a font like Tiempos can feel like a warm, intelligent hug.
Mercury is the opposite end of this spectrum. It’s a newspaper-bound serif, through and through. Optically, you might notice that it appears smaller than Tiempos, even though they’re set at the same size. This is because the x‑height is shorter. It substantially changes the effect of the text.
Truthfully, Mercury is one of my favourite faces. It renders well at even the smallest of sizes, and can handle all sorts of abuse by printers too. As a print designer, I love how easy it is to set and work with. As a web designer, I love how old-school it feels on screen. It communicates text efficiently, but also feels different from most other serifs. (I would set it a little larger on the website, I think.)
Finally, we have Freight. Freight Text is a beautiful typeface that’s part of a larger type family. It comes with a sans-serif accompaniment called Freight Sans, a version for micro-sized text called Freight Micro (that’s really more of a slab serif), and various different display sizes of the typeface.
I’ve used Freight before, and I think it’s a tremendous font. But looking at it here, I’m not sure it’s what I want to convey. You’ll note this is a higher contrast font than our other choices, which makes it harder to read on the dark background. While that doesn’t make it a bad font, it does make it appear “daintier” and “lighter” than my other choices.
To my eyes, Freight Text is almost too scholarly for my needs. It looks like it belongs in a paperback, not a newspaper. (If you’re a fellow designer and you’re offended by this; I’m sorry. While you’re here, I’m also not a huge fan of Gotham.)
To start with: I think I’ll stick to Mercury and Tiempos Text for now. I’ll play with each of them during the mockup phase and see what sticks. But at least this is enough to get me started.
Picking sans-serifs
When I think about “obvious” and “elegant” sans-serifs, I think about sans-serifs whose designs are obvious. For lack of better words, they look how one would expect letters should look. Of course, I’m referring to Helvetica and all its Swiss contemporaries (and the typefaces it inspired). Immediately, I think of typefaces like Söhne, Neue Haas Unica W1G, Neue Haas Grotesk, Acumin, Aktiv Grotesk, and so many others.
This category is much harder to distinguish. What makes Helvetica different from Helvetica Neue? Type nerds know they’re are differences, but in a blindfold test, I’m not sure we would actually notice them in a side-by-side comparison – not at text sizes.
For the sake of this illustration, we’re going to look at them at text sizes anyway.
Take Neue Haas Grotesk, for example. It’s clearly inspired by Helvetica. Unlike many Helvetica descendants, Neue Haas Grotesk doesn’t attempt to “correct” any of Helvetica’s so-called flaws. Instead, it attempts to capture the spirit of the original Helvetica – before decades of small tweaks caused many of its details to become lost to time.
Neue Haas Grotesk also has a display version for large headlines. It’s substantially more compressed than the text face, and has fewer ink traps. It’s really lovely. If you’re looking for a headline sans-serif inspired by Helvetica, I think it’s among the best.
Neue Haas Grotesk is a high contender for me.
But the difference between Neue Haas Grotesk and Söhne, pictured above, are much more subtle. (Again, I’m using a test version because I haven’t purchased the font.)
Söhne is actually a brand new, playful merge of Helvetica and Akzidenz-Grotesk (you can read about it in detail if you’re so inclined). It’s a little more compressed than Neue Haas Grotesk, but to the untrained eye, these faces would look identical.
But they’re not. In real world use, they communicate entirely different things. Söhne has a touch more character than Neue Haas Grotesk, but it’s also not strictly a Helvetica descendant.
Neue Haas Unica is so close to Neue Haas Text, at least to my eye, that I could almost use them interchangeably and call them a day. (Apart from the lowercase “a”.) But again, they render quite differently in actual text. Unica is more compressed as a text face, which makes it less readable, but as a headline, it’s less compressed than Grotesk’s display variation. At 16pt size, they appear incredibly similar, but as we talked about before, type can lie to us. At large sizes, Neue Haas Unica and Neue Haas Grotesk are different animals. (Demonstration below.)
Acumin, which is one of my favourite sans-serifs in recent years thanks to its unbridled utility, takes a whole different approach to this genre. Its letterforms are different, and it doesn’t strictly adhere to Helvetica’s style.
Acumin was, according to Adobe, designed to stray from Helvetica’s adherence to signage (read their design story). It’s available in a myriad of widths and weights that make it extremely comprehensive, with slightly angled terminals, single-stroke commas, and promotional numerals.
I like Acumin a lot, and I’ve used it on a couple projects, but I’m not sure it’s right for this site. The things that make it a better text face – its angled terminals and lowercase letters that ascend above the cap height – make it worse for headlines and wayfinding. If I were looking for a single sans-serif typeface that could serve for both headings and body text, I would carefully consider it.
In bigger detail
Still, it is worth comparing these four typefaces at a larger size as well, in an effort to see more of their character (no pun intended).
At a larger size, the differences between these typefaces are much less subtle. Acumin is clearly best used at text sizes; it lacks subtlety as a headline.
Söhne is clearly the most unique in the pack: compressed, but still readable thanks to the unique details of the “a” and the angled bowl of the “e”. Look at the capital “Q”! What a letter. Despite its geometric appearance, Söhne feels rounder and softer – without losing its neutrality.
Neue Haas Unica appears more compressed than the Neue Haas Grotesk, but that’s only because that image still uses the Grotesk’s text variant. Watch what happens when I use Grotesk’s display variant, which is more appropriate for large text like this.
Now, the tables have turned. Neue Haas Grotesk is much more compressed. Its weights are much chunkier. It feels like a signage poster. It also has a unique (and optional) lowercase “a” that looks not dissimilar to Söhne’s playful characters.
These options makes Neue Haas Grotesk incredibly flexible.
Since I already have easy access to Neue Haas Grotesk through my Creative Cloud subscription, it’s the easy choice to make right now. It’s got the sort of character (no pun intended) that I’m looking for.
A third typeface?
Finally, a sans-serif for metadata: This could be any of the typefaces I just listed, in fairness, but in the spirit of trying out a few things before locking myself in to a single face, I can think of a few humanistic typefaces that could render well here. Whitney and Ideal Sans could be ideal contenders. Frutiger and FF Meta could work as well.
Let’s talk, briefly, about why I might use a humanist face here. Humanist sans-serifs add warmth when they’re paired with geometric or Neo-grotesque typefaces, like the ones we just considered. In this case, they might help avoid situations where my website might feel cold or bland.
I own Whitney (from Hoefler & Co.) already, which I purchased years ago for use with Unsung Sundays, so that’s easy to test. Similarly, Freight Sans (Joshua Darden) might work well here. I’d like to try Ideal Sans (Hoefler & Co.), which renders very well at microscopic sizes, but I don’t own it. I’ll test it later.
For now, let’s start with Whitney and Freight Sans.
For this comparison, I grabbed a sample paragraph from a previous blog post to get a feeling of how they read.
My first note is that Whitney feels easier to read. My second thought is that Freight Sans is a wildly different approach to constructing a typeface like this. Consider the lowercase “g” – these faces almost feel like they come from entirely different genres. In fact, nearly every letter looks totally different. It amounts to a very different reading experience.
All that being said, neither of these typefaces work well with the others I’ve selected. Unless I work with Mercury as my serif typeface, I think these faces are going to clash. I’m going to shelf this idea temporarily, but Whitney would be my choice if I had to make one.
Wrapping up
After 3,000 words, I have started to limit and narrow down my options. To make the final choice, I’ll have to start playing with them in real designs – and maybe even in code.
This is not unusual. In fact, it’s a good place to start with any design project. The blank page is intimidating because it has no limits. By selecting a handful of typefaces to trial, I’ve already begun creating constraints.
With Mercury, Neue Haas Grotesk, and Tiempos Text in mind, it’s time to start playing with layouts and type sizes.