Making website text smooth

[Anonymous]

This website itself has smooth text. The text on my website looks a little crispy. How exactly does one make the text smooth? i’ve used CSS font-smoothing but that doesn’t do anything.

[chrisburton]

What webfonts are you using?

[Anonymous]

@chrisburton Sans-Serif, Arial, and a Google web-font called Oleo Script Swash Caps

[chrisburton]

@Jarolin Well, you shouldn’t be having issues with Arial so I’m assuming Oleo Script?

[chrisburton]

@Krish1980 While `font-smoothing` only works on Macs, `optimizeLegibility` has nothing to do with anti-aliasing. It enables OT features. I’m betting this has to do with a poor font choice for screen use.

[chrisburton]

PS and Fireworks have four different settings that render type. Browsers don’t have this option. There are many causes for a font not to render well in the browser. This can be anything from the type designer choosing to auto–hint (manual hinting is a long and tedious process) which usually causes the font to look poor, more noticeably in small sizes (you see this a lot with GWF). Different font files can cause this as well (TrueType vs PostScript). Chrome also has a bug not rendering anti-aliasing correctly. So there’s not always one “thing” at fault.

[chrisburton]

@cwork Can you post screenshots (PS vs Browser)?

[chrisburton]

Some kerning pairs are quite horrible.

[Anonymous]

The fonts appear pixelated and choppy. I’m thinking a very small text-shadow would do something.

[CrocoDillon]

I’ve tried the text-shadow trick as ‘faux anti-aliasing’, maybe it works for you but I didn’t like the result at all.

[chrisburton]

@Jarolin Link? And you said “fonts”, does that mean you’re having issues with Arial too?

[Anonymous]

Yes all of the fonts look choppy. The “Harol” looks choppy and so does every other text.
[link](http://reallycoolstuff.net/PROJECTS/harol/index.html “”)
Any solutions?

[Anonymous]

Still looking for a solution if anyone could help.

[chrisburton]

Oops, I forgot about this discussion. The reason the script appears choppy is because you are using it at small sizes. It’s a display face which are usually not optimized for this use. I also don’t see Arial being used but rather Pontano Sans. Pontano Sans is also a display face and even though the designer states you can use it for text type, it clearly doesn’t render well.

[Anonymous]

@chrisburton you’re right. I switched pentano-sans to arial and it’s not choppy at all. I guess ill just have to choose my fonts better. Thanks.

[Author]

Posts