Choosing a body typeface for this website

A few months ago I moved this website from Hugo to Kirby. The former is a static site generator that worked great when I could dedicate a lot of time to maintaining git pushes across multiple devices, but since I wanted to streamline things without necessarily going the database route, I chose to return to Kirby CMS, a flat-file website engine. Part of this exercise also involved refining the design and structure of this website and—because of my own fancies—rethinking the typefaces I use.

Needless to say, not every typeface goes with every design. Not every typeface even suits all UIs and this website, like any well-designed website, has a recognisable UI framework. The typeface that fits snugly into it—and the one I picked right at the start—was Bold Monday’s stellar work for IBM, Plex. Specifically, the UI elements on this site use Plex Sans in various weights (variable).

However, this is a text-heavy website at the end of the day. My essays and book reviews form a large chunk of the content (along with several pages which are also text-heavy). This means picking a good typeface for body copy was critical. It could make or break the website and while most of my readers have been happy with my choices in the past, some of them have not been hesitant in letting me know their displeasure. And I am thankful for that. Early this year, I found myself in the same position again: what typeface do I pick for body copy on this website—for the words you are now reading.

There is no great suspense in which typeface I finally chose: Dolly Pro by the eccentric and immensely talented Amsterdam-based typeface company Underware, which is the type in which these words you are reading are set in. This article is not about what I chose but about why I chose it. (Also, going forward I will be calling it just ‘Dolly’ dropping the ‘Pro’ for ease.)

In the beginning there was Plex

This website builds on the Carbon design system by IBM because the predictable, grid-like nature speaks to me. It was natural then that I also try out their recommended type family for body copy: Plex Sans and Plex Serif. (I still use Plex Mono for monospaced text.)

Generally, Plex Sans was good. I was never consistent about it but there were times when I liked it and times when it did not feel right. My takeaway was that Plex just does not carry some content as well as it does others. This was my first requirement: neutrality.

A good typeface for body copy is neutral and offers little by way of its own identities and quirks. This is how the content gets to shine while the typeface acts as a vehicle in which to deliver the content frictionlessly. Moving from word to word as you read should not be something you think about.

The characteristics of good body type

There were, broadly speaking, six criteria I had for picking a typeface for my body copy. Some of these I was willing to give up on beyond the absolute necessities (e.g. no. 4) while others were non-negotiable (e.g. no. 3). Here is the full list:

1. Good and fitting x-height
2. Open apertures
3. Proportionate ascenders and descenders
4. Required weights and/or optical sizing
5. Contrast and colour on the page
6. Flexibility across devices

There is a seventh item not listed here but one that I often rely on: gut feeling. Finally, while I do my best to describe these points now, I am some 30,000 feet in the air which means I am unable to add illustrative images at the moment. These will be added some time after publication.

It is worth keeping in mind that like all art, both creating and designing with typefaces is to some extent reliant on subjective opinion. However, also like all art, rules exist to make things easier and represent a summary of knowledge gained by others over the years. This means we do not have to reinvent the wheel and this is how I view the ‘rules’ I will be discussing presently.

What marks the right x-height?

There is no such thing as the ‘correct’ x-height. Now that we have got that out of the way, we can focus on what we can consider when we talk about x-height.

In typography, x-height is quite literally the height of the letter ‘x’. Conceptually, this represents the height of all lowercase letters. Why not use ‘o’ height, then? That is because some letters, like ‘o’ or ‘s’, particularly those with curved tops, exceed the height of lowercase letters to preserve good proportion. However letters like ‘w’ and ‘x’ are pretty much always flat-topped, letting us define a proper lowercase alphabet height based on them.

In short, x-height that is too low or x-height that is too high are both bad for reading. You want x-height that hits the right spot.

There is a second consideration when it comes to deciding what makes the right x-height. If you are using a second typeface in your website or book or wherever else (these rules apply everywhere), a great way to maintain harmony across you works is to choose typefaces with comparable x-heights. They need not be exact but if they are wildly different, your work will quickly lose coherence.

Good ascenders and descenders

A technical follow-up question would naturally be, “If two fonts are designed with varying base sizes, how do I compare their x-heights?” In other words, using this website as an example, Plex Sans at 8 pt size and Dolly at 8 pt look to be extremely differently sized on screen. However, Plex Sans at 8 pt and Dolly at 8.5 pt will both give us, for example, the letters “I” and “A” at the same height. This is called cap height or the height of capital letters.

So the takeaway here is, when comparing the x-height of two fonts, make their cap heights optically equal i.e. they may be set at different sizes but must visually look like the same size. This is the basis for comparing x-heights. Of all the typefaces I tried (Bennet text, Charter, Chaparral, Guardian Egyptian, Acumin and Inter to name a few) the x-height of Bennet text and Dolly matched Plex Sans best. Charter was too tall, Chaparral too low. Guardian Egyptian was good but I dropped it for other reasons.

