Atom Font Rendering Fix and Theme Suggestion

Tony Gaeta
Mar 17, 2015 · 2 min read

Atom’s Default Font Rendering Sucks… But You Can Fix It

If you are new to and have noticed the font rendering as fuzzy or hard to read, you’re not alone. When I switched from Sublime Text 3 to Atom for my Ruby on Rails course at The Iron Yard, I instantly noticed this issue and started to hate Atom from the get go. Let’s fix this shall we?

With the current default settings, this code is thin, somewhat hazy, and hard to read.

THE FIX:

Add this snippet to your styles.less file (Atom > Open Your Stylesheet) and save:

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

.tree-view {
-webkit-font-smoothing: auto;
}

Also, change your font to Menlo in the settings. You should notice an immediate change in the font rendering:

Medium has issues displaying gifs — to view it without an error, click .

The code is thicker, crisper, and easier to discern IMHO. I won’t say it’s as good as ST3, but it’s far better than the default. I have also included the tree-view in the less file to complete the package.

Suggested Theme

If you find yourself coding in Atom more than not, you’ll probably want a theme that works well with your language. For me, I have used it a lot for Ruby, Rails, and Sass. It took me awhile to find a theme that I liked and rendered the ERB tag in color. Yeah, I know. I could have changed it myself or just opted to use Haml, but this was already made… and I like it too.

with the syntax theme:

I also use the and packages for easier navigation.

Hope this helped and thanks for reading!

Originally published at on March 17, 2015.

Tony Gaeta

Written by

Husband • Father • Coder • Runner