The Best Web Safe Fonts In Web Development

[Participant @chinomnso]

One very important factor that plays a huge role in the aesthetics of a website is the choice of fonts. Google Fonts and other font embedding services allow developers to embed fonts directly from remote servers, without having to download the fonts. This makes it easy to search through a repository containing hundreds of fonts which can be easily embedded on a webpage.

Google Fonts is probably the most popular and is very easy. With a few clicks, you can get a font, preview it and generate code to embed it. The problem with having hundreds of font families to choose from is that the font you choose may not be recognized by the device on which the site you build will be viewed. Hence, the need for web safe fonts.

What Are Web Safe Fonts?

All devices come with their own collection of pre-installed fonts. Such a collection is usually defined by the operating system the device is running. Generally, each operating system has its own group of pre-installed fonts. This means that some fonts found on a Windows machine may not be found on an Android device or on a Mac.

Web Safe fonts are fonts that render properly across all major operating systems – Windows, Android and Linux. When web developers use less-known fonts, web safe fonts can be used as a fall-back in the event that the obscure fonts are not picked up by the user’s device. This way, users can still see fonts that are somewhat close to the intended ones and that somehow align with the overall design of the website.

Let us take a look at some of the most popular web safe fonts. It might be of help to read this article on sans-serif fonts and this one on serif fonts. You may be suprised to learn what a serif is and the differences between serif and sans-serif fonts.

1. Arial

Arial is very popular among designers. It is among the most-used sans-serif fonts. Quite often, many fonts are substituted with this font on Windows devices.

2. Times New Roman

In the serif family, Times New Roman seems to top the charts. It is very popular on Windows devices and is a modern variation of the good old Times font.

3. Times

A traditional font, you may have come across this if you ever read newspapers. They worked well for narrow columns in newspapers. And they don’t look bad on websites either.

4. Roboto

While this font has a mechanical skeleton, it features largely geometric forms and friendly curves. It was developed by Christian Robertson at Google to be Android’s system font.

5. Verdana

I just love Verdana! Come to think of it: it has simple sans-serif lines and it is quite large. And because the letters appear to be somewhat elongated, it is very easy to read online on any device.

6. Palatino

An old-style serif typeface released in 1949, Palatino is a large font that is suitable for the web and for headers in print-ready ads.

7. Courier

Originally created for IBM’s typewriters, Courier has now been adapted for use on computers.  An old monospace font, it is now available on most devices and operating systems.

8. Courier New

Considered a monospaced font, it is similar to Times New Roman. One feature of this font I like so much is its bold appearance and ease of readability.

9. Bookman

Otherwise known as Bookman Old Style, this font can serve as a perfect option for a headline. One very good thing about it is that it remains readable even when used in smaller sizes.

10. Comic Sans MS.

Although it is not one of my favourites, it is one of the web safe fonts. Some designers use it when working on not too serious projects – projects that do not require a formal appearance. Others use it when designing websites that are targeted at kids.

11. Arial Black

Arial Black is like the big brother of Arial. It is bigger and bolder. It might also interest you to know that it has identical proportions with the Helvetica font. This means that in the past, printers who could not pay for the Helvetica license could print documents in Arial Black and have the document look quite identical to Helvetica.

12. Impact

Impact can make an impact on a web page as a header. Use it for a sentence or longer, you may not really like the outcome. Designed by Geofree Lee in 1965. It is part of the core fonts for the web package and has been distributed with Microsoft Windows since Windows 98.

13. Candara

This is a sans-serif typeface which was commissioned by Microsoft. It is included in the Clear Type Font Collection which was released along with Windows Vista.

14. Garamond

Garamond is an old-style font named after 16th-century Parisian engraver Claude Garamond. The current font version was bundled on Most Windows devices and has since been adopted by other device manufacturers. If your memory does not fail you, you will remember that Garamond hit the headlines in 2014 when a 14-year-old claimed that the U.S government could save almost half a billion dollars by using only Garamond to print official documents.

15. Georgia

Georgia features relatively larger characters and has a size similar to Verdana. But be sure to avoid placing this font beside other serif fonts like Times New Roman which might look much smaller.

Feel free to use any of these fonts in your web projects. They would never fail you. Why not share your own favourites in the replies?

[Author]

Posts