Add option to turn off anti-aliasing for editor font.

[yangmillstheory]

Thanks for the great product!

Sublime Text allows you to turn off anti-aliasing, which looks great for some fonts:

{
    "font_face": "MS Gothic",
    "font_options":
    [
        "no_antialias"
    ],
    "font_size": 18,
}

I've looked around, but there doesn't seem to be an easy way to do this. Is there a way for me to do this in VSCode?

[alexdima]

VSCode is built on Electron, and the rendering is basically Chromium.

-webkit-font-smoothing: none; used to control that, but it doesn't look like it's doing anything for me on windows

[yangmillstheory]

Thanks @alexandrudima; I use that rule with the Stylish plugin. Do you where I can set that setting on VSCode?

[alexdima]

At this time, we don't give a straight-forward way to directly customize CSS, neither from an extension nor from a user configuration option. Short of editing the .css files we ship with (and lose the edits on updates) there's nothing I can think of. Even then, I have tried the -webkit-font-smoothing: none; and it doesn't seem to have any effect.

[Codemaverick]

I use VSCode on a mac, and I have to say I much prefer having this as an option rather than not. Is it possible to make it a feature request?

[wprater]

do the themes have a way to expose this css prop on the editorPart yet? I can set it manually on macOS and it looks much better when I set -webkit-font-smoothing: antialiased

[rafatrace]

How do you do that @wprater?

[akabiru]

@ptraceur To set it manually Go to Help > Toggle Developer tools and then paste -webkit-font-smoothing: antialiased in the CSS section. It's only temporary though.

[rafatrace]

@akabiru I see... if I close vscode, it will get as normal again right? Do you have any idea on how to make this permanent?

[akabiru]

@ptraceur Yeah, it's a temporary fix. I'm not sure how to make it permanent at the moment.

[chriskrycho]

On any "retina" class monitor, the difference this makes is substantial. Please consider adding it as a configuration option.

[icewind]

Just add an ability to use user.css like in Atom. Then it will be possible to gradually adjust anything.

[jimmykamau]

@akabiru @rafamds You can make the change permanent by adding -webkit-font-smoothing: antialiased; to the style declaration at the top of the file: /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/bootstrap/index.html (if you're on macOS). The editor will complain about your installation being corrupt but you can always ignore the warning. I'm not sure if it is persistent across updates though.

[guillenotfound]

@jimmykamau

Remember the scape chars :)

/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/bootstrap/index.html

But ye, it works!

[thiyagaraj]

DejaVu Sans Mono appears thinner(editor.fontWeight: normal) and is a workaround if you are ok with that font, atleast until disabling anti-aliasing is implemented(and if you dont want to modify the css/html)
https://www.fontsquirrel.com/fonts/dejavu-sans-mono

[natesilva]

Apple’s SFMono-Light is another one that is not eye-searingly bold on a Retina screen. I’m using it for now. https://github.com/muhasturk/SFMono

[ZER0]

In case anyone is interested, I created an extension to keep the changes across the updates: https://github.com/ZER0/roughify (mostly for a friend of mine).
I didn't publish it yet on Extension's Marketplace since it's modifying the app's core file, so I'm not sure if that is allowed.

[MIPSpro]

I use the SGI screen font converted to .ttf file for use on OSX. It result looks really nice and crisp in vscode.

https://njr.sabi.net/2015/11/01/sgi-screen-fonts-converted-for-os-x/

[wprater]

Im still finding myself opening up the developer tools every time to adjust these settings. APIs / editor options would be great, but use controlled CSS could work too. Problem with user css is that if can break other parts of the editor if applied incorrectly.

[icewind]

From my point of view it should not prevent this feature to be added. Since this tool is aimed on developers and we are able to handle css :) The tool should be as flexible as possible and VSCode is flexible. With one exception.
At this moment constant fighting with fonts is most annoying thing in Code.

[rossPatton]

At this moment constant fighting with fonts is most annoying thing in Code.

Seriously. Please fix the font rendering. Having to paste the -webkit-font-smoothing: antialiased; fix every time I open the editor just to get somewhat Sublime Text level rendering is not a great experience

In sublime, I use the gray_antialias setting in font_options and it makes things much much better

[joerx]

+1

[priithaamer]

Hi! I'm willing to tackle this as i prefer antialiased font as well. However, does anone have thoughts how it should be configured? Is font_options good way to do it?

[roman0x58]

@priithaamer I think it should be just "editor.fontAntialiasing" : "antialiasing" (none | subpixel-antialiased)

[kraftwer1]

