How to Apply Font Anti-Alias Effects in CSS

How to apply font anti-alias effects in CSS?

here you go Sir :-)

1

.myElement{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

2

.myElement{
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

CSS: @font-face anti aliasing

With CSS3, you can use the font-smooth property, although antialiasing will still be controlled by the system defaults. If you really need to force a clean antialiasing no matter what the OS is, you have to use sIFR which automatically replace the text with a Flash component.

Forcing anti-aliasing using css: Is this a myth?

No, there's not really any way to control this as a web developer.

Small exceptions are that you can do some fake forcing of anti-aliasing by using Flash through sIFR, and some browsers won't anti-alias bitmap/pixel fonts (as they shouldn't, more info: Anti-Aliasing / Anti-Anti-Aliasing).

Also, as Daniel mentioned, it's ideal to be using em units for all fonts, see The Incredible Em & Elastic Layouts with CSS for more information about this.

@font-face anti-aliasing on windows and mac

This just looks like the normal ugly way fonts are rendered in WinXP. Some (IMO: misguided) people even prefer it.

To get anti-aliasing for desktop fonts in general on XP you have to turn it on, from Display Properties -> Appearance -> Effects -> Use the following method to smooth edges of screen fonts -> ClearType. The default setting “Standard” is the old-school Windows “font smudging” technique that only bothers to turn on at larger font sizes, and then often makes a mess.

IE7+ has an option—on by default—to always use ClearType anti-aliasing to render fonts in the web browser. Other web browsers will respect the user's configured font rendering method. It is a shame that so many people still have this beneficial setting turned off, but it's not really your problem.

(There is nasty hack to make Chrome perform some anti-aliasing on text, which is:

text-shadow: 0px 0px 1px rgba(0,0,0,0);

but I seriously wouldn't recommend it.)

One thing you can do when the “Use the following method...” setting is set to “Standard”, to try to make the font get some form of anti-aliasing, is to check that the font in question doesn't have a GASP table telling old-fashioned TrueType renderers to disable anti-aliasing at particular font sizes. You can change the GASP table using a font editor or with the ttfgasp.exe command-line tool.

Photoshop style anti aliasing style in css

A simple alternative is a text-shadow, which is a css3 property:

#foo {
    /* text-shadow: [color] [horizontal offset] [vertical offset] [blur] */
    text-shadow: #fff 0 1px 0;
}

Play around with the settings; you can make a very sharp end edgy looking font smooth, by experimenting with different colors and blur values.

Anti-aliased font in HTML page

a) Of course you can use browser detection. The easiest way to do this is probably using jQuery's browser method. (jQuery is an awesome JavaScript library that makes a lot of JS-development easier in case you haven't heard)

Depending on what browser (or OS) results you get, you could present the user with different solutions, from normal text to something like a Flash solution.

However, I advise against it. Things look better on new machines than old ones. That's just the way it is, which is why I recommend against spending precious time on minor glitches in older browsers. -- Unless users with older browsers are your main demographic of course. In this case, how about you just do it in Flash altogether? No use coding up two solutions if one always works, right?

b) You can in fact create anti-aliased text via JavaScript. Have a look at my project Die Stimme Gottes ("Voice of God" -- not for the religiously squeamish) for an example. In this project, I used the excellent typeface.js for this.

c) Just use CSS, maybe?

h1.welcome {
    background: url('the-welcome-image.png') no-repeat;
    color: transparent;

}

how to access anti aliasing method of a font with CSS

No, there is no way to control the rendering of text in that way. Those are Photoshop specific settings as it has its own rendering engine, they aren't even available to other programs.

Actually, different browsers will render the text in different ways, and even the same browser on different computers will render it differently depending on the system settings.

If you make the page look exactly like the design in one browser, it will look rather different in another browser. You should normally test it in different browsers and try to make it look as close as possible to the design in most of them, and make sure that it's not too far from the design in any of them.

Does CSS support text anti-aliasing such as crisp, sharp etc yet?

Not only is it not possible, but different browsers on the market enforce different antialiasing settings, meaning that you can't get consistent results, even if they are not what you want.

For a good article on how the various browsers deal with font rendering, I'd suggest reading this: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

Why isn't it advices to use anti-aliasing on all elements?

anti-aliasing is not the perfect method for font-smoothing.

According to this article,

Feel free to use it on light text on dark backgrounds, feel free to use it to fix custom font rendering on Windows or to style specific bits of text on the page to make it look more slender, but for main portions of text where readability is paramount please leave the default setting alone and let the operating system handle the smoothing.

---

Related Topics