Vscode: Proper fix for font smoothing in Mojave

[vl4dimir]

• VSCode Version: 1.27.2
• OS Version: macOS 10.14 Mojave

Steps to Reproduce:

1. Have a Retina screen and macOS 10.14 Mojave installed.
2. Open any file.
3. Notice the thinner rendering of fonts.

I know there's already https://github.com/Microsoft/vscode/issues/51132 but manually changing a system-wide property affecting _all_ applications to a legacy setting (and sub-pixel smoothing _is_ a legacy setting in Mojave) shouldn't be marked as "fixing" this issue.

I think it's important to stay in line with how the target OS is functioning. Here's how Xcode renders fonts:

Here's iTerm:

Here's VS Code:

And here's an animated version, for easy comparison:

So even on Retina screens, the fonts are _very_ thin and hard to read. ☹️

I realize this is related to Electron, as it affects Atom as well – https://github.com/atom/atom/issues/17486. I don't see anyone raising this issue but I think it's very important. Setting CGFontRenderingFontSmoothingDisabled to NO is reverting _the entire OS_ back to the legacy setting. Not cool. Let's do it the right way. I'd be happy to open an upstream issue and follow through with this if you can point me in the right direction.

(ping @bpasero)

[bpasero]

@vl4dimir your best chances of success is to fix this in Electron and talk to them.

[vl4dimir]

@bpasero OK, I'll create an issue in their repo. Let's see how deep the rabbit hole goes. Thanks!

[brunnopleffken]

This is a reproducible issue that affects the entire Chromium platform (Electron, NW.js, Opera and Vivaldi browsers, etc). We must wait the Chromium team address this, and wait for the Electron team do the same. You can track their progress here: https://bugs.chromium.org/p/chromium/issues/detail?id=858861

But this issue is targeted as Chromium 70, so it's possible that even if they fix it, we won't see these fixes in VSCode as the newest version of Electron (v3.0.0 still in beta) uses Chromium 66.

[vl4dimir]

@brunnopleffken Thanks for the additional info! Apparently this goes even deeper, into the Skia library which is used by all the projects you mentioned, and even Firefox. Looks like it may take a while before it's fixed.

[brunnopleffken]

@vl4dimir Indeed. Seems like the Skia team is already working on it (but they still cannot reproduce the font rendering of Safari, which is the best on macOS Mojave until now). So it'll take a long time until it reaches Visual Studio Code.

[codebytere]

hi all! @brunnopleffken actually Electron 3.0.x has been out of beta since the 20th of September, and i've got a PR up that may fix this; it'd go out in an upcoming patch release ✨

[brunnopleffken]

Hello @codebytere. I see you ported the Skia patch to Electron, nice!!! Good work! I downloaded the latest version of Chrome Dev branch with this patch and indeed it improves the font rendering (still not the same level as Safari's but it's really better than before). AFAIK, I believe they're still working on it to make it better. Keep our eyes on it to maintain the font rendering engine up to date.

[guidsdo]

Would be amazing if this is fixed, because now a lot of apps look terrible on my mac. :)

[codebytere]

It's now fixed in master and about to be backported into the 3-0-x release line; expect it in 3.0.5 most likely 😁

[Jovani]

Hi there,

Has there been any update on this? I've tried the nightly insiders build, and the problem is still present.

Thanks!

[cebor]

Is it my imagination, or is the font better since macOS update 10.14.2?

[dogancana]

I feel like it's a bit better but not like before

[vl4dimir]

No, it’s still thin.

[brunnopleffken]

By the way, good news! Chrome Dev-branch 73.0.3642.0 released a Skia update definitely fixing the font rendering of Chromium on macOS Mojave. Comparing side-by-side with Safari, the fonts are identical and finally feels native with the rest of the OS!

However, version 73 isn't released yet, and even when it is, it'll take some time to hit Electron. 😞

[sampotts]

