How you format text characters is part of your marketing message.

More specifically, fonts play a crucial role in creating a unique brand identity. You likely notice particular “standard” fonts associated with many established brands, especially on their logo. For instance, Facebook, Amazon, Disney, and Microsoft all have distinct fonts that set them apart. Most are custom-made and variations of existing fonts.

In the digital age, the use of typography as part of your marketing strategy, branding, and web development also extends to online properties like websites.

Free Intro Guide to HTML & CSS [Download Now]

Not long ago, the same monotonous fonts appeared on almost every website, regardless of industry or brand. It was difficult to implement the use of unique fonts because there was no way to display them properly on all browsers.

Nowadays there’s a greater variety of web safe CSS and HTML fonts that you can use to better brand your digital marketing efforts.

Previously, if a user didn't have your particular website’s font installed on their computer, their browser would display a generic font as a backup, such as Times New Roman.

This left marketers in the dark about how their web pages were being displayed to the end-user, which could potentially harm the user experience. If a page’s content doesn’t perfectly adapt to a different font than the one intended, the design could break and result in issues with functionality.

Before I expand on these web safe fonts below, let's define some common terms that refer to different fonts.

  • Sans-serif refers to fonts without serifs, like Arial, Arial Black, Arial Narrow, Verdana, Trebuchet MS, Gill Sans, Noto Sans, and Optima
  • Serif refers to fonts with serifs, like Times, Times New Roman, Didot, Georgia, Palatino, Bookman, New Century Schoolbook, and American Typewriter
  • Monospace refers to fonts with letters that have the same width, like Andale Mono, Courier, Courier New, and FreeMono
  • Cursive refers to fonts that resemble handwriting, like Comic Sans MS, Apple Chancery, Bradley Hand, and Brush Script MT
  • Fantasy refers to decorative fonts, like Impact, Luminari, Chalkduster, Jazz LET, Blippo, Stencil Std, Marker Felt, and Trattatello

Now, let's break down these web safe fonts.

1. Arial (sans-serif)

web safe html css fonts arial

Arial is the most widely used sans-serif font on the world wide web. It was created for printers who wanted to use the popular Helvetica font without the licensing fees. Therefore, they’re virtually identical.

Arial Black is another related font in the Arial family. It's a bold version more suitable for headers.

Arial Narrow is another popular member of this font family. It has an intentionally generic design that makes it excellent for large bodies of text.

Members of the Arial font family are considered as the safest web fonts because they’re available on all major operating systems.

2. Verdana (sans-serif)

web safe html css fonts verdana

Verdana is popular both online and off. While it resembles Arial and Helvetica, it has a simple structure that makes the letters large and clear.

The typeface has elongated lines which may be incompatible with some design situations. Otherwise, it's a great alternative to Arial.

3. Trebuchet MS (sans-serif)

web safe html css fonts trebuchet ms

Trebuchet MS was designed by the Microsoft Corporation in 1996. It's commonly used for the body copy of websites.

4. Times New Roman (serif)

web safe html css fonts times new roman

Times New Roman is the Arial of serif fonts.

It's extremely popular and the primary font for Windows devices and applications. Browsers revert to it when the specified font can’t be displayed.

Technically, Times New Roman is an updated version of the Times newspaper font, which is used in print newspapers and, as a result, is one of the most recognizable fonts in the world.

5. Didot (serif)

web safe html css fonts didot

Source

This old French typeface was originally used for printing presses. It stands out for its elegant aesthetic and can add a formal quality to your text.

6. American Typewriter (serif)

web safe html css fonts american typewriter

Source

If you want to invoke a classic, nostalgic quality with your text — this is your ideal font. It imitates typewriter print and is great for body text.

7. Andale Mono (monospace)

web safe html css fonts andale mono

Source

Monospaced fonts have letters that are the same width, giving them a mechanical quality.

Andale Mono is the perfect example. It's a monospaced sans-serif font that can be displayed in various languages, making it especially suitable for multilingual web pages.

8. Courier (monospace)

web safe html css fonts courier

Courier is a serif font that closely resembles typewriter text. Many email providers use it as their default font. It's also widely used with coding application displays.

Courier New is in the same family of fonts, but despite its name, it's an old newspaper-style typeface that closely resembles Times New Roman.

9. Bradley Hand (cursive)

web safe html css fonts bradley hand

Based on Richard Bradley's handwriting, this calligraphic typeface has a casual, personal quality. Suggested use includes headings and short bodies of text.

10. Luminari (fantasy)

web safe html css fonts luminari

Source

Fantasy fonts are typically decorative and best used in headlines that only contain a few words. Luminari is a decorative font similar to medieval handwriting. Use it to add a gothic essence to your web pages.

Establishing a Web Typography Fallback System

As you consider these fonts, remember that there are no 100% safe web fonts. For example, consider the user who hates some system default font options and deletes them from their operating system.

Fortunately, CSS allows you to create a font family stack with similar fonts, which improves the chances of rendering a satisfactory appearance for both you and users.

Add several related font names to the font-family property to ensure universal compatibility with browsers and operating systems. This fallback system ensures that if a browser doesn't support your primary font, it can try the next one (and so forth).

Fonts should follow each other in terms of priority. The font you most want should appear first and a generic font family should end the list.

Here’s an example:

p {

Font-family: “Arial”, Helvetica, sans-serif;

}

Use These Web Safe CSS and HTML Fonts for Your 2020 Designs

Fonts selection is not a small detail to marketers. Choosing a representative style ensures that your message is communicated clearly, represents the brand, and ultimately impacts the campaign. As such, it’s important to be aware of how your fonts appear on different browsers and devices.

Before you publish your website, make sure to test your font stack on various browsers to ensure compatibility.

New Call-to-action

 css introduction

Originally published Mar 17, 2020 9:33:46 AM, updated May 15 2020

Topics:

Website Development