Font Families

Anyone could tell you that the fonts used in a webpage are extremely important to the user's experience. If you decide to type in Webdings no one, except those who for some reason memorized all the characters, could read it.

Fonts are categorized by what are called font families, these are groups of fonts that share similar characteristics and uses. When choosing a font family it is important to understand the pros and cons of each in order to make the best choice when designing a web page. Choosing the wrong font family can damage the look and usability of the text itself.

The most used and most recommended types of fonts are those in the Serif and Sans-Serif font families. They are easy to read, and some of them were purposely developed to display well on computers, these are Verdana, Tahoma, and Georgia (Felke-Morris, Ed D., 2016, p. 154).

While these are the most recommended, there are many different fonts that could be used and serve different purposes. It is up to the individual designing the site as to whether they want to utilize these different types. Be sure to know that if you specify a font family for a web page, the browser will load the default font of that family.

Font Family Category Font Family Description
serif Serif fonts have small embellishments on the end of letter strokes; often used for headings.
sans-serif Sans-serif fonts do not have serifs; often used for web page text.
monospace Fixed-width font; often used for code samples.
cursive Hand-written style; use with caution; may be difficult to read on a web page.
fantasy Exaggerated style; use with caution; sometimes used for headings; may be difficult to read on a web page.

(Felke-Morris, Ed D., 2016, p. 154)


Web Safe Fonts

Even if you choose the correct font family you must understand "web safe fonts". Not every font is installed on a computer by default, some are additions that are not standard. If you do not take this into account then the user might go to your page, and see something completely different than you do.

This could have a serious impact on your pages style, since all but monospace are not guaranteed to have the same font width and therefore will change the way the page is formatted. Some browsers on older OSs may not substitute for a different font.

This means it is crucial to put the font you want first, and then at the end list the font family you would like them to see if they do not have it installed. If they do not have any of the fonts you named it will go back to the default font based on the font family you have chosen.

Below is an image from http://www.ampsoft.net/ that shows the "web safe fonts" that are pre-installed on the Windows and Mac OS. They are shown as :

Windows fonts(Black) / Mac fonts(Blue) / Font family(Gray)

Font-list-WinXP-Firefox.png