While still not a _proper_ fix, you can disable the new antialiasing just for a single app. For example for Insiders, run:

defaults write com.microsoft.VSCodeInsiders CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCodeInsiders.helper CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCodeInsiders.helper.EH CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCodeInsiders.helper.NP CGFontRenderingFontSmoothingDisabled 0

Just change the signature for the regular build.

Credit: https://www.reddit.com/r/apple/comments/9leavs/fix_mojave_font_rendering_issues_on_a_perapp_basis/

[carlosflorencio]

@sampotts fix worked for me:

defaults write com.microsoft.VSCode CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCode.helper CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCode.helper.EH CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCode.helper.NP CGFontRenderingFontSmoothingDisabled 0

[kstratis]

@brunnopleffken The Skia patch you are talking about was actually merged in M72.

Have a look at this one: https://bugs.chromium.org/p/chromium/issues/detail?id=901611

I think it fixes the issue once and for all.

[uloco]

@kstratis It's fixed since 16. December. Does anybody know, when it will land in Electron / VSCode?

[brunnopleffken]

@kstratis It's fixed since 16. December. Does anybody know, when it will land in Electron / VSCode?

It will take some time. The current latest stable version of Electron is 4.x, which is based on Chromium 69. The nightly Electron version is 5.0, currently based on Chromium 70 and it doesn't have a release date yet. They have plans to update to Chromium 72 (https://github.com/electron/electron/projects/16), which may contain this fix, but it also doesn't have a release date yet.

And even when Electron 5.0 is released with Chromium 72, it'll take some time until Electron apps such as Visual Studio Code update and test their dependencies.

[sampotts]

@msdlisper Did you read the initial comment?

I know there's already #51132 but manually changing a system-wide property affecting all applications to a legacy setting (and sub-pixel smoothing is a legacy setting in Mojave) shouldn't be marked as "fixing" this issue.

[msdlisper]

@msdlisper Did you read the initial comment?

I know there's already #51132 but manually changing a system-wide property affecting all applications to a legacy setting (and sub-pixel smoothing is a legacy setting in Mojave) shouldn't be marked as "fixing" this issue.

sorry.... I take that back

[dalDevelo]

@bpasero @codebytere
Will a permanent fix for this font issue ever see the light of day? The electron team supposedly fixed this issue in a couple (maybe more) of their v4.0 releases, but any supposed fixes have not appeared in the exploration build of VS Code yet.

As already mentioned earlier in this thread, having a workaround in place isn't a fix for the issue. The linked issue is locked for further commenting, so hence why I've raised it here.

I've mentioned in the electron thread about this appearing to not be fixed yet, but have received no response from electron. I guess that's not really the place where this should be raised though as the issue exists in VS Code, as per the screenshots I provided in their issue thread.

This issue here is still tagged as upstream. Can either of you (or anyone else) shed any light on the current state of play with this issue? Thanks.

[cebor]

@dalDevelo

AFAIK the fix for the font issue was also backported to v3.1.9.

Backport: https://github.com/electron/libchromiumcontent/pull/759

[deepak1556]

Hi all, can you test if the latest insiders fixes the problem ? I have verified that the electron patch fixes the issue for retina displays. Although there is another regression for non-retina displays from that patch which is fixed in https://bugs.chromium.org/p/chromium/issues/detail?id=933137. I will backport that in electron soon. Thanks!

[dalDevelo]

@deepak1556 No change here. No visible difference between the insiders and release versions of VScode, post update.

[deepak1556]

@dalDevelo thanks for testing, just for sanity check whats the value of setting CGFontRenderingFontSmoothingDisabled on your system. Can you also attach a screenshot of loading https://gist.github.com/deepak1556/8bf0442f1368db395d1a016b3dcfac7c in an electron fiddle with version 4.2.4 and http://roettsch.es/raster72a.html in your chrome, safari browsers. Thanks!

[dalDevelo]

@deepak1556

