Ubuntu, Font Hinting, & You: A Cautionary Tale

30 Responses · April 17, 2009

This post was writ­ten regard­ing Ubuntu 8.10, Intre­pid Ibex.

This isn’t the first time I’ve encoun­tered hint­ing; I’ve seen it before in GIMP, even when I was using it in Win­dows, this font ren­der­ing option that was inex­plic­a­bly on by default, and resulted in hor­ri­ble kern­ing and mis­shapen let­ter­forms. I don’t claim to know a lot about the tech­ni­cal­i­ties of hint­ing, but every­thing I do under­stand about it agrees that it is meant to improve the shapes of let­ters. If this is the case, some­body is doing some­thing very, very wrong. I haven’t seen a hinted font that looked any­thing other than sickly and disheveled.

I’ve com­plained before about the typog­ra­phy in Ubuntu, but my con­tention then was with the fonts that were in use by default, not with the way they were ren­dered. What I didn’t real­ize at the time is that the ren­der­ing is the bulk of the problem.

applicationsmenuI found this image on the Ubuntu site, and I am still in dis­be­lief that they choose to rep­re­sent them­selves with font ren­der­ing like this. Look at that cap­i­tal ‘A’ and ‘V’; look at the way that lower-case ‘l’ tow­ers over its neigh­bors, noth­ing more than a single-pixel-width ver­ti­cal line; look at the kern­ing in the ‘Rem’ of ‘Remove’ – it’s no won­der Ubuntu has about a 2% world­wide mar­ket share. They expect peo­ple to want to look at that every day of their lives? I know these are rel­a­tively sub­tle details, but their effects are sub­lim­i­nal and, I believe, psy­cho­log­i­cally hazardous.

~/.fonts.conf

Of course, when it comes to Linux, for every prob­lem there are a few dozen solu­tions – or one very, very com­pli­cated solu­tion. GNOME, the default desk­top for Ubuntu, arrives with a “Font Ren­der­ing Details” dia­log box in its appear­ance set­tings, to pla­cate the mouth-breathing philistines who need a GUI to get things done. And it doesn’t really help much. I knew I’d have to get my hands dirty in ~/.fonts.conf, this XML file that is capa­ble (and only capa­ble) of incred­i­bly fine-tuned font tweaking.

[Fonts are] the #1 rea­son why Linux hasn’t seen any sig­nif­i­cant adop­tion on the desktop/laptop yet. Robert Scoble

The trou­ble, as is the case with most Google results you get when look­ing for help with Linux, is that there is a glut of quick fixes, blocks of code directed towards one spe­cific per­son and their spe­cific sys­tem, that they are then told to paste into a file or save into a direc­tory, with lit­tle to no expla­na­tion about why this solu­tion is going to work. Or there’s the tech­ni­cal doc­u­men­ta­tion that isn’t geared towards users. There’s no mid­dle ground (unless you count the occa­sional, skele­tal wiki that hasn’t been updated since 2004).

Only after look­ing at count­less ~/.fonts.conf exam­ples was I able to glean what was going on inside them. The full power of this file allows you to tar­get with amaz­ing pre­ci­sion any vari­ant or size of any font your sys­tem might dis­play and give it its own unique prop­er­ties; but there are really only three(ish) of these prop­er­ties that you need to know about, and I am going to explain them here.

antialias

Anti-aliasing is the trick that makes your pix­els not look like pix­els. You’ve noticed this when you’ve seen poorly resized images with jagged edges – they’re not prop­erly anti-aliased. Sim­i­larly, if fonts are not anti-aliased, they look like black Tetris pieces on a white back­ground. Anti-aliasing is going on all the time with­out you know­ing about it, and you’d really have to make an effort not to have it, but it’s worth putting in your ~/.fonts.conf file for good mea­sure. You’ll want to apply it to all fonts on your sys­tem, so the syn­tax would be:

<match target="font">
 <edit name="antialias" mode="assign">
  <bool>true</bool>
 </edit>
</match>

You can prob­a­bly fig­ure out what these things mean, but I will link to a com­plete man­ual for ~/.fonts.conf syn­tax at the end of this post.

rgba

This one is a mat­ter of per­sonal pref­er­ence, I guess. I don’t see how any­body of sound mind could stand to have pink, beige, and turquoise pix­els sprin­kled around the edges of their let­ters – the result of “sub-pixel ren­der­ing” – but I guess the argu­ment is that it allows them to be sharper. Whatever.

Trust me when I say that things look best if you tell ~/.fonts.conf to dis­able sub-pixel ren­der­ing, which is done like so:

<match target="font">
 <edit name="rgba" mode="assign">
  <const>none</const>
 </edit>
</match>

