Thin font rendering issues on macOS Catalina

[sschultze]

Issue Type: Bug

After upgrading to macOS Catalina, the system font used in Visual Studio Code looks very narrow - and different from other apps in macOS Catalina.

It seems that instead of using SF Pro Text, Visual Studio Code uses .SF NS on macOS Catalina.

This is probably due to a bug in Chromium which I have reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=1012247

VS Code version: Code 1.38.1 (b37e54c, 2019-09-11T13:31:32.854Z)
OS version: Darwin x64 19.0.0

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz (8 x 2900)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: enabled oop_rasterization: disabled_off protected_video_decode: unavailable_off rasterization: enabled skia_deferred_display_list: disabled_off skia_renderer: disabled_off surface_synchronization: enabled_on video_decode: enabled viz_display_compositor: disabled_off webgl: enabled webgl2: enabled
Load (avg)	2, 2, 2
Memory (System)	16.00GB (2.58GB free)
Process Argv
Screen Reader	no
VM	0%

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• macOS Catalina: no more python preinstalled (#78543)

[miguelsolorio]

Relate to this, on the Welcome screen the title areas are a lot thinner in the new font:

[sschultze]

Noticed that in the code editor, the characters are also too thin, plus they are too far away from each other.

This seems to be related to the macOS Catalina font kerning bug in Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1005969

[bpasero]

@deepak1556 maybe something to backport

[sschultze]

One of my computers I downgraded to macOS Mojave because of this issue.

On the other computer, downgrading is not possible (because of my photo library etc.), but I've found a workaround at least for the code editor:

You can play around with the setting "Editor: Letter Spacing". On my computer, entering "-0.2" did a good job at working around this issue (at least for the editor, which is the most important to me).

[DOBRO]

Try this in Terminal:

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

and reopen VS Code

[sschultze]

Thank you, but doesn't change anything and doesn't seem to have anything to do with this issue. (I had CGFontRenderingFontSmoothingDisabled to NO set globally before, that's probably the reason I don't see any change).

[DOBRO]

Setting CGFontRenderingFontSmoothingDisabled to NO (or YES) globally doesn't change font rendering for VS Code on Catalina.
You should also check option workbench.fontAliasing in VS Code settings, it should be set to default.
So, this is what I've done step by step:

• in Terminal:

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

• in VS Code Settings:

"workbench.fontAliasing": "default"

Text looks better now but not as perfect as before on Mojave.

[reinvanimschoot]

Back in Mojave, this fix used to work fine but it doesn't anymore. Is there any other possible solution to this issue?

[meetbhalodi11]

Try this in Terminal:

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

and reopen VS Code

I have have issue with font smoothing (MacBook Air 2017 )command which stopped working after Catalina update, so font looks kinda blurry. please give me solution for this.

[MariuzM]

1.39

1.40

On Mojave
And fonts that I'm using: SourceCodePro-Light

Also using these to fix Mojave aa font rendering so not sure if this is related.
defaults write -g CGFontRenderingFontSmoothingDisabled -bool FALSE
defaults -currentHost write -globalDomain AppleFontSmoothing -int 1

[MariuzM]

For Insider 1 41

Looks the same as 1.40 which it still has thin fonts

[bpasero]

@MariuzM
We are building exploration builds that use a much newer version of our UI framework (Electron version 7.x). I wonder if this issue reproduces with one of these builds, could you try? Download:

• macOS: Download
• Linux (DEB): Download
• Linux (RPM): Download
• Linux (ZIP): Download
• Windows: Download

[DOBRO]

@MariuzM
We are building exploration builds that use a much newer version of our UI framework (Electron version 7.x). I wonder if this issue reproduces with one of these builds, could you try? Download:

• macOS: Download
• Linux (DEB): Download
• Linux (RPM): Download
• Linux (ZIP): Download
• Windows: Download

I've downloaded macOS version. No changes on iMac (Retina 5K, 27-inch, Late 2015), Catalina 10.15.1. Still thin fonts.

Version: 1.41.0-exploration
Commit: fbad8db043f1ef8e3b4031d46057edb5911f92ba
Date: 2019-11-08T08:14:25.355Z
Electron: 7.1.1
Chrome: 78.0.3904.99
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 19.0.0

My VS Code settings (before):

"editor.fontSize": 18,
"editor.fontFamily": "'Roboto Mono', Menlo, Monaco, monospace",
"editor.fontWeight": "300",
"workbench.fontAliasing": "default"

So I have to set:

"editor.fontWeight": "400",
"workbench.fontAliasing": "antialiased"

[cebor]

I think what we should keep in mind is that macOS has thinner fonts since Mojave, as wanted by Apple.

The following workaround (or setting to get Pre-Mojave Font Rendering) works with Pre-Electron 6 versions (<= vscode 1.39), but not with >= 1.40:

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

For all users who don't use this workaround, font rendering has improved since 1.40, for all those who use it it has stayed the same or even deteriorated.

So I think many users see the thinner fonts as a bug even though this is not one at all.

PS:
And please, for all posting screenshots, be sure you have deactivated all workarounds, to get valid results.

defaults delete -g CGFontRenderingFontSmoothingDisabled
defaults delete com.microsoft.VSCode.helper CGFontRenderingFontSmoothingDisabled

[bpasero]

I wonder if this issue is reproducible when running VSCode in a browser. We allow to run VSCode in a very simplified form in a browser following these steps:

• setup to be able to run VSCode out of sources: https://github.com/microsoft/vscode/wiki/How-to-Contribute
• run yarn web from a command line
• it should open a browser with VSCode running

If you are not able to set this up, we also provide a hosted version of VSCode for Web at: https://vscode-web-test-playground.azurewebsites.net

Does the issue reproduce in that setup in the browser?

[MariuzM]

Exploration

[MariuzM]

1.39 - With Mojave font tweak

1.39 - Default Mojave

1.40 - Default Mojave

[MariuzM]

So the way I understand this Mojave font tweak is not causing the issue.

[cebor]

@MariuzM very strange, for me its the exact opposite, besides the dimmed colorization.

Can you check the Settings -> Workbench -> Appearance -> Font Aliasing, is it set to default ?

[MariuzM]

Yep on all instances it's set to default

[cebor]

MacOS Preferences -> General -> Use font smoothing when available (x). Do you also have this enabled? For me, when i disable this option i get the same results as you.

[MariuzM]

Tried both on and off no difference this was tested with default Mojave (no font tweak)
Also to confirm I'm using SourceCodePro-Light in VSC

[sschultze]

The Chromium team has yet to fix this unfortunately. Until then, I guess there's not much that can be done on the VS Code side. I have downgraded my main computer to macOS Mojave because of this issue.

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

"We're treating this issue as high priority and progress is being made towards a fix. The issue is complex due to changes to the "San Francisco" system font and how CoreText works with respect to setting the optical size axis. As you can see from the BlockedOn: column, the Chromium side fix depends on fixes in the Skia graphics library. Please continue to star this issue and follow along, but please keep comments on topic."

[uurtsaikhb]

They have patch to fix it, can't wait to update it. Thanks guys

[texascloud]

Is this still an ongoing issue?

[DOBRO]

Is this still an ongoing issue?

As for me, it should be closed. Thanks!

[MariuzM]

For me it's still an issue but i just got used to it.

[luisbelloch]

Still and issue for me 🤔 Font looks blurry on external monitor.

I've also set this:

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

Keeping on 1.39.0 until this gets fixed 😞

[MariuzM]

This won't get fixed i believe, VSCode or Electron stoped using MacOS sub pixel AA, even on Mojave and later Apple stoped supporting this

[sodatea]

The Chromium team has (partially) fixed the narrow font issue and shipped it in the Canary channel (v81).

The current stable Electron release depends on Chromium 80 https://github.com/electron/electron/releases/tag/v8.0.0

The VSCode project depends on Electron 7.1.11 at the moment

vscode/package.json

Line 97 in f4a868f

"electron": "7.1.11",

So there seems still a long way to go.

[deepak1556]

the relevant chromium fix has been landed with our latest stable, closing