html

Web safe fonts in CSS | Explained

Fonts work as trademarks of any website as these fonts provide a splendid visual appearance to any website. There is always a prospect that the fonts that work magnificently on one platform/device may not be effective for other platforms. Therefore, web-safe fonts are always the developer’s first choice.

The fonts that are accessible to almost all the devices, and supported by most of the browsers are referred as web-safe fonts. These fonts are globally installed on all browsers and devices. This write-up will present some notable web-safe fonts along with their generic font families:

  • Serif (Times New Roman, Georgia)
  • Sans-serif (Arial, Calibri, Helvetica)
  • Cursive (Script MT)
  • Monospace (Courier)

So let’s start!

Serif

The fonts that belong to the serif family have tiny decorative strokes at the edge of the letter.

Times New Roman

An extremely popular font that belongs to the serif family and is used as the primary font for windows applications. It is most commonly used in the research thesis, articles, and printed media like newspapers.

Example

The below-given snippet will let you understand how to use Times New Roman font in HTML/CSS

HTML

<p>An example of Times New Roman fonts </p>

CSS

p {

font-family: 'Times New Roman', serif;

}

Following will be the resultant output for the above snippet:

Georgia

It is a stylish font that belongs to the serif family and is very much readable at various font sizes so, considered as the perfect option for responsive mobile designs:

HTML

<p>An example of Georgia fonts </p>

CSS

p{

font-family: Georgia, serif;

}

The above code snippet shows the following output:

Sans-serif

Unlike serif fonts, they don’t have any stroke instead these fonts are plain letters. San-serif fonts are considered as easily readable fonts as compared to any other font family.

Arial

The Arial fonts and their family members are considered the safest web fonts and the reason behind it is very simple i.e. the Arial fonts are easily available on all the platforms/operating systems.

Example

Consider the below-given piece of code which describes how Arial fonts look:

HTML

<p>An example of Arial fonts </p>

CSS

p{

font-family: Arial, sans-serif;

}

In the above code, we write “san-serif” as the fallback because no font is hundred percent web-safe. Following will be the result for the above code:

Helvetica

It is one of the most commonly used fonts that belong to the sans-serif family. It is considered as the commercial font and it’s very popular among designers:

HTML

<p>An example of Helvetica fonts </p>

CSS

p{

font-family: Helvetica, sans-serif;

}

Above-given snippet displays the following result:

Calibri

It’s the standard Microsoft font since the release of MS office 2007 and has a very elegant look.

HTML

lt;p>An example of Calibri fonts </p>

CSS

p{

font-family: Calibri, sans-serif;

}

The above code snippet produces the following result:

Script MT

It is one of the most popular fonts of the cursive family and is very much similar to the human handwriting

HTML

<p>An example of Script MT fonts </p>

CSS

p{

font-family: 'Script MT', cursive;

}

The output of the above code snippet will appear like this:

Courier New

It is a very commonly used font of the monospace family which is mostly used to show the programming codes and in addition to this most emails used courier new as a default font.

HTML

<p>An example of Script MT fonts </p>

CSS

p{

font-family: 'Courier New', monospace;

}

The above-given snippet generates the following output:

Conclusion

Web-safe fonts are universally installed fonts and can be displayed safely on any device. There are numerous web-safe fonts from sans-serif, serif, monospace, and cursive families available on almost every device. In this article, we have learned about some widely used web-safe fonts and performed some practical implementation of these fonts in various fields.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.