Web Development

Typography and Fonts in webdesign

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:

Other great articles i found, about hints for embedding own fonts on your webserver:

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.