I've deleted the CGFontRenderingFontSmoothingDisabled preference from my system some time ago, so...does not exist.

[dalDevelo]

...to follow up your question regarding CGFontRenderingFontSmoothingDisabled

with defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

with defaults write -g CGFontRenderingFontSmoothingDisabled -bool YES (or deleted)

[deepak1556]

@dalDevelo thanks, that helps! can you also attach a screenshot of that page in electron fiddle that has 6.0.0-beta.7.

[dalDevelo]

Of course I can 😊

[svipas]

I also tried to see the difference in Electron 4.1.5 which contains Back-ported additional fix for font rendering in MacOS Mojave. https://github.com/electron/electron/pull/17737 but still, there is no difference at all between 3.1.8 version and 4.1.5.

EDIT: Also there's no difference between 3.1.8 and 4.2.5 version too.

I like how Sublime Text handles it, the whole UI looks light and with like antialiased enabled, but the code inside the editor is bolder.

[cebor]

Builds in following PR, fix this issue: https://github.com/microsoft/vscode/pull/75802

[earslap]

On my machine, the August 2019 edition of vscode seems to include the fix for this. After the update, the fonts now look right (just like pre-mojave days). I did not enable the CGFontRenderingFontSmoothingDisabled setting prior to this.

Edit: Sorry, it looks like I was accidentally working in Insider release.

[capyvara]

To me the August 2019 hasn't fixed the problem

[cebor]

@capyvara its in the insider releases. Should be out in september release.

[augustoproiete]

@cebor I think you meant to tag @capyvara

[chris-equis]

Moved from High Sierra to Mojave recently, and this issue is really annoying. I tried all the solutions but there's no significant change.

High Sierra

Mojave

[cebor]

@chris-equis have you tried the latest Insider Release?

https://code.visualstudio.com/insiders/

[chris-equis]

@chris-equis have you tried the latest Insider Release?

https://code.visualstudio.com/insiders/

This worked!

but with defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

Anyway, happy that it worked. Thanks a lot @cebor!

[deepak1556]

This should be fixed in latest insiders, can anyone confirm. Thanks!

[uloco]

It is fixed. Thank you very much :)))

[dalDevelo]

Absolutely not fixed. Improved, yes (in the current insiders release) but still not like pre-Mojave font rendering.

The pre-Mojave benchmark font rendering:
(Also how it looks with defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO set, post-Mojave)

1.39.1 Release: (no 'defaults write' setting applied)

1.40 Insiders: (no 'defaults write' setting applied)

Better, but still not 'good!'

[deepak1556]

@dalDevelo thanks for confirming! I need to distill a repo for chromium as the root cause stems from skia graphics library. Will ask for further information soon.

[cebor]

I think its fixed. Apple disabled font smoothing since Mojave, so fonts look different and its intended.

Chrome also had this problem before, font was slightly too thin but it is fixed now. But it will never be as it was in Pre-Mojave, cause as i said its intended by Apple.

For all want the font smoothing back as it was in El Capitan have to enable it via:

defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

Insiders:

Stable:

[uloco]

@dalDevelo I think it is a matter of perception. I think it is much better and acceptable than before. Other applications font rendering does not look better than this.

[deepak1556]

Verified that VSCode font rendering is consistent across safari, chrome canary and latest insiders. Closing this as fixed. Thanks!

[nklmilojevic]

How is this fixed?

Latest VSCode WITH CGFontRenderingFontSmoothingDisabled 0:

Latest Insiders build:

[miniak]

Part of the problem is that https://skia-review.googlesource.com/c/skia/+/157566 wasn't back-ported properly to Electron 4. This is missing:

