Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

macOS Mojave: font rendering is blurry or has changed #51132

Closed
0xdeafcafe opened this issue Jun 5, 2018 · 55 comments
Closed

macOS Mojave: font rendering is blurry or has changed #51132

0xdeafcafe opened this issue Jun 5, 2018 · 55 comments

Comments

@0xdeafcafe
Copy link

@0xdeafcafe 0xdeafcafe commented Jun 5, 2018

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:
screenshot 2018-06-05 at 10 06 27

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

@birkir

This comment has been minimized.

Copy link

@birkir birkir commented Jun 5, 2018

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

image

Retina

image

@BanjoCam

This comment has been minimized.

Copy link

@BanjoCam BanjoCam commented Jun 5, 2018

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

This comment has been minimized.

Copy link

@celento celento commented Jun 5, 2018

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

This comment has been minimized.

Copy link

@BanjoCam BanjoCam commented Jun 5, 2018

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

@bpasero

This comment has been minimized.

Copy link
Member

@bpasero bpasero commented Jun 6, 2018

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

This comment has been minimized.

Copy link
Author

@0xdeafcafe 0xdeafcafe commented Jun 6, 2018

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

image

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

@bpasero bpasero added mac mojave labels Jun 6, 2018
@natebwangsut

This comment has been minimized.

Copy link

@natebwangsut natebwangsut commented Jun 8, 2018

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 comment has been minimized.

Copy link

@digicase digicase commented Jun 10, 2018

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

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

@Rykuno

This comment has been minimized.

Copy link

@Rykuno Rykuno commented Jun 11, 2018

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.
screen shot 2018-06-10 at 9 59 52 pm
screen shot 2018-06-10 at 9 59 10 pm

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 comment has been minimized.

Copy link

@vinkla vinkla commented Jun 19, 2018

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

@Toxblh

This comment has been minimized.

Copy link

@Toxblh Toxblh commented Jun 19, 2018

Link on the issue in atom atom/atom#17486

@gravicle

This comment has been minimized.

Copy link

@gravicle gravicle commented Jun 28, 2018

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

@proteriax

This comment has been minimized.

Copy link

@proteriax proteriax commented Jun 29, 2018

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

@bpasero

This comment has been minimized.

Copy link
Member

@bpasero bpasero commented Jul 7, 2018

@jmikrut

This comment has been minimized.

Copy link

@jmikrut jmikrut commented Jul 16, 2018

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

This comment has been minimized.

Copy link

@birkir birkir commented Jul 17, 2018

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

This comment has been minimized.

Copy link

@vinkla vinkla commented Jul 17, 2018

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

This comment has been minimized.

Copy link

@MikeMcQuaid MikeMcQuaid commented Sep 17, 2018

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

This comment has been minimized.

Copy link

@pdgago pdgago commented Sep 18, 2018

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

This comment has been minimized.

Copy link

@ghost ghost commented Sep 20, 2018

@samelhusseini What is the resolution of your display?

@mario-grgic

This comment has been minimized.

Copy link

@mario-grgic mario-grgic commented Sep 24, 2018

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

This comment has been minimized.

Copy link

@angristan angristan commented Sep 24, 2018

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

This comment has been minimized.

Copy link

@alexanderyakusik alexanderyakusik commented Sep 24, 2018

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

This comment has been minimized.

Copy link

@noobtiger noobtiger commented Sep 24, 2018

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 .

@slavapavlutin

This comment has been minimized.

Copy link

@slavapavlutin slavapavlutin commented Sep 24, 2018

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

@colevanh

This comment has been minimized.

Copy link

@colevanh colevanh commented Sep 24, 2018

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

This comment has been minimized.

Copy link

@alexknipfer alexknipfer commented Sep 24, 2018

defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

Thanks! Worked perfectly!

@steelbrain

This comment has been minimized.

Copy link

@steelbrain steelbrain commented Sep 24, 2018

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

@angristan

This comment has been minimized.

Copy link

@angristan angristan commented Sep 24, 2018

@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!

screenshot 2018-09-24 at 23 52 20

@matwming

This comment has been minimized.

Copy link

@matwming matwming commented Sep 25, 2018

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

This comment has been minimized.

Copy link

@Greenmzc Greenmzc commented Sep 25, 2018

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

This comment has been minimized.

Copy link
Member

@bpasero bpasero commented Sep 25, 2018

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

@frzi

This comment has been minimized.

Copy link

@frzi frzi commented Sep 25, 2018

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.

@lachlantula

This comment has been minimized.

Copy link

@lachlantula lachlantula commented Sep 25, 2018

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

This comment has been minimized.

Copy link
Member

@bpasero bpasero commented Sep 25, 2018

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.

@microsoft microsoft locked as resolved and limited conversation to collaborators Sep 25, 2018
@bpasero bpasero changed the title Font rendering seems strange in macOS Mojave macOS Mojave: font rendering is blurry Sep 25, 2018
@bpasero bpasero changed the title macOS Mojave: font rendering is blurry macOS Mojave: font rendering is blurry or has changed Sep 25, 2018
@bpasero bpasero assigned deepak1556 and unassigned bpasero Oct 9, 2019
@deepak1556

This comment has been minimized.

Copy link
Contributor

@deepak1556 deepak1556 commented Oct 11, 2019

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

@deepak1556

This comment has been minimized.

Copy link
Contributor

@deepak1556 deepak1556 commented Oct 15, 2019

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

This comment has been minimized.

Copy link
Contributor

@deepak1556 deepak1556 commented Nov 15, 2019

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

@deepak1556 deepak1556 closed this Nov 15, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.