Web Safe fonts

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
firefox-“times-new-roman”-times-serif

Arial, Helvetica, sans-serif

Current browser IE FireFox
This is regular text
This is italic text
This is bold text
ie-arial-helvetica-sans-serif firefox-arial-helvetica-sans-serif

Arial Black, Gadget, sans-serif

Current browser IE FireFox
This is regular text
This is italic text
This is bold text
firefox-arial-black-gadget-sans-serif

“Comic Sans MS”, cursive, sans-serif

Current browser IE FireFox
This is regular text
This is italic text
This is bold text
ie-“comic-sans-ms”-cursive-sans-serif firefox-“comic-sans-ms”-cursive-sans-serif

Impact, Charcoal, sans-serif

Current browser IE FireFox
This is regular text
This is italic text
This is bold text
ie-impact-charcoal-sans-serif firefox-impact-charcoal-sans-serif

“Lucida Sans Unicode”, “Lucida Grande”, sans-serif

Current browser IE FireFox
This is regular text
This is italic text

This is bold text
ie-“lucida-sans-unicode”-“lucida-grande”-sans-serif firefox-“lucida-sans-unicode”-“lucida-grande”-sans-serif

Tahoma, Geneva, sans-serif

Current browser IE FireFox
This is regular text
This is italic text
This is bold text
ie-tahoma-geneva-sans-serif firefox-tahoma-geneva-sans-serif

“Trebuchet MS”, Helvetica, sans-serif

Current browser IE FireFox
This is regular text
This is italic text
This is bold text
ie-“trebuchet-ms”-helvetica-sans-serif firefox-“trebuchet-ms”-helvetica-sans-serif

Verdana, Geneva, sans-serif

Current browser IE FireFox
This is regular text
This is italic text

This is bold text
ie-verdana-geneva-sans-serif firefox-verdana-geneva-sans-serif

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:

Leave a Reply

Your email address will not be published. Required fields are marked *