Comments on: CSS properties that affect type rendering

By: Tim Brown

Tim Brown — Mon, 31 Jan 2011 01:48:29 +0000

Oh, I totally forgot about this experiment Alex Pankratov pointed out to me. Alex uses multiple text shadows to, "mask rasterization artifacts (as those in "e", "x" and "s") and make [text] look smoother and a bit more substantial in general."

By: Tim Brown

Tim Brown — Fri, 28 Jan 2011 17:17:30 +0000

In reply to James Williamson. Thanks James. I should have remembered to check Zoltan's site for tips. He's always got something up his sleeve.

By: Tim Brown

Tim Brown — Fri, 28 Jan 2011 17:15:46 +0000

In reply to Roxanne Ready. Crazy, Roxanne! Link it up here when you launch.

By: Roxanne Ready

Roxanne Ready — Fri, 28 Jan 2011 17:08:22 +0000

I noticed the rotation rendering for the first time just the other day when working on my site redesign (not yet live). I have navigation elements rotated and their backgrounds changing color slightly when moused over, and the text actually re-renders when the background color changes, making it appear to wiggle. I’m going for sort of an 8bit old school feel with the site, so I think it still works out, but I certainly wouldn’t want thst effect in most designs.

By: Russell Bishop

Russell Bishop — Fri, 28 Jan 2011 11:49:26 +0000

Some interesting thoughts, especially towards text rotation (what a clever idea to flip it back!)

Contrast is also very important, I’m noticed that some big brands have used them very effectively when it comes to showing off their type (some chunky names on chunky black backgrounds).

Thanks for the advice, hope you’ll include Peter’s hat-tip to text-rendering.

By: GavChap

GavChap — Fri, 28 Jan 2011 11:20:08 +0000

I want to know how to stop IE7 from removing the anti-aliasing when you animate things in jQuery, other browsers, fine, IE looks terrible.

By: Hal

Hal — Thu, 27 Jan 2011 19:23:27 +0000

Text-shadow forces text antialiasing in Chrome on Windows.
My Typekit fonts usually look all jagged on windows machines, so I use text-shadow: 1px 1px #fff; (replace the color with the background color). The shadow has no effect on Mac and makes a great improvement in smoothness on Windows.

By: Kuba Skoczek

Kuba Skoczek — Thu, 27 Jan 2011 19:15:21 +0000

If you’re having problems with font antialiasing in firefox on widnows xp, try:
text-shadow 0 0 0 color_of_your_font

By: Michael Burgstahler

Michael Burgstahler — Thu, 27 Jan 2011 12:36:57 +0000

@David,

you’ve asked about the “poor-man-skinning” of fonts due to odd renderings from text-shadow:
I can report that it’s still true for today, even in the newest WebKit browsers!

The thinning effect of text-shadow kicks in whenever you set the blur property to s.th. higher than 0px.

So if you want slightly thinner font rendering, set a text-shadow of 1px width and 1px blur with the same color as your background.

By: Phil Powell

Phil Powell — Thu, 27 Jan 2011 11:50:06 +0000

I’d really love to know what it is that causes the baseline glitches when rotating text; and why it seems to be confined to the use of @font-face fonts. From what I can tell, it seems to be GPU related.

Really good to have this article as a reference point when seeking better rendering though – thank you! Some really useful tips and pointers in the comments too.