Fonts. We see them every day. From print ads to magazines, there’s all kind of fonts out in the world. Unless you can’t read, you probably understand the importance of choosing the right fonts for the right medium
When it comes to blogs and websites, choosing the fonts that best fits your style is important, but what’s more important is for them to be web safe fonts.
What Are Web Safe Fonts?
All operating systems (windows, mac, android, ios, etc.) comes with a certain amount of built-in fonts. The problem is different OSes might have different typefaces installed on their systems.
This is where Web Safe fonts come in.
Web Safe fonts are basically font styles that are shared and viewable on all platforms and various systems.
Web Font Embedding Services
Google web fonts or Typekit are systems which allow the use of fonts hosted on their servers. Typekit sets the price based on the number of fonts, site’s traffic and the number of domains, unlike Google Web Fonts.
Thanks to Google, Google Web Fonts is completely free and easy to use. For example, you can choose font types like Lato, Open Sans or Tinos. Paste the generated code in your document’s <Head>. And you’re all set to reference it in CSS.
Note: Here’s the basic HTML for the beginner if you want to learn more.
Why Are Web Safe Fonts Important?
“What you see is what you get” when it comes to print but on the Web, what you see on your screen might not exactly be the same for someone else’s screen.
Here’s an example, let’s say the designer you’ve hired decides to use a really fancy and obscure font family for your site’s text design. If a visitor does not have the specific font installed on their computer or it’s not pulling from a web-friendly place, then all they will see a default font variation like Times New Roman.
You might have a beautifully designed site with awesome looking fonts, it’ll still look plain and ugly if it can’t load for your visitors.
Having these Web Safe font means you won’t have to worry about your texts looking weird just because you chose a font that no one has access to.
Note: Here’s an article I recently published, how to make a website ( a step-by-step guide).
10 Best Web Safe Fonts We Recommend
Now that you know the importance of a web safe font, it’s time to start using them for your site.
While there are plenty of fonts you can choose, we recommend these 10 web safe fonts to use with HTML and CSS. They are widely used and look pretty good as well.
Load up any website and chances are they’ll be using an Arial font.
This sans-serif font is the most widely used font and is considered the standard for all web safe fonts. It is often used as a substituted for specialized fonts are not available on Windows devices.
If Arial fonts are the go-to for clean and professional websites, then Helvetica would the designer’s choice.
The Helvetica offers a more stylized sans serif font that allows for bolder designs.
3. Times New Roman
A new variation of the old Times font.
Times New Roman is probably what most Windows users are familiar with as they are the standard serif font on Microsoft Words. Compared to Arial, Times New Roman is slightly more traditional in its design.
If Times looked familiar to you, that’s because it has been the standard font used for old newspaper prints.
Times is considered the most traditional font there is and is rarely used outside of prints and newspapers.
5. Trebuchet MS
Originally designed by Microsoft in the nineties, Trebuchet MS was inspired by old medieval-styled fonts.
It was prominently used as the main font for Windows XP and as body copy fonts on the web for a time.
One of the safest choice for a web font, Verdana utilizes simple serif lines and super large letters for its design.
The elongated look of the fonts makes it one of the easiest fonts to read on the net and is often the font of choice for many bloggers.
7. Arial Black
If you loved the Arial font but wanted something bolder and bigger, then you can’t go wrong with Arial Black. The font came about when people wanted to use a Helvetica-styled bold font but didn’t want to pay for its license.
Courier should be familiar to everyone as the old monospaced font is available on almost all devices and operating systems as a stand-by replacement for any “unique” fonts.
It’s not the most stylish font but it is very readable and cleanly designed.
9. Courier New
Just like Times, Courier also had a redesign that modernized its classic style.
Courier New is considered a monospaced font and is available on the majority of devices and operating systems as well.
While Verdana is generally the safe choice for most websites, if you wanted a font that has slightly bigger letters with the same font size, Georgia fits the bill.
Though it should be noted, the font works on certain occasions and does not work well with other serif fonts (they look minuscule next to Times New Roman).
Absolutely Do Not Use: Comic Sans MS
Sure, it looks fun and somewhat whimsical, however, absolutely do not use Comic Sans MS if you want to have your website taken seriously.
The sans-serif font is a casual take on the comic book lettering and is generally used for informal documents and children’s materials. Unless you’re writing for a children’s book or a comic book, do not use Comic Sans MS!
The purpose of web safe fonts is to make sure what you designed on your website appears exactly as it intended on other devices and platforms. While some fonts might not work, there are a number of great designs that will make the fonts of your site looking great.
Just promise me you won’t use Comic Sans MS under any circumstance.