Atom vs TextMate font rendering


#1

Hello, recent convert from TextMate here, and something about Atom’s text rendering doesn’t sit right with me. I took screenshots of Menlo 11pt to compare:


Text rendering seems blurry compared to other editors
Blurry Text on Windows/Low-DPI
Blurry Text on Windows/Low-DPI
#2

This might be due to different font smoothings. You can select “Atom -> Open Your Stylesheet” (on OS X, should be somewhere similair on windows/linux) and add something like this to change the font smoothing method:

.editor {
  -webkit-font-smoothing: antialiased;
}

As far as I know possible values are “none” (default), “antialiased” and “subpixel-antialiased”. The might give different results depending on if you use a light or dark background.
I think “antialiased” should give results closer to textmate, as it usually makes the text a little “thinner”, but can make the font look a little “fuzzy” on bad monitors. I use it though and it looks great, at least on dark backgrounds.


#3

I use “auto”, which from what I can tell and have read allows the OS to pick the optimum font-smoothing algorithm. From my experiments with it, I have found that I agree with this guy:

http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/


#4

Thanks for the suggestion with the “auto” option.

I created my own theme and found that there was only very little difference between the regular font weight and bold font weight, which was kind of annoying for me. Furthermore, on non-retina monitors, the text often looked kind of blurred (we don’t really have the best monitors at work ;-)). Using antialiasing fixed that, and I also found the text to look better, on both retina and non-retina displays (which, of course, is just personal taste).

But of course a lot of the points in the article are correct - for example, on light backgrounds the text becomes extremely ugly on my display with the antialiased option. For me, though, it works, and I also use it on my webpage (and, as I might add, this forum also uses -webkit-font-smoothing, it’s actually used quite often on the web these days I think).


#5

Antialiased font smoothing makes the text a little lighter, but it loses subpixel rendering. It’s still a long way from TextMate, take a look at the “e” and the “g”:

There’s a definite lack of clarity and readability.


#6

in my case change the webkit font parameters doesnt works, I remove all these and use the old chrome trick for better render: add a small shadow almost invisible and play with the weight

font-weight:650;
-webkit-text-stroke: 1px rgba(0,0,0,0.1);

coming from coda and sublime on mac I would prefer a bit more weight, but looks pretty good, hope this help you!..


#7

I use “auto”, Menlo 13px on my Thunderbolt Display:


#8

Which syntax theme do you use? It’s fantastic.


#9

It’s my own creation, Tesla. I’ll publish it for you.


#10

@jenna The theme is published at https://atom.io/packages/tesla-atom


#11

Thank you for this neat trick, it works!