macOS Mojave: font rendering is blurry or has changed

[0xdeafcafe]

Solution:
If you have updated to macOS 10.14 (Mojave) you might have noticed that fonts in VSCode are looking blurry if you are not using a high-DPI monitor. A workaround for this is to run

defaults write com.microsoft.VSCode.helper CGFontRenderingFontSmoothingDisabled -bool NO

from the terminal followed by a restart to get back the previous behaviour. Note that this change is global for every application and not specific to VSCode.

---

• VSCode Version: Version 1.23.1 (1.23.1) - d0182c3417d225529c6d5ad24b7572815d0de9ac
• OS Version: macOS Version 10.14 Beta

Steps to Reproduce:

1. Open VSCode
2. Open a file
3. View said file

Does this issue occur when all extensions are disabled?: Yes

This is how the fonts look:

I don't expect this is a VSCode issue, but just incase wanted to bring it up earlier rather than later.

[birkir]

Can confirm, but only on non-retina displays.

Tried change LCD Font Smoothing in Mac OS Settings, no luck.
Tried workbench.fontAliasing without any luck.

Non retina

Retina

[BanjoCam]

I'm on a retina display. Fonts are still completely usable but appear far thinner(?) than they did prior to the update. Anecdotal of course, but the change was obvious as soon as I fired up post upgrade.

[celento]

Yep, the fonts are thinner on all Webkit based apps even on Chrome. I think macOS Mujave is setting the font-aliasing in by default to “antialiasing” instead of “subpixel-antialiasing”.

[BanjoCam]

@celento That is sad and I hope not a permanent change... one of my favourite things about MacOS is the font rendering!

[bpasero]

Does it make a difference if you configure our workbench.fontAliasing setting to none or antialiased? Also, can people reproduce this with our builds that leverage Electron 2.0.x: https://az764295.vo.msecnd.net/exploration/4ba0c0e008bf983ab61a3bd577df370582fec9fb/VSCode-darwin-exploration.zip

[0xdeafcafe]

Looks exactly the same with workbench.fontAliasing set to antialiased, and looks horrific when set to none:

I tried the Electron 2.0 build, the font looked pretty much the same as it does currently:

[natebwangsut]

I recognise that on macOS Mojave, there is no different between "workbench.fontAliasing": "default" or "workbench.fontAliasing": "antialiased". Perhaps there is a behavioural change on the text rendering on the new OS?

[digicase]

This is a good relevant thread about the text rendering changes in macOS Mojave

https://twitter.com/siracusa/status/1004143205078597633

[Rykuno]

Seems not to just be VSCode either for me. Opened up a few applications after trying out Mojave and most non-Apple applications look like the font has been modified/blurry on my external monitors.

For comparison of before and after Mojave install.

edit: Added comparison images.

It appears to be a problem with Apple removing sub pixel antialiasing in Mojave as everything looks fine on the retina display.

[vinkla]

This is also reported in Atom: atom/atom#17486 and could be related issue.

[Toxblh]

Link on the issue in atom atom/atom#17486

[gravicle]

Is there a workaround for the issue? Can reproduce on Mojave running VSCode 1.24.1

[alex-kinokon]

Relevant issue on Chrome bug reporter: https://bugs.chromium.org/p/chromium/issues/detail?id=858861

[bpasero]

And: https://news.ycombinator.com/item?id=17476873

[jmikrut]

I just .... got around this problem by setting editor.fontWeight to bold. It looks basically like it used to before Mojave. Maybe a bit bolder but I can live with it compared to what it was set to normal.

[birkir]

That totally depends on which font family you use, and it will also look different on an Retina/Non-retina display.

Only solution is to have Chromium have its own font raster engine I guess

[vinkla]

It seems Apple released further updates to UI font smoothing in Mojave Beta 4. The fonts now look bolder and are easier to read.

[MikeMcQuaid]

got around this problem by setting editor.fontWeight to bold

I tried this and didn't like how it looked. "editor.fontWeight": "500" looks like the good old days, though.

[pdgago]

Agree, Code looks horrible on non-retina displays and I don't think vscode can do anything about this.

