Sophisticated, smooth webdesign requires smooth fonts, preferably anti-aliased clear-types. Different Browsers and Operating Systems made it difficult to find a good font, that look smooth and beautiful on all the hybrid systems outhere. In this article, i provide some hints on howto deal with this.
Nathan Olmstead wrote in article about the best techniques for font implementation in webdesign. He introduced four technologies that generally still represent the current possibilities to overcome above described problem:
- Font Stack
Describe the order of fonts to use with CSS or HTML
Due to compability, the result is using the same 8 fonts again, again and again. - Image replacement
Replace a headline by an image with CSS e.g. as a background-image - Font Embedding with CSS
Future techniques for fonts in the web; Guaranteed to display desired font (with css turned on). But be carful not have the rights to use a specific font. Use free/open-source fonts instead. - Font Embedding with Javascript
An alternatice way of embedding fonts; less coding needed.
If you still prefer to use the Font Stack, as decribed by Mr Olmstead in his first paragraph, i recommend the following for a great overview of browser / OS safe font stacks:
- http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
- http://www.webveteran.com/blog/index.php/web-coding/appearance-of-browser-safe-fonts/
Other great articles i found, about hints for embedding own fonts on your webserver:
- smashingmagazine.com – the font face rule revisited and useful tricks
- snook.ca – becoming a font embedding master
Moreover, i found a commercial soultion that offers large font collections and all you need to do is to embed some code into the head of your source code.