1.40 update: Font rendering is blurry (Linux, Windows)

[varunj166]

• VSCode Version: 1.40
• OS Version: Windows 7 64-bit

Steps to Reproduce:

1. Open VS Code.
2. Look at editor window.

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

I updated my video card drivers, and tried a complete uninstall re-install. Neither fixed the issue.

I was able to restore the normal font sharpness by downgrading back to 1.39.2. This tells me that something definitely changed with the font rendering in 1.40.

(The difference was subtle, but enough to be annoying, considering we look at these windows for hours on end. Gotta be sharp!)

UPDATE: Screenshots -- Hopefully you can see the difference.

1.39.2

1.40.0

[rigobauer]

Same problem here with Macbook (MacOS Mojave 10.14.6)

[varunj166]

@rigobauer Check the photos I just attached to make sure my issue is similar enough to your issue. I know MacOS have been having an issue with antialiasing that can be fixed by changing a setting that Windows users don't have access to.

[Eldaw]

They've changed from RGB subpixel antialiasing to grayscale subpixel antialiasing for the Editor. Which unfortunately looks blurry especially on non-high-dpi LCD panels.

It also makes the colors of colored text look very washed out.

[varunj166]

@Eldaw Would that cause the difference I see? (See the photos I attached for reference.) Is there a fix that you know of?

(My monitor is 22inch 1680 x 1050 - 90.05 ppi.)

[Eldaw]

@varunj166 Yes, that causes the difference. Use a screen magnifier to have a look closely at the text in both screenshots. In v1.39.2 you can see colored subpixels forming the antialising along the edges of the text. On the v1.40 screenshot you will see grayscale subpixels forming the antialiasing along the edges of the text.

I don't know if anything can be done for it. Maybe it's because of the upgrade to Electron 6. Anyway, I've downgraded to v1.39.2.

[bpasero]

This is probably #84154

[varunj166]

@bpasero Yes it is. Thank you for the reference.

@Eldaw Wow, that's... very unfortunate. Thanks for the detailed answer.

If I can ask, why would any rendering setting prefer grayscale subpixel antialiasing over RGB in a UI that's otherwise full color? Is it performance? Style choice? It seems to me its main effect is losing sharpness, which is never desirable.

[thermarthae]

I have the same problem with 1.40 update on Windows 10.

It looks that disabling/changing position: relative at .monaco-workbench in devtools makes everything sharp again.

https://github.com/microsoft/vscode/blob/master/src/vs/workbench/browser/media/style.css#L52

[bpasero]

Out of curiosity, we recently started to build VSCode with the latest Electron 7.x that comes with Chrome 78. Does something change in those versions?

Download:

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

[marijaninjo]

Out of curiosity, we recently started to build VSCode with the latest Electron 7.x that comes with Chrome 78. Does something change in those versions?

No, looks the same

[varunj166]

@thermarthae I see that 1.40.0 has that style rule enabled, whereas in 1.39.2 it's crossed out, but when I disable the rule in 1.40.0, I don't see anything sharpen up. How did you come to your conclusion?

@bpasero I can also confirm, the fuzziness is still there in the 1.41.0 you linked.

[bpasero]

/duplicate #84154

[vscodebot]

Thanks for creating this issue! We figured it's covering the same as another one we already have. Thus, we closed this one as a duplicate. You can search for existing issues here. See also our issue reporting guidelines.

Happy Coding!

[bpasero]

I am reopening this issue as I believe it may not be the same as #84154 but rather is about the font appearing blurry and not crisp anymore.

[alexdima]

Because this issue contains complaints about multiple areas (not just the code editor), to fix the grayscale rendering in all the places, more changes are needed.

For the recovery release, we have opted to have a smaller, targeted fix for the code editor text. This is tracked in #84698

[i6mi6]

I set "workbench.fontAliasing": "antialiased" and it seemed to help a little

[nklmilojevic]

@alexandrudima as I commented here #84698 (comment) it doesn't fix it on macOS Catalina.

[varunj166]

@zxdx @bhughes339 On the most current insider's build, yes the two fixes do work for me also. There must have been something going on with that one insider's build we tried on. Anyway, I think the dev's now have enough info to sort this out. For now, I've no reason to switch away from 1.39.2.

[deepak1556]

@alexandrudima pushed a fix for the editor fonts in today's recovery stable release, please update your stable, remove the workarounds mentioned in this thread and verify if the fonts are better. Thanks!

[nklmilojevic]

Removed the workarounds and here is 1.39.2 vs 1.40.1 in a gif, the fonts are still thinner in 1.40.1.

It is the same as in 1.40.0.

[varunj166]

@deepak1556 @alexandrudima 1.40.1 (latest stable) looks good on my Windows 7 x64, at least in terms of subpixel AA. I'll have to take your word for it that nothing else about the editor text rendering is different with the fixes you applied in this version. My eyes are getting very tired from staring at edges of lettering on my screen from 5 inches away.

[zxdx]

1.40.1 looks good to me. Per pixel comparison with 1.39.2 shows no differences for the editor area.

[felipebraga]

Integrated Terminal still blurry 1.40.1.

ZSH

Bash

[alexdima]

To sum things up:

---

1. The state of VS Code Stable 1.40.x

Just a couple of fixes have been backported to the stable branch and are available in 1.40.1. Not all areas in our UI have been fixed in 1.40.1 because we have found that to be too risky. If you are on 1.40.x and are not happy with the antialiasing, then please switch to Insiders which contains a lot more fixes.

---

2. The state of VS Code Insiders

The first build that has all the changes related to antialiasing is 29b99f85e54aa5af6cd4edf918a67d4f70a10aea (2019-11-19T10:22:27.162Z) from one hour ago. Please make sure to update to it and then please make sure to remove "editor.disableLayerHinting" from your settings, it is no longer necessary. As far as we are aware, all issues caused by our update to Electron 6.x have been resolved starting with this Insiders build.

If you have updated to the latest insiders version and continue to be unhappy with the font antialiasing, please open a new issue. It is possible we have missed something, but we believe we are now as good (or better) as we were in 1.39.x.

---

TL;DR Update to latest insiders, remove workarounds from your settings and file new specific issues about what area doesn't look good for you. If you are on 1.40.1 and feel unhappy with the antialiasing, switch to insiders.

[clemlesne]

Hello, the 1.41.0 is still blurry for me. I'm on the latest Fedora 31 Gnome Wayland.

Others details:
Version: 1.41.0
Commit: 9579eda
Date: 2019-12-11T18:32:17.711Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Linux x64 5.3.15-300.fc31.x86_64

[dvic]

For me the terminal is also still blurry

Version: 1.41.0
Commit: 9579eda04fdb3a9bba2750f15193e5fafe16b959
Date: 2019-12-11T17:58:38.338Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 18.7.0

[felipebraga]

It's better, but still blurry.

Version: 1.41.0
Commit: 9579eda04fdb3a9bba2750f15193e5fafe16b959
Date: 2019-12-11T18:32:17.711Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Linux x64 5.4.2-1-MANJARO