Really bad move from apple, It's way too soon to remove subpixel rendering, most people doesn't have external retina displays.

After trying every font possible, I agree that setting the font-weight to 500 doesn't look that bad, but most fonts doesn't support this weight... 😣

[ghost]

@samelhusseini What is the resolution of your display?

[mario-grgic]

got around this problem by setting editor.fontWeight to bold

I tried this and didn't like how it looked. "editor.fontWeight": "500" looks like the good old days, though.

This has no effect for me (macOS Mojave release version on 2017 27'' iMac).

[angristan]

So... Mojave is out. The font rendering looks awful on both 1x displays and Retina displays. I'm really disappointed. I don't think the VS Code team can do anything about it though 😔

[alexanderyakusik]

So... Mojave is out. The font rendering looks awful on both 1x displays and Retina displays. I'm really disappointed. I don't think the VS Code team can do anything about it though 😔

I just found the possible solution. Try executing this command in the terminal: defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

[noobtiger]

So... Mojave is out. The font rendering looks awful on both 1x displays and Retina displays. I'm really disappointed. I don't think the VS Code team can do anything about it though 😔

I just found the possible solution. Try executing this command in the terminal: defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

This worked for me, thank you @alexanderyakusik .

[slapxxi]

Saved me from downgrading to High Sierra, @alexanderyakusik. You're a saint.

[colevanh]

So... Mojave is out. The font rendering looks awful on both 1x displays and Retina displays. I'm really disappointed. I don't think the VS Code team can do anything about it though 😔

I just found the possible solution. Try executing this command in the terminal: defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

Thank you! This worked.

[alexknipfer]

defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

Thanks! Worked perfectly!

[steelbrain]

A request to please not spam the thread with confirmation comments, please do a thumbs up reaction on the comment instead. Thank you

[angristan]

@alexanderyakusik Thank you so, so much much!

For anyone viewing this: make sure you have font smoothing enabled, too.

This feels exactly like High Sierra!

[matwming]

I just .... got around this problem by setting editor.fontWeight to bold. It looks basically like it used to before Mojave. Maybe a bit bolder but I can live with it compared to what it was set to normal.

thanks this works very well

[Greenmzc]

So... Mojave is out. The font rendering looks awful on both 1x displays and Retina displays. I'm really disappointed. I don't think the VS Code team can do anything about it though 😔

I just found the possible solution. Try executing this command in the terminal: defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

Thanks! It's worked.

[bpasero]

I can confirm that defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO helps. The checkbox in the "General" settings did not fix it.

[frzi]

So... Mojave is out. The font rendering looks awful on both 1x displays and Retina displays. I'm really disappointed. I don't think the VS Code team can do anything about it though 😔

I just found the possible solution. Try executing this command in the terminal: defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

Can confirm this works for me as well! All my Electron apps are beautiful again.

[lachlanshoesmith]

Would definitely recommend trying the defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO solution first (before updating font weights). Much more natural solution. Don't forget to log out then log back in to see changes.

[bpasero]

Since we seem to have found a solution, I think we can lock this issue (if someone disagrees, just open a new issue and ping me).

Solution:
If you have updated to macOS 10.14 (Mojave) you might have noticed that fonts in VSCode are looking blurry if you are not using a high-DPI monitor. A workaround for this is to run

defaults write com.microsoft.VSCode.helper CGFontRenderingFontSmoothingDisabled -bool NO

from the terminal followed by a restart to get back the previous behaviour. Note that this change is global for every application and not specific to VSCode.

[deepak1556]

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

[deepak1556]

The fixes from chromium team made for both retina and non-retina displays https://bugs.chromium.org/p/chromium/issues/detail?id=901611 , https://bugs.chromium.org/p/chromium/issues/detail?id=858861 are available in the latest insiders. If the bug is still visible, I would suggest to compare the font rendering with chrome and report in upstream if the bug is repro'd in chrome. I am keeping this issue open to avoid possible duplicate issues in the repo and also to track any further chromium side improvements.

[deepak1556]

No further action can be taken on this one from VSCode end, closing as such.