typography for developers

Question

I'm no designer, I can't understand it, I love code and code has been my life.

For a non designer, typography is a huge 7 head serpent, and I would like to know, if there is something I can do to make my typography on the web better.

This is what I can do:

witch is nothing more than Blueprint CSS and

h1 {
    font-size: 2em;
}

But I'm hating the Aliasing on the Arial font, below it's a portion of the image above at 300% zooming

From a developer side, what can I do to make my web pages look better?

I have tried font-smooth: always; but without any luck.

Answer 1

Font rendering varies from browser to browser and OS to OS. You can adjust the letter spacing and sizes and things like that, but there's nothing you can do, in CSS or JS code, to change how the edges are rendered or how jaggy they are.

Answer 2

maybe change another font? http://www.google.com/webfonts

Answer 3

The rendering of the font depends on how the web browser is implemented. Either the browser handles the rendering with its own implementation, or the browser uses the operating system's native text rendering.

You'll notice that the text is rendered differently on Mac OS X, Ubuntu (Linux) as well as on Windows.

Here is a collection of links about font rendering on different OS's, if you wish to know more about it:

• Windows uses something they call ClearType.
• Font rasterization
• Comparison between different OSs
• Jeff Atwood has written about this as well, here too.