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:

Choosing monospaced fonts

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.

Commercial:

• Consolas, made by Luc(as) de Groot for Microsoft, is phenomenal. Still the font to beat, ever since 2007. On Windows I don’t think you can find a better one. But it was designed for the (then) new ClearType technology. On macOS and Linux, it does not render as well. And of course, it does not come bundled with them, so you need to buy a license.
• Lab Grotesque Mono is at last a viable alternative to Consolas, and renders better on macOS. The spacing is just right, the letters are interesting but not distracting.
• Aglet Mono is super interesting, with a touch of magic. Seems like it ought not to work, but it’s even and eye-catching.
• GT Maru Mono, another typeface with lots of visual interest that actually works.

Free:

• Input - a large family of fonts made free for personal use by the brilliant David Jonathan Ross.
• Fira Mono - a classic by Spiekermann and Carrois.

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.