diff --git a/third_party/skia/src/ports/SkFontHost_mac.cpp b/third_party/skia/src/ports/SkFontHost_mac.cpp
index 8be3f306c1b8b1bf6609d14798860ca763f824b1..48dbf2f51d03d03863f948cdfc1aaa2dee008b29 100644
--- a/third_party/skia/src/ports/SkFontHost_mac.cpp
+++ b/third_party/skia/src/ports/SkFontHost_mac.cpp
@@ -440,6 +440,9 @@ static SmoothBehavior smooth_behavior() {
                 if (r != g || r != b) {
                     return SmoothBehavior::subpixel;
                 }
+                if (noSmoothBitmap[x][y] != smoothPixel) {
+                    smoothBehavior = SmoothBehavior::some;
+                }
             }
         }
         return smoothBehavior;

[deepak1556]

@miniak the insiders build thats tested here is based on Electron 6 that has the above fix.

[valentinocossar]

How can I discover which version of Electron is used by the stable version of VS Code? Thanks!

[cebor]

@valentinocossar Menu -> Code -> About Visual Studio Code on macOS

[Alek-S]

Wondering if this is electron related. This was an issue previously that was resolved with VS Code upgrading the underlying version of Electron to v4 in 1.36 issue #68001

[afarkas128]

After the latest October update, my fonts are blurry and thinner on my external monitor 😞

[nklmilojevic]

For me, too. Seems like a real regression. Commented 26 days ago that this is worse than it was before, but no answer. https://github.com/microsoft/vscode/issues/59887#issuecomment-541421372

[willviles]

Upgrading to 1.40.0 has caused fonts to look aliased on my external monitor too, despite having followed the defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO fix.

[patrys]

You no longer need the workaround ("fix"), if you delete it fonts will match those of Chrome.

[nklmilojevic]

We aren't talking about fonts matching to those in Chrome, we are talking that font rendering is awful comparing to the ones with the fix.

See my screenshots https://github.com/microsoft/vscode/issues/59887#issuecomment-541421372

[sampotts]

Have you tried changing the preference for Font Aliasing?

[lincolnaleixo]

Something has changed to worse in October update. Changing Font Aliasing to "antialiased" seems to make it better

[M-Porter]

The font will look blurry on external monitors if you used the defaults workaround. So just remove the values (or at least for me it worked...)

defaults delete com.microsoft.VSCode CGFontRenderingFontSmoothingDisabled
defaults delete com.microsoft.VSCode.helper CGFontRenderingFontSmoothingDisabled
defaults delete com.microsoft.VSCode.helper.EH CGFontRenderingFontSmoothingDisabled
defaults delete com.microsoft.VSCode.helper.NP CGFontRenderingFontSmoothingDisabled

[brunnopleffken]

The system font rendering looks awful on macOS Catalina if the Mojave hack is enabled. Safari font looks thin and Chromium fonts looks aliased. So, if you're using Catalina, disable the old CGFontRenderingFontSmoothingDisabled hack with the following:

defaults -currentHost delete -globalDomain AppleFontSmoothing
defaults write -g CGFontRenderingFontSmoothingDisabled -bool YES

Everything seems MUCH better, fonts are crisp and beautiful both on Chromium and Safari.

[danarnold]

What constitutes "awful" for you guys, I wonder? I'm on the latest Catalina and VS Code 1.40.1, and things look fine to me with the above defaults set to 0.

[brunnopleffken]

What constitutes "awful" for you guys, I wonder? I'm on the latest Catalina and VS Code 1.40.1, and things look fine to me with the above defaults set to 0.

With the "Mojave Fix" (CGFontRenderingFontSmoothingDisabled) enabled, it actually causes the opposite effect on Catalina. Chromium fonts looks aliased, the Safari fonts looks too thin. The font rendering looks worse because they improved the way the font renders on Catalina and this hack conflicts with it.

If your Mojave hack is turned off, everything looks beautiful and smooth like on High Sierra.

[danarnold]

@brunnopleffken Perhaps you could send some screenshots of what you're talking about?

Also, my defaults settings do not affect Chromium or Safari, as I'm using the version of the command that only affects VS Code, not the entire system.

[nklmilojevic]

@brunnopleffken that is not true.

