Last updated on by Souvik Banerjee on Categories Design
Table of Contents
If you are a website owner then you should know that an HTML font plays an important role in your website. All websites have text content in one form or the other, if chosen correctly a good font can increase the aesthetics of your page and have a positive impact on the content readability, which is why the designing and development of a website is indeed one of the most important aspects to kickstart any business. A bad font negatively affects your suite’s performance, it all depends on if you are using a web safe font or not.
What is a Web Safe Font?
A font is readable and looks the same in any browser or device (mobile, tablet, etc.) only if the font is installed on that device. Web safe fonts are those fonts that are usually pre-installed in any device – computers, mobiles, gaming consoles, tablets, and smart TVs.
In a perfect world, you can choose any font you desire for your website. However, based on the operating system devices comes with their own pre-installed font selections. The problem lies in the fact that their designs usually differ depending on the system you use. Devices operating on windows may have one group, MacOS might have another and then Google’s Android has another different version.
When you pull up a website the font you see on the viewport may not necessarily be the font the designer intended. Meaning: let’s say the designer uses a font which is relatively obscure. If you do not have that font installed then your website would revert to the system defined generic font and you may not even know it, for you it would just look unpleasant.
Web safe fonts are a collection of fonts that are there across all systems and give you the ability as the designer to specify the font to fall back on in case the device doesn’t have the font needed. It allows you the ability to make the website look the same across a range of devices.
What are the Five Font Families?
In typography, all fonts are categorized into one of the five font families on the basis of their design similarities. These are as follows:
1. Cursive (e.g., Zapf-Chancery)
The Cursive family of fonts imitate human handwriting with the letters usually joined together in a flowing manner. It is often associated with people with calligraphy and faster writing.
2. Fantasy (e.g., Star Wars)
The fonts of the Fantasy font family generally have decorative elements in each letter but still represent the character. The titles of many fictional books and films use fonts from this family to strengthen the nuance of the content.
3. Serif (e.g., Times New Roman)
The Serif font family’s most notable feature is a small line at the end of a big stroke in a letter or symbol. It creates a sense of elegance and formality. It is extensively used for body text by a host of websites.
4. Sans-serif (e.g., Helvetica)
Unlike the fonts from the Serif family, the fonts of the Sans-serif family do not have the small line attached to every letter. Most of the fonts belonging to this family have a similar stroke width, thus making it minimalistic and modern.
5. Monospace (e.g., Courier)
In the Monospace font family, each letter and symbol occupies the exact same space horizontally. Thus making them consistent and easy to distinguish, which is why they are were often used with typewriters and more recently with computer terminals.
Now that we have an insight into the fonts, below are 5 popular web safe fonts to add to your website:
1. Arial
One of the most widely used sans-serif fonts in both online and printed media. It is the de-facto standard. The OpenType version 3.0 describes it as:
“A contemporary sans serif design, Arial contains more humanist characteristics than many of its predecessors and as such is more in tune with the mood of the last decades of the twentieth century. The overall treatment of curves is softer and fuller than in most industrial-style sans serif faces. Terminal strokes are cut on the diagonal which helps to give the face a less mechanical appearance. Arial is an extremely versatile family of typefaces which can be used with equal success for text setting in reports, presentations, magazines, etc, and for display use in newspapers, advertising and promotions.”
It is also the default font in Google docs.
2. Times New Roman
Times New Roman is a variation of the old Times font from the Serif font family. Commissioned by the British newspaper ‘The Times’ in 1931 and designed by Stanley Morison, the artistic adviser of Monotype the printing equipment company and collaborating with Victor Lardent, from the lettering department of the Time’s Advertising arm. It has emerged as one of the most popular fonts of all time and is pre-installed on most devices.
The Roman in Times New Roman’s name is a reference to the roman style, the first part of the Times New Roman font family to be designed. It has its origins in the Italian printing of the late 15th and early 16th centuries, the design has no connection to Rome or to the Romans.
3. Helvetica
Helvetica or Neue Haas Grotesk is a widely used font from the Sans-serif Font family. Developed in 1957 by Swiss Font designer Max Miedinger with input from Eduard Hoffmann. It is designed in a neo-grotesque design featuring a high x-height, termination of strokes on horizontal or vertical lines, and a very unusual tight spacing between the letters, this combine to give it a solid, dense appearance. Originally designed for use as a neutral font that had great clarity, no intrinsic meaning in form, and could be used in a variety of signage and named Neue Haas Grotesk (New Haas Grotesque), it was quickly licensed by Linotype and renamed Helvetica in 1960, Latin for Swiss. The font is loved by designers for its neutrality and favored by many famous brands like Jeep, Kawasaki, Motorola, and BMW.
4. Courier
The Courier font is a font belonging to the Serif font family. Designed by Howard “Bud” Kettler originally for IBM’s typewriters, it has been adapted for use as a computer font and almost all computers come installed with it. Due to its Monospace typeset, in the 1990s it found renewed use in the electronics and computer industry where columns of character must be aligned consistently, for instance, in coding where it is the default font to write or depict any kind of code.
According to industry standard, all screenplays were to be written in 12-point Courier. The US State Departement used it as the standard font for all documents up until January of 2004. With the increasing use in digital industries, Courier has developed variants with features like larger punctuation marks, stronger distinctions between similar characters (such as the numeral 0 / upper-case O and numeral 1 / lower-case L), etc for more screen legibility.
5. Calibri
The Calibri font is a member of the Sans-serif font family designed by Lucas de Groot in 2002-2004. It was released publically in 2007, bundled with Microsoft Office 2007 and Windows Vista. Starting from Office 2007, it replaced Times New Roman as the default font in MS Word and Arial as the default font for MS Powerpoint, MS Excel, Microsoft Outlook, and WordPad. It is a part of the ClearType Fonts Collection designed to work with the ClearType text rendering system by Microsoft to make text clearer to read on liquid crystal displays (LCDs).
Font Tools to Check Out
There exist a number of online tools that you can use to test the different fonts before using them on your website. If you want to explore the types of fonts available or are having difficulties in choosing which font to use, these tools are a great help.
Font Pair
Font Pair is a niche website that has lots of resources related to typography. There are various eBooks, guides, reviews, videos, and plugin recommendations for fonts. They have a section dedicated to the most popular fonts available on Google and an in-depth comparison of which fonts are best together.
Wordmark.it
Wordmark.it gives you a quick preview of what your text would look like with a particular font or even multiple fonts together. Just input the text in the bar and voila it would show you how it looks with different fonts.
WhatTheFont
WhatTheFont is to text what Reverse Image Search is to Images. It helps you to identify a font that you have seen. Just upload the image of the font and it will match it with their database and give you what it believes the closest match is. You can also head over to their active forums for help in identifying fonts or even general typographic queries.
Now that you have chosen a web safe font, it is time to apply it. If you have little programming experience then follow these steps to add a web safe font to your webpage:
1. Open your header.php file.
2. Copy the font source/standard code. You can usually find this via Google.
3. Paste the code at the top of your header file.
4. Load up your style.css, put the font code to change the font text of your choice.
By the end of it, your style sheet should look like this:
This article is written by Abhyank Srinet. Abhyank holds a Masters in Management degree from ESCP Europe & has an engineering degree with a specialization in Instrumentation & Control. His interest in the digital landscape motivated him to create an online startup for application consulting (MiM-Essay), focused on spreading quality information about early career master’s degree.
Disclosure: Some of our articles may contain affiliate links; this means each time you make a purchase, we get a small commission. However, the input we produce is reliable; we always handpick and review all information before publishing it on our website. We can ensure you will always get genuine as well as valuable knowledge and resources.
Published By: Souvik Banerjee
Web developer and SEO specialist with 20+ years of experience in open-source web development, digital marketing, and search engine optimization. He is also the moderator of this blog "RS Web Solutions (RSWEBSOLS)".
Web developer and SEO specialist with 20+ years of experience in open-source web development, digital marketing, and search engine optimization. He is also the moderator of this blog "RS Web Solutions (RSWEBSOLS)".
