Question

I always run into the same problem when creating web pages. When I add a font that is larger then about 16-18px it looks terrible. Its jagged, and pixelated. I have tried using different fonts and weights, however I haven’t had much luck there.

Note: Its only in windows that it is like this. Mainly in Opera and FF also in IE7 but not quite as bad. In Linux the font looks good. I haven’t looked at a Mac.

What do you guys do to fix this? if anything. I noticed that the titles here on SO are also pretty jagged but they are just small enough not to look bad.

Answer 1

There is nothing you can do to force the user to change the way that their operating system renders fonts. If it is that big a deal to you then you can replace the large headings with images, this allows you to control exactly how the font is rendered (and ensures that the heading looks exactly as you wish, even if the user doesnt have your suggested font installed).

If you do this make sure that you provide an alternative text representation for those who do not see images. I tend to use CSS to show a background image, and hide the contents of the heading. Like this.

<style>     h1     {         height: 32px;         width: 100px;         background: url('path/to/image')     }      h1 span     {         display: none;     } </style>  <h1>     <span>        Heading Text     <span> </h1> 

To be honest this does seem like overkill if it is on all large text. And be aware that it will increase the amount of data that your clients need to download. However for a large heading this method can lead to something that looks nicer than OS rendered text.