CSS3 Font Smoothing

[kneath]

Explaining how subpixel rendering technically works seems like the worst possible argument against something that exists purely for aesthetics. Just because something is more technically complicated does not make it a better option.

There are plenty of situations in which things are far less readable using subpixel rendering. Examples:

WITH subpixel: http://share.kyleneath.com/captures/Your_Dashboard_-_GitHub-... WITHOUT subpixel: http://share.kyleneath.com/captures/Your_Dashboard_-_GitHub-...

Furthermore, so long as the fonts are ~14px+ and sans-serif I think non-subpixel rendering makes the design cleaner and more aesthetically pleasing. Since I started slowly rolling it out to GitHub, I've been getting nothing but compliments. Case in point: http://github.com/training — I've had several people email me to ask me how I got the fonts to look so good on this page. The answer? The majority of the text uses antialiased fonts instead of subpixel.

Do I use this effect everywhere? Of course not. That's what being a good designer/developer being is about — surveying your options and choosing the one you feel is the best fit.

Now, you want to talk about font-rendering? Let's talk about monospaced fonts and Ubuntu for a minute because I've got a few rants down that road. Ubuntu's font-smoothing is nearing a crime against humanity. -webkit-font-smoothing doesn't have jack on it.

[fadeyev]

Yes, but the whole point of subpixel rendering is aesthetics. Its job is to make fonts look smoother and crisper, and in majority of cases it does just that. I'll accept that OS X's rendering of bold fonts on dark backgrounds is terrible, which is where the text-shadow trick comes in handy (or antialiasing, which I think is the same thing in that case), but I'm not sure that for body fonts this is the right way to go. I see this technique popping up here and there and in many cases the fonts end up looking worse. Sure, it's up to the designer to decide what's best--it always is--which is why it's good to have this discussion so that people can better understand which choices to make.

[teilo]

This title is wrong. This is not a CSS3 feature.

Is it too much to ask that everyone stop calling any and every engine-specific CSS extension "CSS3"?

[naner]

Why is this feature even available in webkit? I can't imagine any situation where I'd want a particular website to override OS font smoothing settings.

[mortenjorck]

Some fonts (especially less-common ones now available through @font-face) just get hinted too strongly with subpixel AA. I wouldn't use this property in body text (if your body font doesn't hint well at that size, you need a new font), but I've used it before on title copy and it really does make an improvement.

[Groxx]

No?

How about hand-made pixel-based fonts? Or how about some of the sub-pixel fonts out there: http://typophile.com/node/61920

[petercooper]

Right on. I'm glad someone with more gravitas than me came and said it. I already did in a slightly cruder way: http://peterc.org/blog/2010/235-webkit-font-smoothing-antial...

[ionfish]

A few days ago I added the following rule to my Safari stylesheet:

    * {-webkit-font-smoothing:inherit!important;}

Frankly I think the whole idea is dangerous; antialiasing settings are not something that website authors should be able to change.

[jws]

Subpixel antialiasing can have more chroma aberrations at the horizontal edges, particularly at high frequencies. You night wish to stop it if that is a problem.

Personally, I cheer the day when we all have 300 dpi displays and the problems melt away.

[audionerd]

The recommendations from html5boilerplate.com actually include this:

  html { -webkit-font-smoothing: antialiased; }

My point being: be sure to read and understand resets/boilerplates before including them in your own code.

[limedaring]

Why do people write articles like this that depend on visuals without any visuals to prove their point?

For examples of how the three types of font-smoothing choices look, try this article: http://maxvoltar.com/archive/-webkit-font-smoothing

[chubs]

While we're on the topic of font smoothing, does anyone know of a way to make the font smoothing on my PC look as nice as it does on my Macs? Its generally the first thing i notice when i go home at night and check my email on my mac: how much nicer the fonts look.

[jonah]

Try Microsoft's ClearType Tuner powertoy.

Edit: MS ClearType info including links: http://www.microsoft.com/typography/ClearTypeInfo.mspx

[sp332]

The only way I know of to get Mac rendering is to use Safari for Windows. It's got an option to use Mac-style rendering or Windows' Cleartype.

[Sephr]

Use DirectWrite.

[Groxx]

> follows link through to the "good article"

Bleh. Why do people like non-subpixel-rendered fonts? There's so much less clarity. If you don't like the increased weight, then lower the weight, not the AA. At least the main article gets the point.

[mikeklaas]

This setting gives control to the designer to affect perceived text weight (which for one, allows sites to render more consistently on Windows and OS X). You might not like it, but I have a hard time seeing it as so heinous that it is worth excoriating

[cmelbye]

I used the "antialiased" setting a few days ago so that my finished HTML page would look more closely like my Photoshop mockup. The default setting looked too thick, and I was quite happy when I found "antialiased".

[hippich]

Why? I know better what type of font smoothing works best on my hardware!