You can clearly see the difference with 1.39.2 with CGFontRenderingFontSmoothingDisabled to 0 and 1.40.1. In 1.40 it doesn't matter if I set CGFontRenderingFontSmoothingDisabled to 0 or to 1, it stays the same.

Of course, the thinner font in the screenshot is on 1.40.x.

This only happens on external screen, on Retina it looks fine.

[cebor]

@nklmilojevic
CGFontRenderingFontSmoothingDisabled 0 is not the default setting in macOS. Yeah fonts are little bit thinner as before but its intended. Font Smoothing has been removed since mojave. Since 1.40 the fix has no effect. But when you compare 1.39 with CGFontRenderingFontSmoothingDisabled 1 or deleted and 1.40, you will notice a difference.
In macOS Catalina with Electron 6, you will not get the bold looking fonts back, and its not a bug.

[nklmilojevic]

Why does it matter if it's a default setting in macOS or not? It restores proper rendering as it was in High Sierra and before. Also, Electron v4 doesn't have a problem with it, as reported, so I would say it is a bug.

For example, here's 1.40.x font rendering:

And here's IntelliJ:

XCode also has good font rendering, but electron (v6/v7) apps are falling short.

[cebor]

Yes ok, but neither the vscode team nor the electron team can do anything here. Electron is based on Chromium, where the fix also doesn't work anymore, since the rendering engine was adapted to the new macOS.

Feel free to open an issue in the chromium issue forum: https://bugs.chromium.org/p/chromium

[nklmilojevic]

I agree that it is up to Chromium, but if the rendering fails only on Chromium/Electron apps and works normally in XCode/IntelliJ/iTerm2 than it is not adapting, but rather a bug. :)

I would suggest to the VSCode team to downgrade to Electron v4 until this is fixed as a lot of us are having this problem on macOS. But of course, that is not up to me.

[cebor]

I do not agree with that, Electron 4 looks much worse than Electron 6 for all macOS users with default settings.

[brunnopleffken]

I totally disagree with downgrading to Electron 4 just because the font doesn't look good. An Electron upgrade isn't just about font rendering. Anyway, I took some screenshots comparing the Catalina with the Mojave hack (CGFontRenderingFontSmoothingDisabled), and without it:

Safari (above, with hack; below, hacks disabled and everything set to default)
Look how the Mojave hack goes to the opposite side: address bar and tab bar looks awfully aliased, and website fonts looks thin.

Spotlight (above, with the hack; below, everything set to Catalina's default)
Once again, the hack makes everything much worse.

Finder (above, hack turned on; below, default settings on Catalina)
Look how fonts are aliased with the hack turned on with Catalina. When I set to Catalina's default, everything looks beautiful and smooth.

As I said, on Catalina, disable all the hacks. They fixed all the font rendering issues and looks like the High Sierra times, the system UI looks beautiful again. If VSCode doesn't look good, they must upgrade to the newest Electron version (as the new Chrome v78, 79 and 80 look perfect).

[nklmilojevic]

Uh, I hate repeating myself. I have disabled all hacks on the system, I just enable the hacks in the apps that look awful. Btw. Chrome isn't rendering the font correctly on Catalina:

https://bugs.chromium.org/p/chromium/issues/detail?id=1005969

For example, this is your post on

Firefox:

Chrome:

Safari:

The font is noticeably worse on Chrome than on FF and Safari on Github alone, but also on other sites.

As this is not a problem on VSCode's side so I will stop bothering the team until Chromium fixes it.

[brunnopleffken]

@nklmilojevic Oh, you're talking about the font kerning, not exactly the font anti-aliasing. Because on Catalina the anti-aliasing of Chrome is working perfectly with the hacks disabled, but the San Francisco font kerning indeed seems smaller, more squeezed and slightly thin. It happens only with Chrome, and only on Catalina. 🙄

Firefox and Safari renders the San Francisco font perfectly like native apps.