If you hap­pen to be schiz­o­phrenic, or col­or­blind or what­ever, then yes, fine, you can turn on sub-pixel ren­der­ing by chang­ing none to rgb, to reflect the com­po­si­tion of your monitor’s sub­pix­els (which are almost cer­tainly in the order Red-Green-Blue, from left to right). Have fun scratch­ing your eye­balls out.

rgba=rgb

rgba=rgb

rgba=none

rgba=none

Admit­tedly it would be nice if there were some antialiasstyle prop­erty you could set to antialiasslight or some­thing, to lighten up those gray pix­els a lit­tle bit.

hint­ing / auto­hint / hintstyle

Put it on my tomb­stone: Turn Off Hint­ing. I’m beg­ging you. If some­body tries to tell you that this is a mat­ter of pref­er­ence, they are lying to you, and are not your friend, and are prob­a­bly bang­ing your girl­friend. If you leave hint­ing on, Geor­gia will not look like Geor­gia, Lucida will not look like Lucida, and Nim­bus will not look like Helvetica.

hintstyle=hintnone

hintstyle=hintnone

hinting=true, autohint=true

hinting=true, autohint=true

Here is how you Turn Off Hinting®:

<match target="font">
 <edit name="hinting" mode="assign">
  <bool>false</bool>
 </edit>
 <edit name="autohint" mode="assign">
  <bool>false</bool>
 </edit>
 <edit name="hintstyle" mode="assign">
  <const>hintnone</const>
 </edit>
</match>

Alter­na­tively, if you pos­i­tively demand more “crisp­ness” from your fonts, even at the expense of aes­thet­ics, you might want to give slight hint­ing a try. From the above code, change hinting and autohint to true, and hintstyle to hintslight:

hintstyle=hintslight

hintstyle=hintslight

That’s it, roughly speak­ing. It’s my under­stand­ing that some spe­cific fonts do look bet­ter if specif­i­cally tar­geted and adjusted with maybe slight hint­ing. But that’s for another day. If you do as I’ve instructed, things will be so much bet­ter for you. Leave a com­ment if you want my Pay­Pal address.

This post would not have been pos­si­ble with­out the help of these sites:

  • Arch­Wiki: I know noth­ing about Arch Linux, but this wiki page has a lot of good info.
  • fontconfig.org: the most com­plete and recent ~/.fonts.conf ref­er­ence I’ve found.
  • Ubuntu Wiki: con­tains an exam­ple of a very com­pre­hen­sive (if dated) ~/.fonts.conf file. Study it and learn how to do other stuff.
  • The Mas­ter­plan: another sam­ple ~/.fonts.conf file, and the only other one that I know of that turns off hint­ing and sub­pixel rendering.

Thanks for the font tweak­ing tip. It really improved the look of my Ubuntu Jaunty — in com­bi­na­tion with a font size of 9 (from the default of 10), the fonts look beau­ti­ful now.

Biju Kunjummen · 18 May 2009

Glad to know it helped, Biju. I’m still very pleased with the way this makes things look. It’s also use­ful to browse through all your font pref­er­ences — in Appear­ances, in Fire­fox, etc. — and make sure every­thing is set to a good font; DejaVu instead of Sans, for instance. UnDo­tum makes a great title­bar font.

Jay · 18 May 2009

Thanks ever so much for this help­ful post. I’ve been search­ing linux forums in vain for a proper fonts.conf set­ting. Every­one seems per­fectly happy with rgba turned on and hint­full — I, how­ever, found myself get­ting headaches from all the color halos and awful kern­ing. In fact, when I first arrived at your site, the let­ters were smashed together from a dis­as­trous hint­ing set­ting. Now, every­thing looks very ele­gant — and no more headaches!

Matt · 18 May 2009

Although you put some­thing to extrem­ity, I agree with most of this post. I did tune much accord­ing to your post with fonts.conf, yet finally I just use the eas­i­est way: choose “best con­trast” (which means gray-scale, hint­ing full), I thus turned off rgb hint­ing and use only gray-scale hint­ing and I’m rather happy. Being a gdi++ fan, I still think there’s huge job left for Linux devel­op­ers, though.

Thanks.

kmc · 20 May 2009

The sub-pixel ren­der­ing blow-up isn’t really a fair rep­re­sen­ta­tion unless you cut the blown up pix­els into R, G and B stripes. The blue stripe on the lower case L in Google is really 2/3 black with a blue stripe in the last third of the pixel. Who sits close enough to their screen to see indi­vid­ual pixel com­po­nents, anyway?

Abe · 3 Jun 2009

