

CSS3 Font Smoothing - chunkyslink
http://www.usabilitypost.com/2010/08/26/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-...](http://share.kyleneath.com/captures/Your_Dashboard_-
_GitHub-20100826-175340.png) WITHOUT subpixel:
[http://share.kyleneath.com/captures/Your_Dashboard_-
_GitHub-...](http://share.kyleneath.com/captures/Your_Dashboard_-
_GitHub-20100826-175319.png)

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.

~~~
audionerd
The text-shadow hack stopped working when Snow Leopard was released.

-webkit-font-smoothing seems to be a specific solution to the same problem.

via: [http://orderedlist.com/our-writing/resources/html-
css/thinni...](http://orderedlist.com/our-writing/resources/html-css/thinning-
text-in-webkit-safari/)

~~~
fadeyev
It hasn't stopped working, it just behaves differently. It stopped working on
shadow blur amount of 0, but it works at 1px or more.

------
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.

~~~
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>

~~~
ori_b
How about just using the fonts that I told the system to use, the way I told
it to use them? I installed and selected those fonts for a reason, thank you.

~~~
daychilde
If you've configured your browser to override webpage-specified fonts with
your choices, it seems to me that anti-aliasing is surely not going to be high
on your list of concerns...

------
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...](http://peterc.org/blog/2010/235-webkit-font-
smoothing-antialiased-is-shit.html)

------
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.

~~~
Sephr
Use DirectWrite.

~~~
chubs
I mean for my applications, not just for things i want to write for myself.

------
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!

