Web Safe Fonts

Background on Font?

In typography, a font (also fount) is traditionally defined as a complete character set of a single size and style of a particular typeface. There are basically two types of fonts there are serif and sans serif fonts. Serif fonts are fonts that have fine cross lines at the ends of the letters. Sans serif (French for without serifs) are fonts that don’t have anything at the end of the letters. The most common serif font is Times New Roman and just happens to be the default for most windows-based browsers. Mono-spaced fonts are fonts that have the same amount of space between them for all of the letters.

What are Web safe fonts?

Every personal computer has a default set of fonts installed by the operating system for its use. It’s possible to install additional fonts on your own. However, not all font sets are created equal. Different computers can have very different sets of fonts installed, and most casual computer users never know the difference.

When you are designing a Webpage, you need to keep in mind that if you use a font on your page that a visitor doesn’t have then that font will render differently (and often unattractively) on the visitor’s machine.

So, how do you make sure that your fonts will look good on the largest number of computers out there?  The answer is use Web safe fonts. Web safe fonts are a set of highly common fonts that come installed on just about every computer out there.

Why use web safe fonts?

Every Web designer should use Web safe fonts. If you use a font on your page that your visitor doesn’t have installed, their browser will pick a fallback font that you may not intend to appear on your page. Often, the result is ugly text that is not at all pleasing to read. Use of Web safe fonts make sure your fonts are always easily read by your users and enables readability of your site by the largest mass of internet users. A Website with no readers is a waste.

How to use Web safe fonts?

Include Web safe fonts in your CSS with font or font-family rules.  For example, a CSS rule for your font family may look like this :

font-family: Arial, Helvetica, sans-serif;

List of Web safe fonts