Speaking of cap height, something else that extends beyond the x-height in lettering are ascenders and descenders. As their name suggests, ascenders are stems that rise above the x-height (like the vertical bar of the letters ‘h’ and ‘b’) and descenders are stems that drop lower (like the stem of the letters ‘p’ and ‘y’). These are obviously not part of the x-height but if they are not sufficiently long, the letters look squished and, for a reader, it becomes hard to read long passages of text with ease as the eye is unable to float past the shapes created by these ascenders and descenders. Once again, wildly pronounced ascenders and descenders are bad too as they give your text too much shape and distract the reader.

Open up those apertures and colour the page

In typography, the term aperture refers to the gaps between curves, bars and other parts of a letter. For example, the letter ‘c’ has an opening between the upper and lower terminals (line endings) on the right. So also the letter ‘e’. Typefaces designed for body copy make sure these apertures are sufficiently pronounced because body copy is often not set in large sizes and is meant to be read pretty quickly—quicker than headings and titles anyway. If the aperture of a ‘c’ is too small, it tends to look like an ‘o’ to the reader inadvertently.

Additionally, once text is laid and good tracking and kerning are chosen (kerning needs rarely be handled), we say the type has ‘coloured’ the page. The heft of the letters, the closeness, the shapes all add to this semi-abstract idea of a typeface colouring the page. While this is subjective and I will refrain from commenting on what colour is right or wrong, take a step back, squint your eyes and see if you like the colour of your text on your page. Are you going for something pale or something substantial? Should the text show off its weight or feel like it is airbrushing the paper or screen? These decisions come down to the feeling you want your typeface of choice to evoke. On my website I have always favoured a hefty colour reminiscent of paperbacks.

Finally, there is that important thing known as contrast. Typefaces chosen for body copy must have low contrast. This will help the eye float through a sea of text. High-contrast typefaces arrest the eye. Avoid Didot-like typefaces or art deco type as well. Transitional serifs, humanist sans serifs are often the safest bet. Several grotesque typefaces (or ‘gothics’ as they are known in the Americas) are also safe bets. Geometric sans rarely pay off as do hand-drawn lettering. As always, exceptions exist so successfully setting copy in Graphik does not prove me wrong.

Hello Dolly

Having discussed some important considerations while picking a body typeface in general, here are some thoughts on why I specifically ended up going with Dolly. Think of this as less of preaching and more of me thinking out loud in case someone else finds themselves in a spot like me, trying to pick a good typeface for text-heavy works.

I absolutely love how opinionated Dolly is. One of my quirks when picking a typeface is that I never use bold-italics. To me, bold-italic does not—nay, should not—exist. You need bold or you need italic, never both. And Dolly has no bold-italic version. This is the first such typeface I am coming across and I was thrilled even if this was just a quirk and not a factor in my decision making.

Dolly has great x-height and fits well with my other typeface, Plex Sans. Furthermore, it is a book typeface, with every point of its structure designed for reading. Underware calls Dolly “a book typeface with flourishes”. It works beautifully on all types of screens and with positive and negative set-ups without drawbacks like light bleed. At larger sizes, its more intricate forms showcase themselves, such as in the essay title at the head of this page. It also shows off the shapes of individual letterforms unlike Guardian Egyptian, which opts for a more horizontally matched feel. They are both great typefaces which get plenty right, so this came down to personal choice. Dolly has enough of a character that it can help in reading but does not take centre stage.

Underware also created a small-caps version of Dolly separate from the main font, which I use for the lead-in and for abbreviations in nobody text, such as NATO. Dolly small-caps has been specially designed for the sole purpose of setting text in small caps. It even works well with small caps paragraphs although that is not a usage I make on this website. The monospace type continues to be Plex Mono.

What I like about Dolly is that you notice it at first but it then fades away. My initial reaction to the typeface was positive as well but what I admire about it is how quickly I can lose myself while reading a block of text with it as the letters really flow with ease. Underware are known for their knowledge of typefaces and their crafting something of such high quality as Dolly comes as no surprise.

With Dolly, it is the little things that matter: the ligatures that most unfamiliar with typography do not notice but feel anyway, such as with the letter-pairs fl, fj and fk (note how the ligature combines the two letters into one form) or the more exotic ones like st and ch (not used in the main copy as some readers find them distracting) &c.

There is even a book published to showcase this typeface, with some art and design heavyweights like Erik Spiekermann, Edwin Smet, Anne Knopf, Eike Menijn and Markus Brilling putting their word for it. I particularly like the calligraphic influences on Dolly, something my other favourite typefaces, like Minion and Bennet, share.

I always relish a good page of lengthy text and the question I set out asking myself when I took upon this exercise was, “In what typeface would I want to read this website if I stumbled upon it one day that would make my reading memorable by making it go unnoticed?”

Well… Hello, Dolly!