The role of fonts is not just about looking pretty. And while most people think that readers don’t care about it, poor readability is a big obstacle that can hurt the overall user experience – and bring about high bounce rates. That’s why you can’t underestimate the importance of font choice. Even so, applying a custom font that’s not widely supported may subject your site to an incompatibility issue. A workaround for this is using HTML fonts.
Also known as web fonts, HTML fonts are the available font types that you can apply to your websites by adding some changes to your CSS script. I suggest you stick with these HTML fonts since they’re guaranteed to work on every operating system, browser, and device. Better safe than sorry, right?
These days, there are tons of HTML fonts you can choose from – and you can get them quite easily from various online providers such as Google Fonts, Font Squirrel, and 1001 Fonts.
I will list the best web safe HTML fonts to pick along with what situation they’re most well-suited for.
Using New HTML Fonts Is Two Side of the Same Coin
If you’re a curious web developer keen on creating a one-of-a-kind website, you may want to experiment with custom fonts.
Not only will it add a bit of visual uniqueness, but your readers will also love it when you make the extra effort in matching your site with your brand or concept.
That said, there are some risks you need to be aware of. Not every font is universally recognizable and may cause your readers to view different fonts than the one you intended.
Why can this happen? Well, it’s because different operating systems and browsers have their own sets of installed fonts. For example, while Windows users are able to see the exact font you apply, Mac users will see some a different default option that just won’t suit your site at all (which will impact user experience negatively).
This kind of unpredictability is something you need to avoid at all cost. Otherwise, you can’t precisely figure out how your readers react to your new fonts.
This is where HTML fonts come into play. These universally accepted fonts, or web safe fonts, ensure your website will always look the same no matter which operating system or browser it’s viewed on.
The Best Web Safe HTML Fonts for Your Website
If you think that there are only a handful of available web-safe fonts out there, think again. To tell the truth, there are hundreds of fonts that are safe to use including the trio of font types: Serif, Sans Serif, and Monospace.
Picking the perfect one for your site can be overwhelming. I’m going to make it easier for you by overviewing a dozen of web safe HTML fonts to pick from.
Here is a list of the 12 web safe fonts:
1. Arial
If you’re a Microsoft Windows user, you must be familiar with the name Arial. It’s one of the most commonly found fonts, especially on Microsoft products.
The font belongs to the Sans Serif family that’s known for its simplistic look and versatile use. And, because it’s already pre-installed on every Microsoft computer, it immediately becomes an obvious choice for everyday use.
2. Times New Roman
Prefer a more classic look for your site? Then Times New Roman can be the right fit for you. It grew so popular because it was used in newspapers for years, becoming a famous staple.
What’s more, the design of this font is easy to read, and efficient to use, as each letter takes up less space compared to a lot of alternatives. Ever since its release in 1932, Times New Roman has been a major influence on other Serif font types that came after it.
3. Verdana
This font was created because there was a need for a good on-screen font that has great readability on low-resolution displays.
It’s a well-crafted Sans Seris font type that has distinctive features on similar-looking letters such as “l” and capitalized “i” so people will find it easier to differentiate between them. Even though in the era of high-resolution screens, the popularity it gained manages to place Verdana in a roster of favorite font types still in use.
4. Helvetica
Helvetica is considered one of the most easily recognizable fonts in history. Back in the era of old advertising, most media still used scripted fonts. Then, Helvetica was released and quickly became popular because it contributed a new innovative look that gave advertising a much fresher look.
5. Georgia
Similar to Verdana, Georgia was also among the first font types intended for on-screen use. This Serif font type has a few similarities with Times New Roman but with a few alterations that make it even more legible on low-resolution screens.
Design-wise, it is a serif font type that underwent a change from the classic typeface to a modern look. So, if you consider Times New Roman too formal but still want to retain an elegant look, Georgia can be a good choice.
6. Courier
As it’s a monospace font, every letter with the Courier font has the same width. It was released in 1955 as the standard font type for typewriters.
It doesn’t offer the best visuals and readability when used on a screen though. That said, Courier may be an ideal choice if you have a niche that could use the old bureaucratic look on a site.
7. Times
Since Times is the predecessor of Times New Roman, both have a strikingly similar look. Even so, there are differences between the two that are worth noting, even though they can only be seen when amplified. For example, Times New Roman comes with redesigned symbols and the small lines that are sticking out in a few characters have more rounded edges than Times.
Both are very popular fonts for old newspapers and depending on how picky you are, they can be interchangeable.
8. Calibri
If you’re using the most recent versions of Microsoft Office, I’m sure you’ll recognize the name instantly. Yes, it’s the default font that you can use right away once you open Word, Excel, and other Office tools.
Compared to most other fonts on this list, Calibri has a more fresh and modern typeface design that can be suitable for websites of every niche.
9. Trebuchet MS
Trebuchet MS is a Sans Serif font type that was used as the Windows XP window title. It has some interesting letter designs that are distinguishable from other fonts of its family.
Its large x-height also makes it an ideal font to be displayed on every screen and it was released for free as a part of core HTML fonts for the web as well.
10. Bookman
Feeling medieval? Then the Serif font type Bookman is for you.
As an evolved font type from Old Style Antique, Bookman is an ideal choice for printed design and specific advertising use.
It is known as the modernized version of old style designs that will make your site comes across as sophisticated or thematic.
11. Monaco
Monaco is a font that comes pre-installed on Apple products since the early release of Mac OS versions. This monospaced serif typeface is well-liked for its distinctive features of letters that are often mixed up with each other.
That said, you may want to steer clear of this font if you’re looking for a font with more proportional width.
12. Didot
Didot is an elegant looking font that can make every site looks classier. As a serif typeface, it shares a few similarities with Times New Roman but still has quite a particular design of its own.
That said, compared to a few other fonts of its family, readability is harder to maintain when you use it on a very small screen due to its lighter weight. If it’s used with a larger size, this font is more than capable of bringing a luxurious tone to your website.
The Fall Back Method
Even though there are lots of web-safe fonts out there, there can be some premium fonts you love that aren’t universally available.
Well, here’s the good news: you can still use them on your site without worry. The trick is to set up a secondary font that your site will revert to just in case your non-safe font fails to appear – this is what they call “The Fall Back” method.
First, look for a web-safe font that’s very similar to the one you desire. By using a similar web-safe font, at least your site will still look natural even when the primary font doesn’t show.
Second, you need to add some code to your theme’s CSS file. From the WordPress dashboard, go to Appearance -> Editor. Then, add the following code to the body section:
body {
font-family: Zappat, Arial;
color: #color code;
}
Notice the part that says “Zappat” and “Arial” above? Here is how the code works:
If your visitors go to your website, their browser will try to show Zappat first. But, if the computer doesn’t have the font installed (or the browser doesn’t support the font), it will show the second font on the list, which is Arial. So, put your desireable font in the first, and the web-save option after it.
You can also add three or four more alternative fonts if you want. Just make sure the web-safe font is put last on the list.
So, Which One Should You Pick?
Fonts are a part of your site’s design – you need to pick one that suits your aesthetic and purpose. Then again, picking “the best” may be subjective on a personal level.
So, to help decide which one is the right fit, let’s classify them based on your niche or goal.
Let’s say you’re running a news website. Because space is an important factor for newspapers, Serif font types such as Times New Roman, Times, Georgia, Bookman, and Didot are always preferable. So, those may be the right choice for you.
As for the Sans Serif typeface, it can work well for any purpose – especially Arial which is known for its versatility. Other fonts such as Verdana or Calibri also work well for headlines and calls-to-action for a generic landing page.
Lastly, there are also monospace fonts like Courier and Monaco that are widely used for showcasing code. This kind of font may come in handy for a technology site that publishes a lot of tutorials.
Well, that’s it. Now that you learned about HTML fonts, you can sleep like a baby without fear of your site’s fonts getting all messed up. So as long as you use The Fall Back method, you’re always in control of how your articles look.
Which web-safe fonts have you chosen? Or, do you know others that should be on the list? Let me know in the comment section below.
Leave a Reply