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

[rafmst]

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.

[rafmst]

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

[kraftwer1]

Maybe it should be applied everywhere, where the font size and line height options are applied?

Am 25.05.2017 um 12:15 schrieb Priit Haamer [e-mail]:

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

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[kraftwer1]

Alternatively, I could imagine two options like editor.fontAntialiasing as well as window.fontAntialiasing.

[priithaamer]

That sounds reasonable. Thanks! I assume the second one would be workbench.fontAntialiasing instead?

[kraftwer1]

You might be right - I don't know the scopes too well myself, yet.

[martinezguillaume]

Need this feature !

[cuiweiqiang]

In my 2016 RMBP 15', I use "editor.fontWeight": "200" to setting it, prefer good. My font is 'Source Code Pro', it can be antialias in another way.

[jonathanphz]

This feature would be great :)

[priithaamer]

Sorry for the delay but finally managed find some time to work on this. I have not yet submitted a pull request. Since this is my first contribution here, I'd be happy if someone would review this: https://github.com/Microsoft/vscode/compare/master...priithaamer:2577_font_antialiasing?expand=1

[bpasero]

Do people see any use case for -webkit-font-smoothing: none? I am asking because I wonder if this new setting should allow to set all three possible options (none, subpixel-antialiased and antialiased).

[kraftwer1]

@bpasero Not sure if I understand your question correctly, but I use -webkit-font-smoothing: none for disabling antialiasing (I'm on macOS). This should probably happening internally when setting antialiasing to "none".

[bpasero]

@kraftwer1 i just tried this CSS property on Windows and Linux (through a VM though) and could not see any visual difference. On what OS are you and can others confirm that this setting should be cross platform?

[kraftwer1]

I'm on macOS and it seems that this is the way to handle antialiasing (at least on macOS). For comparison:

...and now with -webkit-font-smoothing: none:

[bpasero]

@kraftwer1 so you find the setting -webkit-font-smoothing: none produce better results for you?

[trongthanh]

I think it's worth taking values of subpixel-antialiased and antialiased into consideration as well.
Quick insight: subpixel-antialiased (which is default value) makes texts look bolder on macOS. (I think they are the same on Linux and Windows).

Here's a preview with subpixel-antialiased

and here's with antialiased

Note: both previews use Menlo (Regular 14px)

Generally, for macOS users, we prefer antialiased so font weight looks correct as intended.

[bpasero]

@trongthanh subpixel-antialiased is the default. What I am trying to understand is if there is anyone that wants -webkit-font-smoothing: none

[trongthanh]

@bpasero I guess there are people want -webkit-font-smoothing: none. At least the author of first post of this thread and the people who placed the thumb-up.

I should be clearer with my point that from this PR, the setting is a boolean to switch between antialiased and none, and ignoring subpixel-antialiased.

My 2c, the setting should allow all three possible values, and of course, default should be subpixel-antialiased since it is the default of every users right now.

[priithaamer]

Thanks guys for the discussion. I will update the PR accordingly. Cheers!

[bpasero]

@trongthanh @priithaamer then I would suggest to make this setting an enumeration of the three possible values and have a default be subpixel-antialiased. I think a simple boolean does not make it easy to understand what is going on when you have 3 possible values.

[kraftwer1]

@bpasero Yes, -webkit-font-smoothing: none is definitely what I need. Good idea with the enumeration.

[priithaamer]

I changed the configuration setting, it now supports default (maps to subpixel-antialiased), antialiased and none.

[priithaamer]

@kraftwer1 I assume you want -webkit-font-smoothing: none only for the editor part and leave surrounding UI as it is?

Currently, it is being set for entire window but for none it makses sense to support editor.fontAliasing as well.

[kraftwer1]

@priithaamer Exactly, imho it should be applied only where editor.fontFamily applies: The editor and the terminal. As you say, it should not affect the surrounding UI, like tooltips, popovers, etc.

Thanks again for doing this! :-)

[wprater]

I would hope that it would affect the statusbar, since its very bold. every time I open the app, I toggle developer tools and run this query document.querySelector('.monaco-shell.vs-dark').style.webkitFontSmoothing = 'antialiased'; which will setup the UI and editor panes to have a font rendering that looks perfect for me and not extra anti-aliased.

[syabro]

@kraftwer1 @priithaamer it should be applied to the whole window, not only to editor and terminal.

[priithaamer]

@wprater @syabro As per discussion above, there will be two configuration options: workbench.fontAliasing and editor.fontAliasing. The latter will override setting from workbench in editors and terminal. Workbench setting applies to status bar as well.

[syabro]

@priithaamer awesome, thanks!

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

[Coksnuss]

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 https://github.com/Microsoft/vscode/pull/30628 is providing configuration but only for macOS platform.
Can we reopen the issue to add that option to Windows platform?

[Coksnuss]

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