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.
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.
What are web safe fonts?
Web safe CSS and HTML fonts can adapt to any browser on any device. They are the new standard in web design. Web safe CSS and HTML fonts ensure that the right font will always be displayed, even if they aren’t necessarily installed on the user's computer.
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
Times New Roman
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)
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)
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)
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)
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.
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:
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.
Originally published Mar 17, 2020 9:33:46 AM, updated May 15 2020