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

Open
0xdeafcafe opened this Issue Jun 5, 2018 · 52 comments

Comments

Projects
None yet
@0xdeafcafe
Copy link

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 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 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 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 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 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 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 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 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 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 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 commented Jun 19, 2018

Link on the issue in atom atom/atom#17486

@gravicle

This comment has been minimized.

Copy link

gravicle commented Jun 28, 2018

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

@glixlur

This comment has been minimized.

Copy link

glixlur 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 commented Jul 7, 2018

@jmikrut

This comment has been minimized.

Copy link

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 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 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.

@goldo

This comment has been minimized.

Copy link

goldo commented Sep 4, 2018

@glixlur

This comment has been minimized.

Copy link

glixlur commented Sep 4, 2018

@ryanwarsaw What about Chrome? If Chrome works fine, Electron just needs to update their upstream.

@ryanmcnamara

This comment has been minimized.

Copy link
Contributor

ryanmcnamara commented Sep 5, 2018

@glixlur wrong ryan?

@Rykuno

This comment has been minimized.

Copy link

Rykuno commented Sep 5, 2018

@glixlur I'm having the same problems for quite a few applications I use. Strangely enough all the applications I'm currently having problems with are either Electron or QT applications also.

@celento

This comment has been minimized.

Copy link

celento commented Sep 5, 2018

The last Beta I used was Beta 5 and it had even thinner fonts for Google search results using Chrome.

@carlca

This comment has been minimized.

Copy link

carlca commented Sep 9, 2018

I can confirm that the problem still exists in Beta 10, but that @jmikrut 's suggestion of setting the font weight to bold works. Thanks @jmikrut!

@zlliang

This comment has been minimized.

Copy link

zlliang commented Sep 14, 2018

I'm at Beta 10, and the problem exists in Chromium 70... 😓

@simeonpashley

This comment has been minimized.

Copy link

simeonpashley commented Sep 17, 2018

This improved things for me, almost back to normal
defaults -currentHost write -globalDomain AppleFontSmoothing -int 2

You need to Logout & Login again or nothing will change. Weird but true.

@MikeMcQuaid

This comment has been minimized.

Copy link

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 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... 😣

@FateLight

This comment has been minimized.

Copy link

FateLight commented Sep 20, 2018

@samelhusseini What is the resolution of your display?

@mario-grgic

This comment has been minimized.

Copy link

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 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 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 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 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 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 commented Sep 24, 2018

defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

Thanks! Worked perfectly!

@steelbrain

This comment has been minimized.

Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.