Is it a good decision to include monospace fonts in UI?

Question

I'm working on a blogging platform which have a community of writers. In the first iteration, I paired a monospace font with a serif font for the entire platform because those two fonts are most preferred by writers. They love the typewriter feeling. However, multiple sources show monospace fonts are hard to read (regardless in small or large quantity). That's why I used the serif for the body. My dilemma is that a pairing of serif and sans-serif will probably stand out much better, thoroughly legible and reader friendly (sans-serif fonts work best because they are the ultimate solution for digital reading), but should we completely disregard the affinity of writers towards the monospace fonts? What is the proper way to deal with this? My goal is to please the audience without sacrificing their experience.

The first iteration's font hierarchy:

Answer 1

Monofaked fonts

There's a solution already planned in design for this type of situation, it's to use pseudo monospace fonts or proportionally spaced typefaces with a monospaced appearance.

Type designers have created typefaces that look like monospaced typefaces, but actually use proportional spacing. The benefit: Designers get to keep the look they love, but readers don’t have to go through the pain of a true mono. Such typefaces – some call them ‘monofaked’ or ‘fauxnospaced’ – are easier on the eyes than the ‘real thing’. It is a balancing act for type designers to keep enough elements of typical typewriter fonts in order to avoid losing the appearance, while at the same time making substantial improvements to reading ease.

_{Source www.isoglosse.de}

You will find a huge list of monofaked fonts at this link.

---

Text sample with a monospace font:

---

Text sample with a monofake font:

Answer 2

Often people use monospaced fonts to create simple tables or ASCII art. If you don't allow a true monospaced font you are making a blanket decision for all of your users that those uses are unacceptable. Another answer recommended monofaked fonts which you may want to offer as well, but that's a different decision than whether your users will ever need a true monospaced font.

Answer 3

Typing and reading are two distinct things

If I were you, I would go for monospace or monofake for the one liners and maybe headings, and proportional sans-serif for whatever can grow to multiline. The reason for this is that the biggest advantage of proportional fonts is the ease with which eyes follow lines. With typewritten text for broader or perhaps even general consumption one had to use huge line spaces to make up for this.

I feel (and have no authoritative data for this) that most well received uses of typewritten text to evoke that writer feeling were one liners. Take look at the opening of "Murder, She Wrote" - it's just a few letters one has to read, the rest being just a block of text, to behold but not to read (and funnily enough, the spacing is huuge, no writer would ever do that).

I think the key is the typewriter feeling: I understand many writers prefer the typewriter feeling while actually typing, yet very few had their writing ever published in monospace (I admit I lack the requisite information about how many actually asked their publishers to have their thing set in monospace for general readership because they as authors liked the look and feel of typewritten text).

Look at the original multiline input element of the HTML od the more advanced question/answer editor here at SE. Both let the users type their thing in monospace, as it offers many advantages at the writing stage, yet the typings are presented to the readers using the type most appropriate for the occastion: proportional type for general text, monospace for preformatted text, or even no text at all at the first glance for spoilers.

Answer 4

The different font families have specific benefits:

• Serif fonts compared to sans-serif are easier to read on high-resolution media (such as printed books or 300 ppi displays), because the visual difference between the letters is higher.

• Sans-serif fonts compared to serif ones look better, however, on low-resolution media and before technologies such as ClearType existed. With low resolution, small details are easily lost, which means that simpler fonts win.

• Monospace fonts compared to non-monospace ones are great when one needs to either work with rectangular selections, or when mistakenly taking one character for another could have serious consequences. This is why monospace fonts are commonly used for development. Can you spot two errors in “const log = logger.create(global,appCorreIationId);”? Now what about monospaced font?

  const log = logger.create(global,appCorreIationId);
  

  The difference is subtle, but it is slightly easier to see that a dot was replaced by a comma, and a lowercase letter “L” became a capital “I” in “correlation.” For the same reasons, some fonts go further to differentiate characters which look very similar, such as 0 vs. O: an oval with a dot (or a slanting line) is a digit zero, while a slightly differently looking oval with nothing inside would mean a capital letter “O.”

  Last but not least, monospace fonts are used in some fields because of the predictability of how much text there is on a page.

  Monospacing makes Courier a consistent representation of the “one page equals one minute” rule. If we were to use a proportional font, the mixture of spacing would make that rule less accurate.

  ^{Source: Why We Use Courier for Traditional Screenwriting Font}

  I'm not sure about the validity of the claim. Not only I'm not convinced about the predictability for a monospace font (one page of a movie script can contain lots of dialogues, which can be read in a matter of seconds; another page could contain a long description or a long monologue, meaning much more words per page), but I would like to see some statistical data to compare monospace fonts vs. proportional ones in terms of number of words per page. My impression is that proportional fonts would be more predictable.

Additionally to that, designers may use one font or another to lead to a feeling. Show a picture of a dark screen with light blue or white monospaced text going in all directions, and a reader immediately thinks about hackers. Here's an example from a well-known video game about hackers:

Monospaced green text on dark green background makes immediately think about mainframe terminals. Here's an illustration from a popular video game where the player finds himself in a parallel world with technologies stuck in the sixties:

And naturally, monospaced font, black on beige background, makes immediately think about typewriters. Here's an illustration from another video game where the story happens during the Second World War:

In your case, you identified that the users like the typewriter feeling. However, there are no technical benefits to use monospace fonts in your case:

• The readers don't need to do rectangular selections.
• They don't need to focus on typos either.
• And they don't need, I believe, to know how long would it take to read a block of text. If they do, you can add an algorithm which would show it at the top of the page—something a lot of blogs do nowadays. Example: “Aug 6, 2020 · 11 min read.”

Since monospace font is more difficult to read (take a long piece of text, say twenty pages, and print it using a monospace font; then print the next ten pages using a serif font, and see by yourself), I agree with your choice of not using monospace font for the long chunks of text, such as the description on your screenshot.

Now, when it comes to short pieces of text—headings, authors, labels, etc.—I personally find it strange to use a monospaced font here, but this may be explained by my background: I'm a software developer, and so most of the time I see short pieces of text using monospaced fonts, it corresponds to the pieces of source code, or system names of machines, or other technical stuff. Therefore, from my perspective, seeing “Ernest Hemingway” in monospaced font is very surprising; it's less surprising for the labels, and even less for the button, where I haven't noticed the font at first (I was more annoyed by ALL CAPITALS; don't yell at your users; you're not Steve Ballmer).

Persons with different backgrounds may actually find it cool to have small pieces of monospaced font. In order to find it, don't ask them straight what they like; instead, do two separate versions: one with monospaced fonts here and there; a second one with serif fonts everywhere. Then do A/B testing to determine which version is better.