@priithaamer Excellent. I think another question is which parts of the UI exactly should be affected. Should it be the editor only (source code "words"), or also tooltips, terminal, menus and / or dropdowns?

In my personal favour, only the editor and related elements (everything that includes source code -
such as Peek Preview) and the terminal should be affected.

Any other opinions?

[priithaamer]

@roman0x58 @kraftwer1 I'd prefer antialias to be applied to entire window on top level. It looks best this way.

[bpasero]

To verify: On macOS you can now control this via a new setting workbench.fontAliasing. The possible values are antialiased, none and default. This transforms into a -webkit-font-smoothing setting on the body element of the workbench.

[anhvupham]

@bpasero should I wait for the new update to have that setting ?

[chriskrycho]

Should be in the next Insiders build, and then in the next major release.

[priithaamer]

Please note that you have all reasons to be disappointed that editor.fontAliasing did not made into this pull request. I'm still working on it.

Thanks for the merge @bpasero

[icewind]

As for me editor.fontAntialiasing will not resolve the issue. The font is crappy in tab bar/search/menus.
For me it is better to set -webkit-font-smoothing: antialiased to body tag. But this may not be acceptable for someone else.
Thats why I think that adding a support for user.css will be a best option. Anyone will be able to adust it as he wants. Without messages about corrupted install and 3rd party plugins

[wprater]

For me it is better to set -webkit-font-smoothing: antialiased to body tag. But this may not be acceptable for someone else.

The feature does add the property to the body, which fixes the areas you mentioned.

Have you tried it yet?

[weinand]

Looks bad on normal display:

but slightly better on Retina:

[kraftwer1]

@weinand It seems correct (on your normal display) but it looks like your font is not designed for non-antialiasing. Mine looks like this (I'm using Terminus).

[schnz]

Is there anything I can do to achieve a similar result for Windows? Actually, this is currently the reason why I am still using Sublime over VS Code. I am using the no_antialias font option in Sublime and are quite used to the font style. Unfortunately the solutions proposed in this issue seem only to affect MacOS.

[mathewhany]

@Coksnuss Same here!

[thefill]

@bpasero I confirm that this option works on macOS:

[mmarzec]

The merge request #30628 is providing configuration but only for macOS platform.
Can we reopen the issue to add that option to Windows platform?

[schnz]

@mmarzec I would love to have that option for Windows too. However, I fear that the WebKit engine does not support that possibility at all. Please correct me if I am wrong.

[mathewhany]

@Coksnuss I think Atom has options for font anti-aliasing, I'm not sure though.

[mmarzec]

I think that "-webkit-font-smoothing" is supported on Windows on Chrome. But in case of no antialiasing there was recently a problem with DirectWrite font rendering in Windows which can't produce non antialiased fonts. The problem came since Chrome version 52 where old GDI font rendering was removed.
The problem is more detailed explained here: https://www.change.org/p/google-inc-bring-sharp-fonts-back-in-google-chrome-disable-directwrite

I am not very familiar how VSC is created but if it is based on Chrome than to have posibility to have non antialiased fonts it will be required to introduce same option of changing "-webkit-font-smoothing" on Windows and also compile Chrome with GDI font rendering possible.
As for GDI font rendering there is web browser based on Chrome - CentBrowser where they bring back GDI font rendering, so it should be possible.

[kraftwer1]

@priithaamer Are you by any chance working on editor.fontAntialiasing? :-)

[lumberman]

Very annoying to see any font so fat in this editor.

[priithaamer]

@kraftwer1 I was working on editor.fontAliasing this summer and got done part of it. Too bad this change got merged so early, i lost part of the interest :) Sorry about this, i'd definitely want to finish the editor part of it.

[kraftwer1]

@priithaamer I see. I've just noticed that with the new September release, antialiasing in the built-in terminal doesn't seem to work anymore.

[KonaBlend]

fontAliasing is not only useful for workspace but pretty much anywhere one can specify a font/size.

For example, the built-in terminal, I would prefer Monaco font, size=10, fontAliasing=none because Monaco is designed for that. For editor, another font/size/aliasing.

As of 1.17.0 "terminal.integrated.fontAliasing": "none" has no effect on macOS. Also "editor.fontAliasing" has no effect.

[priithaamer]

@kraftwer1 @KonaBlend Thanks for reporting this. I will take a look what happened with fontalias setting in terminal.

[smoothdeveloper]

What is the way to disable antialiasing in the editor? @bpasero mentions workbench.fontAliasing but it doesn't seem to be a known configuration setting nor to do anything when I add it to my user settings.

Thanks.