How can I make the font rendering in VSCode for MacOS looks exactly the same like VSCode for Windows?

7.9k views Asked by At

Somewhat the opposite of this question.

I don't like how fonts are rendered in VSCode for Mac. To me, the lack of contrast gets in the way, since I don't have good vision, the letters get a little scrambled because of the lack of contrast. I can zoom, but I lose a lot of working space (MacBook Air has a small screen).

I switched to the font used in VSCode for Windows (Consolas), but it still gets blurry.

MacOS system's General > Font smoothing doesn't make any difference.

Is there any way I can make the font rendering in VSCode for Mac looks like exactly the same from VSCode for Windows?

VS Code for Windows (very good, print took from a VM connection to a Windows machine) enter image description here

VS Code for Mac with font antialising ("workbench.fontAliasing": "antialiased") (less vibrant and blurry) enter image description here

VS Code for Mac without font antialising ("workbench.fontAliasing": "none") (more vibrant and contrasty, but looks really bad) enter image description here

1

There are 1 answers

1
rioV8 On BEST ANSWER

If you zoom in very far you can see the difference.

Windows uses Subpixel rendering and the color management is different. The Mac uses a monochrome rendering of the font (anti aliased)

The background color of both images is #1E1E1E (Lab 11,0,0)

Sampling colors of the I in Identifier

  • Windows #8FD3C7 (Lab 80,-19,-1) (Green-grey color)
  • Mac #78A6BE (Lab 66,-10,-15) (Blue-grey color)

The human eye is better at sensing contrast for green colors.

The lightness difference on Windows is bigger (80:11) compared to Mac (66:11)

I suggest to change the colors of the Theme or use a Theme with higher contrast in the colors, making the background black gives another extra contrast enhancement.

From the Themes I have installed only Light+ uses white background and High Contrast uses black background. All other themes have a lack of contrast because of the background color

Looking at One Dark Pro it uses quite saturated colors for the syntax highlighting. Just changing the background of the editor to black helps.

  "workbench.colorCustomizations": {
    "[One Dark Pro]": {
      "editor.background": "#000000"
    }
  }

There are many other background colors you can change if needed.