Lost Among Notes

<< Newer Polynomials are strange
Older >> Math year one. Classes

A few bits about text on screens

The madness of font rendering in macOS

macOS font rendering is getting worse and worse for non-Retina screens.

The iPad renders crisp text, so can’t comment on iOS/iPadOS, but on my respectable 2560x1440 monitor, using macOS Big Sur, text seemed somewhat fuzzy. To the point where I was thinking I’d have to buy a 4K monitor. On Windows and Linux, the same monitor rendered text like a champ, so the problem was not the screen.

Apple have been gradually dropping the smoothing configuration options they used to offer, and now they offer none. It seems they expect everyone to have 4K screens. See the ArsTechnica article.

You can find some command-line hacks to tweak the font smoothing to work better for low-mid resolutions, but hacks like that are bound to be dropped silently, sooner rather than later.

There is good material in the web about the various forms of text anti-aliasing, and their use in different operating systems. I recommend The Ails of Typographic Anti-Aliasing.

The article mentions that the Firefox browser handles rendering itself, rather than use the OS’s directly, in an effort to render text sharper. And to my eyes, the Visual Studio Code editor renders a bit better than XCode or BBEdit.

Aside from hunting for programs that subvert macOS, you may want to try out different fonts at different weights. Some font combinations render very well. Which brings me to:

Monospaced fonts I recommend

Font choice is personal, but you should watch for a couple of font characteristics that affect how well it renders on screen.

Color/Thickness. Some fonts are thicker/darker, some thinner/lighter. For example, Consolas is on the thick side, IBM Plex Mono is light. Aside from your personal taste, thinner fonts may render better in software like Safari or, generally, macOS, whereas Windows tends to thin fonts, so light fonts may appear washed out. Not all programs in the same computer render text the same.

Letter-spacing and rhythm. The fixed width corset forces the strokes to be thin and spidery in many designs. There’s an inherent waste of space when the letters i and m are allocated the same width, and some font designs combat this by stretching the letterforms to the max, leaving little space between letters, while others embrace the irregular spacing.
Aside from taste, font rendering may alter the spacing of letterforms. On some programs or systems, a particular font may become crowded or spacey.
In my experience, relaxed letter-spacing makes for more comfortable reading.

Given the variety of screens, resolutions, operating systems, and rendering tweaks, it’s good that we have several good fonts to choose from.

My personal favorites offer various weights, and relaxed letter-spacing. And they render well on mac, even with a non-retina display.

Commercial

  • Atlas Typewriter - based on the grotesque model, like Helvetica. Just right, clean, understated.
  • TheSansMono - lots of weights. Relaxed letter-spacing. From the same designer as Consolas, which it resembles, but with wider spacing and more weights available. Consolas, which is an excellent monospaced font, perhaps the best, renders a bit fuzzy on the mac. Shame on macOS.
  • Gintronic - wide letter-spacing. A total rethink of what a coding font should be. Every character is distinct and calls for attention.

Free

  • Roboto Mono - lots of weights, relaxed letter-spacing. Clean.
    Roboto is, like Atlas Typewriter and Apple’s San Francisco, a grotesque. Of the three, SF Mono is my least favorite, but it renders extremely well on macOS.
  • Fira Mono - light. Relaxed letter-spacing. No italics.
  • Input - lots of weights. Relaxed letter-spacing. A large family of fonts designed specifically for coding.

Configuration is for suckers

I used to keep my configuration files for Emacs, and for various Linux window managers, and carried them with me, like a turtle. That was foolish. I have mended my ways.

Today, on the various text editors I use, I just configure font and size, and a few other prominent adjustments. On Linux I use desktop environments, and barely configure them.

Linux is still a bit behind on support for HiDPI and switching between resolutions. Some programs respect GNOME’s settings, some don’t. Still, how far we’ve come.

I have come to think that a tell-tale sign of poor design is the over-abundance of configuration options.

The 16px standard for web, and, Bless the iPad

As a gentleman website-owner, I’m aware of the difficulty designing web pages. You cannot know where your pages are going to be read. Font size, in particular, is maddening: you might think that setting your font size in terms of percentages or ems will ensure good rendering in most conditions, but I don’t recommend it.

For some strange reason, 16px has become the baseline of font sizes on the web. Phones, tablets, laptops: they all try to ensure 16px size is readable on their screens. Desktop computers, what with the variety of screen sizes, resolutions, scaling settings, are chaos.

But today, most good web designers will try to make sure their site renders well on iPads.

iPads have an interesting feature. Since we hold them at book distance, we get a better idea of the size of text on them.

And, here’s the thing, 16px is small. Like 9pt, text in 16px is readable, but not as comfortably readable as text set in 10pt or 11pt.

For comfortable reading on web, choose 18-22px.

The iPad may help you realize that you are, likely, reading text on your computer screens at very small sizes.

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.