Skip navigation
BLOG  |  DECEMBER, 2008

Web Design 101: Jagged Text

December 16, 2008 at 2:44 PM
by

Question: Why does the text on my site look rough or jagged?

Answer: Any editable text on a web page (you can highlight it with your cursor) is HTML text. HTML text is generated by your web browser and displayed with uniformly-colored pixels, so any line or edge that is not 90 degrees is built with a stair-step pattern or "jagged" edge (as if it had been built with Legos).

HTML text is rendered differently depending on the browser and the operating system (see browser examples below). On the Mac, and in some Windows browsers, text renders cleanly because the browser applies a smoothing technique called anti-aliasing to the letter forms, eliminating the jagged edges.

aliased vs. anti-aliased text

It would be great if all browsers applied anti-aliasing to text so there wouldn't be ugly web type (some day, maybe). One way to eliminate some of the jagged edges is to avoid using italicized type, but this also eliminates one method of text styling and makes it more difficult to subtly distinguish one piece of content from another.

HTML text examples


Comments