macOS, blurry texts on an external Full HD monitor?
“Just buy a 4K monitor” — said a wise man
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.
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
“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.
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:
- Native apps can decide its own font smoothing method.
- Websites/Web Applications, like Google Sheets, can use
Canvaselements to draw text using its own anti-aliasing method. - Many Fonts look great or good enough with gray scale anti-aliasing (for example, Medium’s fonts itself)
(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.
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.
Recap
For me, I can get around the text rendering problems for my daily works using subpixel anti-aliasing method and the bookmark snippet to override the default font smoothing of web applications that doesn’t render text nicely.
I wrote this story to keep as a note to my findings and hope it could help someone encountering the same issues 🥂