Abe: You are right, it was a lit­tle lazy of me to do blow-ups like that. They weren’t so much to “prove” that sub­pixel ren­der­ing looks bad as they were to see more closely what’s going on. I sup­pose I could have been clearer about what we’re look­ing at, though per­son­ally I think the normal-sized text is enough to show that sub­pixel ren­der­ing looks bad.

Jay · 8 Jun 2009

To me this is the wrong way around. On 8.10, if I turn off hint­ing, I get the kind of rub­bish that you posted from the ubuntu web­site. Bad kern­ing, unbal­anced let­ter­ing, wildly vary­ing den­sity of text when you squint at a para­graph, etc.

Are you using fire­fox 3.5beta? Ive noticed the beta is very sig­nif­i­cantly defi­cient when it comes to font ren­der­ing — par­tic­u­larly if you have rgb sub­pixel ren­der­ing turned on. On FF3.0.5 with rgb, antialias, auto­hint, hint­full, you can barely detect color fring­ing. On 3.5beta, it looks appalling, par­tic­u­larly light text on a dark back­ground, or when you select text. The bal­ance is OK, but the color fring­ing is terrible.

Jack · 18 Jun 2009

Actu­ally, Ie noticed this varies a lot depend­ing up the zoom fac­tor I use in fire­fox. The other point is that Iḿ run­ning on Crunch­Bang linux, and I think the libs have the pro­pri­etary hint­ing code enabled, so hint­ing prob­a­bly looks much bet­ter than the stock ubuntu libs.

Jack · 18 Jun 2009

Thanks for finally mak­ing font ren­der­ing clear. Every serif font looked awful! I mostly blame auto­hint… and I agree with you: turn it off already!

Flavio · 18 Jun 2009

@Jack: Yeah, I am run­ning Fire­fox 3.5. When I wrote this I was prob­a­bly run­ning 3.1 beta 3 or some­thing. But the prob­lems with fring­ing and hint­ing seemed to extend beyond Fire­fox, so who knows. And I think it was in 8.10 that I was test­ing these things out. There are too many vari­ables to really sin­gle any­thing out as the cul­prit, although because I am run­ning a pretty stock install of Ubuntu, I am assum­ing that most novices like me will prob­a­bly be get­ting the same results.

@Flavio: Glad to help! I was also enor­mously relieved to finally be happy with the way text looked in Ubuntu. It’s amaz­ing what a dif­fer­ence it makes.

Jay · 19 Jun 2009

Nice! I find font hint­ing (on both Win­dows and Ubuntu) so bad that some­times I strug­gle to deter­mine whether a space is an inter-character space as opposed to an inter-word space.

The other major ren­der­ing issue is the lack of gamma cor­rec­tion. (I imag­ine using a decod­ing gamma of 2.5, blend­ing and re-encoding with gamma=1/2.5 should work well, since font ren­der­ing is not sub­ject to the ren­der­ing intent of the encod­ing gamma of 1/2.2 for images view in dim surroundings.)

As it is, font stroke weights vary accord­ing to their ori­en­ta­tion and posi­tion. It’s hard to tell what is meant to be bold and what is not. Some­times in order read a bit of text I have to make a screen snap­shot and apply the cor­rec­tion in Pho­to­shop myself (mainly with Adobe’s Acro­bat Reader). A black ver­ti­cal line one pixel wide exactly cen­tred on the bound­ary of two adja­cent pixel columns should have val­ues RGB(193,193,193) in each column.

Obvi­ously this will lighten the over­all text some­what. That’s because the font weight was cho­sen to look as best as pos­si­ble on ren­der­ing sys­tems with no gamma correction.

It’s kinda odd that most peo­ple don’t realise they are work­ing with com­pressed images. (They are gamma-compressed.) All image arith­metic — scal­ing, blend­ing, dither­ing and trans­parency han­dling — needs to be done with uncom­pressed images.

Daniel · 8 Jul 2009

As some­one who cares a lot about font dis­play and typog­ra­phy in gen­eral I sym­pa­thize with these frus­tra­tions, but I’m pretty sure noth­ing was done by edit­ing the font con­fig file that isn’t eas­ier for most users to accom­plish through the Appear­ance Pref­er­ences GUI (Fonts tab … but then click ‘details’).

The effec­tive­ness of sub­pixel ren­der­ing varies depend­ing on the mon­i­tor and, to some extent, the way the font hap­pens to line up against the pixel grid. On both of my com­put­ers, it works beau­ti­fully, a major boost to the hor­i­zon­tal res­o­lu­tion. I’ve seen that headache-inducing aura on some screens, but peo­ple who com­plain that sub­pixel ren­der­ing is unequiv­o­cally a nui­sance should con­sider that their hard­ware may not rep­re­sent the typ­i­cal expe­ri­ence (i.e., no, your eyes aren’t more sen­si­tive than ours). (Dis­claimer: I don’t mean to sug­gest the author thinks this.)

