CODEWITHSUNDEEP
cssfontsantialiasing
John Hunt
John Hunt

Reputation: 4072

Photoshop style anti aliasing style in css

I'm in the process of setting up a stylesheet for a PSD mockup we have of a new website. Most of the text in the mockup uses the 'sharp' anti aliasing method from photoshop.

What's the best way to re-create these kind of photoshop anti aliasing methods? Setting different font-weights seem way off..

Btw, the font is Arial so no funny @font-face stuff going on here

Upvotes: 1

Views: 3121

Answers (4)

Frederik Wordenskjold
Frederik Wordenskjold

Reputation: 10221

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.

Upvotes: 2

jrn.ak
jrn.ak

Reputation: 36609

The font-smooth CSS3 property may be useful:

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit

Upvotes: 1

Henry Merriam
Henry Merriam

Reputation: 824

You can use a script-based library (cufón comes to mind) to customize anti-aliasing and other text rendering effects. Note that most (if not all) such solutions are only appropriate for headers and whatnot, not the full body text.

Upvotes: 0

alex
alex

Reputation: 490123

Because you website is going to be shown in multiple browsers in multiple OS's, there is no way to get a consistent font display. I think it is down to the OS with regards to font smoothing.

If you require it, render the portions as an image or use Cufon or sIFR.

What I have also done in the past, if the font is a little rough, add a subtle CSS3 text-shadow which makes it look much smoother.

Upvotes: -1

Related Questions