Much of the look and functionality of your website is dependent on the images that you use and the fonts you select.
Understanding this, a number of font embedding services, such as Adobe Fonts or Google Web Fonts, have popped up as an option.
It is understandable why these options are so popular. They are easy to use and free.
Let’s say, for example, that you want to use the font “Droid Serif.” How do you do it?
All you need to do is select the font that you want to use, generate a code that can be pasted into your documents, <Head>, and from there you can reference it in CSS. It is that simple and straightforward.
If it is so easy, you might wonder, what is the point of this article? Well, not everyone has access to the same fonts. A font that looks great on your computer may show up as a random font for people who visit your site. However, you can avoid this problem by simply creating your site with a “web safe” alternative.
What Is Web Safe, and Why Does It Matter?
A web safe font is a font that is considered to be likely to be installed on the majority of computers. If your computer has an Internet browser installed, there are some default fonts that are automatically installed with it.
These default fonts make it possible for your browser to show you the text that is on different web pages. If your site is not coded to use a safe font, the web page will appear using whatever default font it was programmed to use.
There is no such thing as a 100 percent web safe font. Every operating system has its own group of fonts available.
Android has their own, Windows-based devices have their own group, and Mac OS has their own group. So you run the risk of having someone visit your site, pull it up, and not see the original font intended for the page. Instead, the page will default to a basic variation, like Times New Roman.
Here’s the problem, a visitor to your site has no idea that the font they are seeing is not the one you intended for them to see.
From their vantage point, the site just looks ugly. Many designers will stack their fonts. So there will be the font that the site is designed in. Then there will be the fallback plan B, just in case their original font choice is not available.
There are a number of “Safe Fonts.” Let’s look at some of the most popular options. Once you have these options under your belt, you can start the process of designing your website, looking for the best web hosting for your new domain, and attracting customers to your site.
1. Aerial Header
You are likely reading this in Aerial Header. This is the go-to font for many operating systems. This is a popular sans serif font. Sans serif means that the font is straightforward, with little to no curls on the end of the letters. If your website is being displayed on a Windows device, you should expect that the fancy font you spent a lot of money on may be replaced with this one.
As the name implies, Impact is designed to leave an impression. Whether you are using Impact Header or Impact Body, you are looking at an option that looks great if it’s used for a few short words. However, it looks terrible if it is used for long sentences or an entire paragraph.
Whether it is Helvetica Header or Helvetica Body, you can almost never go wrong with this font. This is another sans serif font that is attractive and is on most browser systems. It’s a great fallback just in case your plan A is not an option.
4. Arial Black
This font, like many of the others we are going to discuss, comes in a Header and Body form. Arial Black is designed to be bolder, bigger, and more dynamic than simple Arial. An interesting fact is that this font has the same proportions as Helvetica. It was originally seen as an option for replacing Helvetica without needing to pay for an additional license.
5. Times New Roman
If Arial is the sans serif go-to, Times New Roman is the go-to for serif fonts. It is popular on Windows devices and is found on almost every other device in the market.
6. Trebuchet MS
Trebuchet MS was designed by Microsoft sometime in the 90s. It was popular when Windows XP hit the market. This medieval themed font has retained its popularity and is often seen in copy on the Internet.
7. Times Header/Body
This font is as traditional as traditional gets. This is the font that you have seen for decades in newspaper print. Traditionally, the font is used in narrow columns and is displayed at a smaller size.
8. Comic Sans MS
If there was ever a font that was seen as ugly, unprofessional, and nauseating, it would be this one. The idea of this font was to create something that was whimsical, fun, playful, and an alternative to the more serious sans serif font options.
If you want what you write to be taken seriously and you do not want all of the hard work you have done choosing the best discount hosting picks for your site to go to waste, we recommend that you stay far away from this font.
You might ask yourself, why was such an ugly font created? Because it is an easy option for dyslexic people. The letters are different enough so they are not easy to confuse with each other.
For example, take a lowercase B and a lowercase D in this font and you see that they look different from each other even when they are flipped. The same is true with the P and Q.
9. Courier New Header/Body
Courier New is a monospaced font. This means that it does not fall within the serif or sans serif categories. This font is designed to be an update to the original Courier font that has been around for some time.
10. Bookman Header/Body
This font has stood the test of time because it is legible and readable even when you use a small font size. This font is mostly used as a headline option.
Courier is an older example of a monospaced font. Its ease-of-use and legibility makes it the standby on just about every device and operating system.
12. Garamond Header/Body Copy
If when you use this font you feel like you have traveled using the Wayback Machine, there is good reason. This font has roots that date back to the 16th century when its use was popular in Paris. This is an updated version of the older font and has found its way on almost all Windows devices and other systems.
This is a web font in its truest form. It has the simple lines of sand serif. The font is large. When you look at it, it seems like the letters are elongated. This is why it is so easy to read this font online.
14. Palatino Body/Header
This is another font that has been used for many years. In fact, it can be traced all the way to the Renaissance. This is a large font, making it easy to read. It is great for the web. It is often used in print style ads or used in headings.
We round out our list by looking at a font that is similar in stature and size to Veranda. One of the first things you will notice about this font is that the letters are bigger, especially when compared to other fonts at the same size. There are a number of benefits that come from using this font, but you need to be careful if you are going to use it with traditional fonts, like Times New Roman. Standing next to this powerful font, weaker fonts can start to look minuscule.
What This Means for Your Website
You want your website to look its best. To do this, you need to use fonts that are going to work regardless of the platform, browser, or system. You want the security that comes from knowing that you can use your fonts across multiple devices. The fonts that we reviewed are widely accessible for most devices, with some of them having been accessible for decades. Sure, not all of them are attractive, but there are enough of them available that you should be able to find one that’s close enough to your original font so as not to lose the overall idea.
As always, would love to hear from you. What web safe fonts do you use? Let us know in the comments section below.