Skip to main content

Web Safe Fonts

Understanding Web Safe Fonts​

Web Safe Fonts are types of fonts that are commonly available across most computer systems. These include Windows, Mac, Linux, etc. By using web safe fonts, you ensure that the text on your web page will look relatively the same across different devices and platforms. This is essential for maintaining the consistency and readability of your web content.

Web Safe Font Families​

There are five generic font families defined in CSS. These are:

  1. Serif
  2. Sans-serif
  3. Monospace
  4. Cursive
  5. Fantasy

Serif Fonts​

Serif fonts have decorative strokes or "feet" at the ends of their letters. They are typically used in print and are considered more traditional. Examples include Times New Roman and Georgia.

Sans-serif Fonts​

Sans-serif fonts do not have these decorative strokes. They are considered more modern and are often used in digital media. Examples include Arial and Verdana.

Monospace Fonts​

Monospace fonts have letters and characters that each occupy the same amount of horizontal space. These are typically used for coding or tabular data. Examples include Courier New and Lucida Console.

Cursive Fonts​

Cursive fonts mimic handwriting and often have highly stylized letters. They are not usually used for body text as they can be difficult to read in large blocks. An example is the font Comic Sans MS.

Fantasy Fonts​

Fantasy fonts are decorative fonts used for titles and headlines. They are not suitable for body text. An example is the font Impact.

Using Web Safe Fonts in HTML​

To use web safe fonts in HTML, you specify the font family in the CSS style for the element. For instance, to set the font for all paragraphs (<p> elements) to Verdana, you would use:

<style>
p {
  font-family: Verdana, Geneva, sans-serif;
}
</style>

In the example above, if Verdana is not available on the user's computer, the browser will try Geneva. If Geneva is also not available, it will default to any sans-serif font available.

It is good practice to end the font list with a generic font family, as we did with 'sans-serif' above, just in case none of the specified fonts are available on the user's computer.

Conclusion​

Web safe fonts are an essential part of creating a consistent and accessible web design. By using fonts that are readily available on most devices, you can ensure that your website's content is easily readable by all users. Make sure to always include a generic font family at the end of your font list to serve as a backup. Happy coding!