macOS, blurry texts on an external Full HD monitor?

“Just buy a 4K monitor” — said a wise man

expensive monitor
But not everyone can afford a high resolution monitor — Photo by Joshua Aragon on Unsplash

Recently, I have to work remotely (and I love it). So, I need to setup my own workspace, and as a web developer, an external monitor to connect to my laptop (MacBook Pro 15-inch 2018) is almost a must-have accessory.

At my home, I have an old, Full HD, 23-inch (1920x1080), Dell monitor (S2319H). When I connecting the HDMI cable into the laptop’s dongle, it immediately results in blurry texts.

An example of how blurry text looks like — https://github.com/Microsoft/vscode/issues/51132

Having gotten too used to the Retina display of the MacBook Pro and the 4K monitor at my work office, as a quick solution to the problem, I had to buy another 4k screen so that I can continue doing my work efficiently.

My lovely wife wanted to sell the old monitor 😙 but I have decided to make good use of it by moving it back to my parents’ house 😌.
After all, it is still a good external screen for my Nintendo Switch.

This week, I need to go back to my parents to do some paperworks. So I have to deal with the old monitor again. But this time, I have the chance to take a better look at the problem.

macOS Mojave nuked subpixel anti-aliasing

The cause can be traced back to the release of macOS Mojave.
It turns out Apple decided that sub-pixel rendering is not the preferred method to render texts anymore, this immediately affects a lot of non-retina and low resolution monitors.

A quick search on the Internet will lead us to the 2 methods below

Method 1, just enable font smoothing

The easy way, by default method, provided by macOS Mojave, aka grayscale anti-aliasing, simply enable the option in the General settings

⌘ + Space, General

when available?
Yes, it doesn’t satisfy all the cases. Texts may look better, or not.
It is subjective to your perception, the particular application or the website that you are visiting. More on the website part later.

Method 2, use subpixel anti-aliasing

Yes, it is still possible to use the traditional method.
It is a bit inconvenience though, as you have to logout/restart/quit existing applications, every time you want to experiment with a different setting.

Enable subpixel anti-aliasing

  • Open Terminal app.
  • Enter these commands.
defaults write -g CGFontRenderingFontSmoothingDisabled -bool NOdefaults -currentHost write -globalDomain AppleFontSmoothing -int 2

You can select different values for AppleFontSmoothing, ranging from 0 to 3.
For me, 2 was the best one.

  • Important: Close all currently running apps, then logout and login again, or restart the laptop.
  • Now reopen the apps and check around, the texts should look different than before.

Revert to the original settings

The final result might not look good to everyone.
So, if you wish to revert back to the default text rendering of macOS, follow these steps:

  • Open Terminal app
  • Enter these commands
defaults -currentHost delete -globalDomain AppleFontSmoothingdefaults write -g CGFontRenderingFontSmoothingDisabled -bool YES
  • Close all currently running apps, then logout and login again, or restart the laptop.

Visual Output Comparison

Just in case you are curious on how different text would look like for different anti-aliasing methods. Here are screenshots of texts at 100% and zoomed in.

Text rendering using GrayScale AA vs. Subpixel AA, on Chrome browser
Zoomed into the letter ‘y’

Some apps and websites still look bad!

Yes, it’s true. These methods do not fix all the cases. You will have to live with that, or buy a better screen.

The results vary between apps and website because:

(Ab)Using CSS Font-smoothing to enforce text rendering consistency

Some web applications uses -webkit-font-smoothing: antialiased; and `-moz-osx-font-smoothing: grayscale; to override the default anti-aliasing strategy (for example: Medium, Gmail)

If you are using Chrome and want to quickly switch to different anti-aliasing modes of these websites, I have written a small snippet so that you can create a bookmarklet button to try out.

Make a “javascript: bookmark” to use it

Subpixel anti-aliasing result depends on the color behind the text to perform.

This is an important note. Because of this, if a web application uses the CSSposition property, together with the z-index property to change the layering order of the element to appear, the subpixel-antialiasing might not work properly.

At the time of writing, Medium’s Story Editor had a fixed, fullscreen, invisible Canvas (visibility:hidden; pointer-events: none;) sit behind the other text elements.
So, even if you override the font smoothing strategy with subpixel anti-aliasing method, you won’t see the color fringes around the edges of the texts, even though they are black texts rendered on a white background.

Just a Psyduck meme