See all Insights

Web Design 101: Jagged Text

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.

It would be great if all browsers applied anti-aliasing to text so there wouldnt 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.

Related Posts