CSS3 Font Smoothing(usabilitypost.com)
usabilitypost.com
CSS3 Font Smoothing
http://www.usabilitypost.com/2010/08/26/font-smoothing/
13 comments
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.
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...
-webkit-font-smoothing seems to be a specific solution to the same problem.
via: http://orderedlist.com/our-writing/resources/html-css/thinni...
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.
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"?
Is it too much to ask that everyone stop calling any and every engine-specific CSS extension "CSS3"?
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.
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.
No?
How about hand-made pixel-based fonts? Or how about some of the sub-pixel fonts out there: http://typophile.com/node/61920
How about hand-made pixel-based fonts? Or how about some of the sub-pixel fonts out there: http://typophile.com/node/61920
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.
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...
I see you're definitely not a typography nut.
Hey, I know. Comic Sans is on essentially every computer. We should all just use that.
Hey, I know. Comic Sans is on essentially every computer. We should all just use that.
[deleted]
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...
A few days ago I added the following rule to my Safari stylesheet:
* {-webkit-font-smoothing:inherit!important;}
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.
Personally, I cheer the day when we all have 300 dpi displays and the problems melt away.
The recommendations from html5boilerplate.com actually include this:
html { -webkit-font-smoothing: antialiased; }
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
For examples of how the three types of font-smoothing choices look, try this article: http://maxvoltar.com/archive/-webkit-font-smoothing
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.
Try Microsoft's ClearType Tuner powertoy.
Edit: MS ClearType info including links: http://www.microsoft.com/typography/ClearTypeInfo.mspx
Edit: MS ClearType info including links: http://www.microsoft.com/typography/ClearTypeInfo.mspx
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.
> 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.
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.
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
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".
Why? I know better what type of font smoothing works best on my hardware!
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.