Blurry default font on Mac with non-high-dpi display

[chrmarti]

• VSCode Version: Code - Insiders 1.10.0-insider (40fecfa, 2017-02-27T14:09:29.088Z)
• OS Version: Darwin x64 15.6.0
• Extensions: none

---

Default (especially 'e' and 'a' are bad):

Font-size 14 helps, but is a little clunky:

Fira Code, size 14:

Hack, size 14:

Fira Code, size 14, with ligatures (which Hack doesn't support):

[alexdima]

@chrmarti From zooming in to your screenshots, it appears the font is rendered using subpixel antialising, which was in the past a main source of bluriness:

So I think we're doing things ok on our side (i.e. positioning layers at integer coordinates, opaque background, etc.)

Possible related: #9152

Maybe you can try playing with -webkit-font-smoothing: antialiased; ? Does that make a difference for the better?

Specifically on the mac, there are other issues reporting that the text is rendered too thick. Perhaps you can also play with editor.fontWeight ?

[chrmarti]

Default:

-webkit-font-smoothing: antialiased;

-webkit-font-smoothing: antialiased; font-weight: bold;

[chrmarti]

@alexandrudima See the above. antialiased made it too light, bold counters that, but the result looks worse to my eye than the original.

[alexdima]

@chrmarti I agree, all screenshots look bad.

Perhaps some more CSS tweaks if you'd like to try them out on your setup (I think you're using a mac connected to a non-retina display, right?).

Maybe if we find some of these to have a positive effect I can create an editor setting toggling them on/off:

text-rendering

/* Keyword values */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

-webkit-text-stroke

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

-webkit-font-smoothing: subpixel-antialiased

[chrmarti]

I can't get text-rendering nor subpixel-antialiased to make a difference. Tried stroke width with antialiased:

Stroke width 0.5px:

Stroke width 1px:

Font smoothing antialiased, stroke width 0.5px:

Font smoothing antialiased, stroke width 1px:

Using stroke doesn't seem to work well here. Let me know if there are other combinations I should try.

[alexdima]

I'm sorry, there's nothing more I can think of. Now I'm just fishing in here:

Here are the last CSS knobs I could find in that code that you haven't been through yet (IMHO unlikely they would improve things):

• font-size-adjust
• font-stretch
• font-kerning

[bpasero]

Todays VS Code insider build comes with Electron 1.6.x, would be interesting to hear if this update solves this issue for anyone: http://code.visualstudio.com/Download#insiders

[chrmarti]

Doesn't look like it changed:

Before:

After:

[infojasyrc]

@chrmarti is really easy to play with css changes without going to "Help > Toggle Developer Tools" in vsCode? are they permanent? I am trying to find a way without open the developers tools with no success. I have a MacBook Air and the font shows the same result as you show in the above files.

[chrmarti]

@infojasyrc I did not make any permanent changes to try this. Personally I'm using the Fira Code font with ligatures enabled and size 14. That looks good also on normal resolution displays, my concern here is more with the initial user experience.

[infojasyrc]

@chrmarti I think It will be great to have a less|sass|any css file to modify this globals settings for VSCode as atom has.

[chrmarti]

@infojasyrc That is tracked in #459.

[bpasero]

@chrmarti can this be closed?

[chrmarti]

Yes, not actionable.