Which fonts are best suitable for websites?
In images and flash content any font can be used. In that sense any font is web safe. Unfortunately search engines, like google, are still not able to properly index text displayed in images or flash. If you want the text on your website to be properly indexed by search engines it needs to be in displayed in HTML. In HTML only the fonts available to the browser can be rendered properly. If the font is not available in the browser it will display the text in the default font, which is times in most browsers. The fonts you can use safely are the ones that are available in all browsers on all operating systems. As this will be a list of zero fonts I will have to rephrase that: The fonts you can use relatively safe are the ones that are available by default in the most common operating systems.
There are several list of relatively web safe fonts available on the web. The best examples probably are w3schools.com & ampsoft.net. These both show fonts that are available by default in most operating systems. Being available to the browser however does not mean that the font will be displayed nicely. Unfortunately web safe fonts are not displayed in exactly the same in the many different browsers / operating system combinations present are out there. The rendering of fonts in the three most used browsers differs significantly for anyone who is into typography. Using HTML fonts will never fully satisfy the font fetishists because they will not be rendered smoothly in firefox and chrome. When using small (under 12px) italic fonts it is the most clear that IE is better at smoothly rendering web safe fonts.
Georgia, serif
| Current browser | IE | FireFox |
|---|---|---|
| This is regular text This is italic text This is bold text |
 |
 |
“Palatino Linotype”, “Book Antiqua”, Palatino, serif
| Current browser | IE | FireFox |
|---|---|---|
| This is regular text This is italic text This is bold text |
 |
 |
“Times New Roman”, Times, serif
| Current browser | IE | FireFox |
|---|---|---|
| This is regular text This is italic text This is bold text |
 |
 |
Arial, Helvetica, sans-serif
| Current browser | IE | FireFox |
|---|---|---|
| This is regular text This is italic text This is bold text |
 |
 |
Arial Black, Gadget, sans-serif
| Current browser | IE | FireFox |
|---|---|---|
| This is regular text This is italic text This is bold text |
 |
 |
“Comic Sans MS”, cursive, sans-serif
| Current browser | IE | FireFox |
|---|---|---|
| This is regular text This is italic text This is bold text |
 |
 |
Impact, Charcoal, sans-serif
| Current browser | IE | FireFox |
|---|---|---|
| This is regular text This is italic text This is bold text |
 |
 |
“Lucida Sans Unicode”, “Lucida Grande”, sans-serif
| Current browser | IE | FireFox |
|---|---|---|
| This is regular text This is italic text This is bold text |
 |
 |
Tahoma, Geneva, sans-serif
| Current browser | IE | FireFox |
|---|---|---|
| This is regular text This is italic text This is bold text |
 |
 |
“Trebuchet MS”, Helvetica, sans-serif
| Current browser | IE | FireFox |
|---|---|---|
| This is regular text This is italic text This is bold text |
 |
 |
Verdana, Geneva, sans-serif
| Current browser | IE | FireFox |
|---|---|---|
| This is regular text This is italic text This is bold text |
 |
 |
There are a few ways to make sure your font does render the same for every visitor of you website.
- You could make a Flash website or put your text into images. As Google and the other searchangines do not properly index text in Flash or image files I would strongly advise againt this option. If the looks of your site are more important to you than traffic from organic search this could be an option.
- CSS3 supports the ‘
src’ descriptor for fonts. This makes it possible to make extra fonts available to the browser. Fonts that can be used for free: sil.org & Google & TypeKit - JavaScript Libraries that replace HTML text with Flash: sIFR
- JavaScript Libraries that use <canvas> to draw the font (HTML5 only): Cufon, TypeFace
- JavaScript Library that uses php to generate images: FaceLift
further reading:
