11

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:

enter image description here

9
  • 9
    "Multiple sources show monospaced fonts are hard to read’ Citations please? Courier New, OCR A, and other ‘classic’ monospaced fonts are definitely hard for most people to read, but well designed modern monospaced fonts like Inconsolata, Droid Sans Mono, or Terminus are, under the right conditions, no more difficult to read for most people than proportional fonts, and are in fact actually easier to read for some people than proportional fonts. Mar 16 at 11:53
  • 4
    On a side note, the bigger issue with your sample is the contrast, not the font. Low contrast is hard on most people independent of the choice of font, but it accentuates any issues with the font itself. Mar 16 at 11:54
  • 1
    "multiple sources shows monospace fonts are hard to read". "sans-serif fonts work best because they are the ultimate solution for digital reading". "I used the serif for the body". So because mono is hard to read you picked serif? Why haven't you used a non-mono sans-serif font for the body?
    – user137266
    Mar 16 at 13:45
  • 3
    "Multiple sources show monospaced fonts are hard to read"...As someone who spends probably upwards of six hours per day staring at monospaced text I'd have to disagreee with you on that :p Mar 16 at 22:01
  • 2
    "sans-serif (...) are the ultimate solution for digital reading" what now?
    – njzk2
    Mar 17 at 21:50
28

Monofaked fonts

There is 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: enter image description here


Text sample with a monofake font: enter image description here

7
  • 19
    The kerning on that second one is so bad I couldn't force myself to read the paragraph. Mar 16 at 14:35
  • 21
    For what it's worth: As a software developer, I regularly read monospaced code and proportionally spaced documentation. The bottom example immediately felt utterly wrong, though I had to read the description to see what's off. If you target audience happens to be tech-savvy, exercise caution. Mar 16 at 16:04
  • 13
    Input mono is clean - everything lines up, every letter is in a clean column. The monofake looks ghastly - it's like a nice car covered in mud, or a chessboard where all the pieces are mixed up and don't make sense. It's jarring. Like biting into a dessert that looks sweet but actually tastes of salted anchovies. Feels like a bait and switch. Agreed with @ZsoltSzilagy
    – J...
    Mar 16 at 17:59
  • 4
    If you're gonna monospace you need a better font renderer than that.
    – Joshua
    Mar 16 at 19:15
  • 3
    @user253751 Hence "If your target audience happens to be tech-savvy" Mar 17 at 14:36
12

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.

5
  • 6
    And jut to make it clear, "simple tables or ASCII art" requires true monospaced fonts.
    – Medinoc
    Mar 16 at 16:05
  • Those are formatting concerns, and you shouldn't encourage users to abuse the text renderer to work around them. Complex ASCII art and many non-markup tables (in particular ones where a table row spans multiple text lines, such as all those "how it how it's started going" posts on Twitter) are not exactly screenreader-friendly, and may not display properly on differently-sized devices. I'm not saying not to provide monospaced fonts, but they aren't, and shouldn't be treated as, a substitute for flexible markup
    – Sara J
    Mar 17 at 19:26
  • 1
    @Medinoc People can and do make art in proportional fonts. It's harder to make, and easy to mess up later if you change it, but it still isn't exactly uncommon
    – Sara J
    Mar 17 at 19:42
  • @Medinoc there's no such thing as true monospace. There's monospace and there's not monospace.
    – njzk2
    Mar 17 at 21:49
  • 4
    @njzk2: I think they were referring to monospaced fonts as opposed to "monofaked" fonts (as demonstrated in Danielillo's answer).
    – Vikki
    Mar 17 at 22:53
5

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.

1

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:

enter image description here

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:

enter image description here

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:

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.