I find myself occa­sion­ally switch­ing between no-hinting and slight-hinting. Nei­ther is quite right. What would be great (for sub­pixel users any­way) would be some­thing like “ver­ti­cal hint­ing only.” Using slightly larger font sizes than is stan­dard can make things look a whole lot bet­ter, if you’re will­ing to adjust to it. The more recent MS fonts are of excel­lent qual­ity and carry over beautifully.

bath · 19 Oct 2009

These instruc­tions are fan­tas­tic if you enjoy text that looks like it was writ­ten on a paper towel with a felt tip pen. If, on the other hand, you actu­ally read text and don’t just con­sider it dec­o­ra­tion, you’ll want to skip this and let the “crisp­ness” win out over the “aes­thet­ics” that gives the author the vapours.

Disciple of "Bob" · 20 Oct 2009

Do not lis­ten to this man! He means to deceive you!

@Bath: Actu­ally, choos­ing “None” in the hint­ing sec­tion of font appear­ances doesn’t truly remove hint­ing, it only reduces it to slight. Weird, huh?

Jay · 20 Oct 2009

How the gnome fonts set­tings inter­act with the fonts.conf set­tings? which one pre­vails? do I have to reset the gnome font settings?

bluegeek · 24 Mar 2010

Good ques­tion, bluegeek. ~/.fonts.conf is processed after the GNOME font set­tings, thus tak­ing prece­dence over them. So noth­ing should be affected by the GNOME font settings.

Jay · 24 Mar 2010

full­hintig and antialias off is the way to go!:)

walley · 26 Mar 2010

:SHAKES FIST:

Jay · 26 Mar 2010

EXCELLENT post. I came to this site after won­der­ing what “hint­ing” was and I had also noticed that there wasn’t nearly enough vari­a­tion between the avail­able font choices, so THANK YOU very much for clear­ing that up! After using Win­dows and Macs for so long, I, too, was very dis­ap­pointed with the “Kinder­garten” feel of the default Ubuntu font rendering.

I agree with BATH that it’s much eas­ier (and safer) to make most of these changes in the Appear­ance item in the Con­trol Cen­ter (Ubuntu 11.04). After swap­ping back and forth, I found DejaVu Sans Con­densed to be a great choice and it gave me slightly more screen real estate than Tre­buchet MS (sug­gested in another blog regard­ing instal­la­tion of the MS True Type fonts). For me, I needed the Sub­pixel smooth­ing as opposed to the Grayscale, which doesn’t work well against cer­tain back­ground colors.

imercado · 22 May 2011

Thank you so much for finally allow­ing me to turn off those ghastly coloured glows around my let­ters. Inci­den­tally, I was also able to turn off the LCD fil­ter, as I still have a CRT screen. My fonts look won­der­ful. (Gen­tian Book Basic for serif, Actor for sans-serif and Ubuntu Mono for mono­spaced, if you’re interested).

2Karl · 14 Apr 2012

Dude what did you expect with open source fonts. License com­mer­i­cal grade typefaces.…Why would any­one spend the time to hint and tune open source fonts for free? Win­dows, mac win­dows xp vs win­dows 7, flash, IE, Fire­fox all ren­der fonts differently.…I’ve never seen any open source fonts used in a pro­fes­sional env­ior­ment unless the com­pany is straight up cheap.

DA · 23 May 2012

Because I have no con­trol over what fonts web­sites use, and I want them to look as good as pos­si­ble for me. I’m not talk­ing about doing print design from an Ubuntu box, I’m just talk­ing about onscreen ren­der­ing for *all* fonts, free AND commercial.

Jay · 8 Jul 2012

Thank you a lost and Merry Christ­mas! You’re a life (and eyes) saviour!

Rafael Kafka · 25 Dec 2012

Looks like crap with­out hint­ing.
Ebin troll

lel · 22 Jun 2013

Bro, i Agree with every­thing you’re say­ing. Prob­lem is the shapes ren­der cor­rectly when hint­ing is off, but it’s so blurry. Slight hint­ing just ruins all the shapes. Actu­ally, all the font shapes are pretty much per­fect other than Hel­vetica Neue. Take a look here. Mac on top — Linux on bot­tom. Mac’s ver­sion is taller. http://goo.gl/kO4iVG

dannymichel · 10 Nov 2013

Yeah, that’s the trade-off, dan­nymichel. If no-hinting is too blurry for you, but slight hint­ing ruins the shapes too much, you might want to try no-hinting with RGB sub­pixel rendering.

Jay · 4 Dec 2013

Leave a Comment or Subscribe