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 established brands, especially in 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.

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, however, there’s a greater variety of web safe CSS and HTML fonts that you can use to aid your website development process and better brand your digital marketing efforts.

Free Intro Guide to HTML & CSS [Download Now]

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.

Web safe fonts solve this issue and are the new standard in web design. So, let’s now review some of the most common options.

First, let's define some common terms that refer to different fonts.

  • Serif fonts contain serifs, small decorative strokes that come off the main body of the letter. Serif fonts are easier to read in physical; printed formats, as the serifs lead the viewer’s eyes better from character to character.
  • Sans-serif fonts do not have serifs. Sans-serif fonts are easier to read on screens, so they are therefore much more common in website copy.
  • Monospace refers to fonts that have equal spacing between characters.
  • Cursive refers to fonts that resemble handwriting.
  • Fantasy refers to highly stylized decorative fonts.
  • MS stands for Microsoft and indicates that the font was created for digital devices by Microsoft.

1. Arial (sans-serif)

web safe html css fonts arial

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

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

2. Arial Black (sans-serif)

web safe html css fonts arial black

Arial Black is another related font in the Arial family. It's a very bold version more suitable for headers, decorative text, and emphasized text. However, its prominence means designers should use it strategically and carefully.

3. 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. Some of its characters have elongated lines which may be incompatible with some design situations. Otherwise, it's a solid alternative to Arial.

4. Tahoma (sans-serif)

web safe html css fonts Tahoma

Similar to Verdana, the Tahoma font sports a bolder weight and narrower tracking (i.e. less space between characters).

5. Trebuchet MS (sans-serif)

web safe html css fonts trebuchet

Trebuchet MS is another web safe sans-serif font, designed by the Microsoft Corporation in 1996. It’s commonly used for the body copy of many websites to this day.

6. Impact (sans-serif)

web safe css fonts impact

Impact is a heavy sans-serif font great for drawing attention and creating...well, impact. It’s also notable for being a particularly narrow font — it’s characters have a higher width-to-height ratio than other comparable fonts.

Impact was first introduced to digital devices in Microsoft Windows in 1998 and has since seen a resurgence in popularity in internet memes, superimposed atop images for a humorous effect.

7. Times New Roman (serif)

web safe html css fonts times new roman

Times New Roman is the ultimate serif font. It's extremely popular and the primary font for Windows devices and applications, like Microsoft Word. 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.

8. Didot (serif)

web safe html css fonts didot

This old French typeface was originally used for printing presses. It’s notable for its elegant aesthetic and can add a formal quality to your copy.

9. Georgia (serif)

web safe html css fonts georgia

Georgia is another elegant serif font, but was designed to be more readable at different font sizes than other script fonts. It accomplishes this with a heavier weight, making it an ideal candidate for mobile-responsive design.

10. American Typewriter (serif)

web safe html css fonts american typewriter

If you want to invoke a classic, nostalgic quality with your text, this is an ideal font to do it. American Typewriter imitates typewriter print and works well for stylized body text.

11. Andalé Mono (monospace)

web safe html css fonts andale

Monospaced fonts have letters that are spaced equally apart, lending a mechanical quality. To the text.

Andalé Mono is a perfect example of a monospace font. This sans-serif option was developed by Apple and IBM and has been frequently used in software development environments.

12. Courier (monospace)

web safe html css fonts courier

Courier is a monospace 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.

Note that the font Courier New is in the same family as Courier. But, despite its name, it's an old newspaper-style typeface that closely resembles Times New Roman.

13. Lucida Console (monospace)

web safe html css fonts lucida console

Lucida Console was designed to be a highly legible monospaced iteration of the broader Lucida typeface. It is monospace, but resembles human handwriting more than other monospace options we’ve covered, thus appearing less mechanical.

14. Monaco (monospace)

web safe html css fonts monaco

The monospace sans-serif Monaco font is native to macOS and will be more familiar with Apple users as a result.

15. Bradley Hand (cursive)

web safe html css fonts Bradley Hand

Based on designer Richard Bradley's handwriting, this calligraphic typeface evokes a casual, personal quality. It’s suggested for use in headings, decorative text, and short bodies of text.

16. Brush Script MT (cursive)

web safe html css fonts brush script MT

Brush Script MT is a heavily embellished script font designed to mimic quick handwritten strokes. While it can evoke nostalgia in some readers, it’s best to limit this font to decorative uses, as its style comes at the cost of legibility.

17. Luminari (fantasy)

web safe html css fonts luminari

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

18. Comic Sans MS (cursive)

web safe html css fonts comic sans ms

At last, we arrive at the font that everyone likes to poke fun at, Comic Sans. Designed to imitate the style of lettering found in comic books, Comic Sans MS carries an informal connotation and has been the target of many an internet joke.

Still, Comic Sans is useful for accessibility reasons: Because it lacks similar letterforms like p/q and b/d, people with dyslexia tend to experience less difficulty with it than with commonplace fonts.

Font Stacks

Okay, I should be up-front here: As you consider these fonts, know that there are no 100% completely safe web fonts. For example, consider a user who dislikes some system default font option and deletes it from their operating system. It’s uncommon, but they’re out there.

To address this problem, CSS allows you to add a list of similar backup fonts in a font stack. A font stack is a fallback system that improves your site’s universal compatibility with different browsers and operating systems. If the first font stack doesn’t work, the browser will try the next one in the stack, and so on.

To make a font stack, add several related font names to the font-family property. 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: "Times New Roman", Times, serif;
}

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

Fonts selection might seem nit-picky, but it should be no small detail to marketers. Choosing a representative text style ensures that your message is clearly communicated, 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, and be sure to use fallback fonts when necessary.

New Call-to-action

 css introduction

Originally published Nov 4, 2020 7:00:00 AM, updated November 04 2020

Topics:

Website Development