Bolder Font?


#1

Is it possible to make the font bolder? Like using the CSS font-weight property in my own Stylesheet?

I’m used to the Courier 14 font in TextWrangler and when I changed to the same font I noticed the font is kind of darker, or, maybe more precisely, bolder in TextWrangler.


#2

On OS X there is a weird ability that is based solely on how the OS stores the names of fonts internally where you can:

  1. Remove all the spaces in the font name
  2. Add a hyphen followed by the font weight

And (in my experience) much of the time it will display the correct weighted version of the font. So long as you use the weight name like “Light” or “Bold” instead of the weight number. For example, I’m using Input Mono Narrow, Light:

I’m assuming you’re using OS X because of the mention of TextWrangler.


#3

I tried your advise, but I wasn’t able to make Atom show text exactly like TextWrangler with CourierNew, CourierNew-Bold, Courier or Courier-Bold. On my Stylesheet I also tried the font-weight property with values from 400 to 900.

Either the font is too thin or too bold. I wonder what kind of magic the TextWrangler authors are using. :wink:


#4

The most precise method I know of is to add the style to your user style sheet (command Open Your Stylesheet).

Then add this:

atom-text-editor {
  font-weight: 500;
}

but change the font weight value to one that matches the weights typeface has available. In general, 400 is regular and what Atom will tend to use, while 700 is bold (probably too bold for general use unless you really need the contrast). Some fonts like Source Code Pro (example) have lots of weights, so you could specify 500 and get a slightly heavier weight.

If you aren’t getting the results you want, try a typeface that supports more font-weight values. Source Code Pro is a great place to start, in my opinion.


#5

Additionally, you can play with font rendering in Atom by adding variants of -webkit-font-smoothing. This is non-standard CSS, but it works in Atom.

Try -webkit-font-smoothing: antialiased; or other properties with a heavier weight and see what you think. I think Atom uses -webkit-font-smoothing: auto; out of the box.


#6

Because Atom uses Chromium for the rendering (and because Chromium uses it’s own font engine and not the OS default one), it may not be possible to make the font rendering look identical to TextWrangler.


#7

I tried the Source Code Pro font with Medium, but it looks washed out.

Then I followed your antialising instructions and it is quite nice now!

Maybe this antialising thing could be partly one of the settings of one of the downloadable themes for those who like the black and white style for coding, unless there already is one. :relieved:


#8

Another peculiar thing about text rendering: it looks totally different at 1x vs 1.5x vs 2x DPI scaling, and from one OS to another. What’s blurry to you is clear to someone else, which is why trying different fonts and rendering settings may be essential if these sorts of things bother you.


#9

Any tips for Windows also? I tried using Atom with the Source Code Pro font with the Stylesheet using antialising with font-weight 600 (I also tried other values from 400 to 900). Then I compared Atom with Notepad’s default font Consolas and I didn’t quite get there.