One of the items that contribute to how your pages rank on Google is certainly text. Therefore, how your text is rendered is essential. When designing the content for your pages, it needs to be coded in HTML and use appropriate tags, so that search engines can easily index and find them. The question is how are you limited as a designer when your text is coded in HTML and styled in CSS?
Image Source: Pixabay
The fact is that there is a wide variety of operating systems, screens, browsers, and settings which are responsible for how a website is displayed. At the same time, there is a variety of fonts that your users have installed on their computers. This means that, if you choose a particular font, it doesn’t mean that it’s certainly going to display to your website visitors. Does it matter whether your font shows up in Times New Roman or Arial? For creating a unique and quality user experience, it certainly does. This is where web fonts step in.
Why The Need For Web Fonts?
Back before websites were being made, graphic design was a lot simpler. The print was the dominant medium, and the way it was designed (including fonts, of course) was seen exactly as the creator intended it to be. However, in the era of internet, websites have taken over, so, when it comes to designing your site, everything becomes a little more complicated. There is a wide variety of things that a web designer has to have in mind when developing a website.
One of these things is consistency. The fact is that people see designs on various devices, browsers, and screens, so it is essential that the website looks the same for all of them. The same goes for resolution, as particular designs and fonts simply don’t respond well to the variety of screen sizes, and work badly on mobile devices. Performance is of an essence as well, as the sizes of files that make up the pages’ designs can slow download time, and that is one thing that generally turns users away. Availability of the font that you are using is important because if you’re not using a basic and web-safe font, the chances are your user doesn’t have it installed on their PC and simply won’t be able to see the text. Finally, there’s the aspect of search engine ranking. Various designers convert their pages into images, which can have a detrimental effect on SEO because images are less comprehensible to search engines.
For these issues to be solved, web fonts came to be, enabling designers to use custom fonts that your users might not have on their computers, while still making them able to create unique designs that are consistent to their brand identity.
What Are Web Fonts?
Your users’ computers have their own locally installed standard fonts, which are also known as web-safe and system fonts. When a device calls upon a website that is using these fonts, the computer will instantly identify and render them. However, what if a designer wants to create a unique design using a custom font such as those that are available in Google Fonts or Adobe Typekit? If the user doesn’t have that font installed, it might not show on their PC, and all the designer’s efforts would have been for naught.
Of course, there is a solution for this. When a designer intends to use a custom font, they can use a web font, which doesn’t have to be installed on their users’ computers. How? Because it is accessed through a server that hosts the file. This is where the font gets called up from and then loaded into the browser so the user can properly see it.
To make this a lot easier, fonts have been optimized for being used on websites – they have been made to be smaller in size and load faster, and their metadata has been improved. There are four types of web fonts out there. The most common is the TrueType Font (TTF). Then, there is Web Open Font Format (WOFF), which is designed with the intention to be used on websites, WOFF2, that has improved compression, and Embedded OpenType (EOT).
Some of these fonts are open-source, while others require a license so that you can use them. When you get your hands on a font that you want to use for your design, you can reformat it into any of the above-mentioned web font types. According to experts from GWM Agency, there is a number of websites out there that ask for a proof of license and then provide you with font packages in the desired format.
How Do Web Fonts Work?
Each and every website uses CSS for styling, in order to inform the browser how the visual elements are supposed to be displayed. This includes various design elements, and, of course, fonts. Most commonly, a font has a font tag in the CSS. This enables the browser to instantly know how to read headers and other text sections. A great thing that a web designer can do is code CSS so that it has a hierarchy of fonts. This is done in the case that a font isn’t available, so it uses another one.
This hierarchy works in a way that if a computer doesn’t have a particular font, the browser will look for the next font that is in line, all the way to the lowest-level font that the computer has installed. Web fonts can have local hosting, be uploaded to a third-party server, or loaded from a provider such as Google Fonts. Therefore, web designers make use of a “@font-face” declaration in the CSS in order for the web font to be called up.
Pros And Cons Of Web fonts
A web font is used by a company to create a consistent brand feel and look. These fonts bring personality into your website, particularly when it comes to headlines and subheads. They show on various devices, including tablets and smartphones. Thanks to web fonts, you no longer have to create headlines made out of image files like it was done not so long ago. Every word that you include in your text is one hundred percent searchable and doesn’t require ALT tags.
On the other hand, there is the problem of download time. Due to being hosted on an external server, web fonts take time to load, so there is always a little lag when you open up the page for the first time. In the case of some services, the font may end up not showing. Every website needs a fallback standard font in case this happens.
What You Have To Keep In Mind When Using Web Fonts
The fact is that web fonts are a great solution for your web design, as they are created in order to make things a lot easier for designers. However, there is a number of things that you want to keep in check when using them.
Know that not every browser supports all web fonts. Your decision on which font format you are going to opt for mostly depends on your users, and which browser they are using to visit your website. WOFF and WOFF2 are good solutions because most of the browsers support them, but you might want to make sure that everything pans out by implementing a web-safe font too.
As previously mentioned, you need to make sure that you specify a fallback web-safe font in the CSS. When you create a font stack in CSS, a particular font will be assigned to a chosen block of text. However, you also need to make sure that you have backup fonts in place. If a browser doesn’t support the font that you have chosen, or the web server that provides the font is down, making sure that there is a web-safe font in your font stack will make sure that your text appears no matter what. Flash of invisible text (FOIT) happens while the browser is looking for a default font, and it can last for some time, which is often something your users won’t appreciate. However, there are ways that you can overcome this issue.
You must remember that third-party sites that host fonts can always go down. When this happens, your font is no longer available to be used on your website, and if you don’t have a web-safe font as a backup, no text will appear.
Print And Web Fonts
There is a difference in design, spacing, and licensing of print and web fonts. Web fonts are optimized to be properly read and perform well on various screens. This usually means that they are taller, have wider letterforms, decreased stroke contrast, and include modified angles and curves to fit particular designs. There is also more open spacing. The idea is to make characters more recognizable in a non-print environment.
There are two kinds of web fonts. The first type consists out of ones that are uniquely designed for the web, which are specifically optimized for the digital environment. It is possible to come across the problem of not having a corresponding version that will be used in print. The other type is made out of desktop fonts which are optimized for the web. They use the same typeface design for both print and web, which provides
Choosing The Right Font
When choosing the font, you need to think about how attractive and usable they are. Size and layout are important factors when it comes to this. Small text is usually an irritation, especially to older people. Therefore, it is the best idea to have 50-75 characters per line, with the size of 16pt or more, for the desktop. This problem gets a little more complicated on mobile, so it’s best to go for 30-40 characters per line.
When it comes to color, there are two schools with different opinions, so it is up to you to find the right balance for your goals. One believes that high contrast works the best, so black on white is a perfect choice. The other one, on the contrary, claims that too much contrast is hard on the eyes, so it’s better to go for a shade of grey.
In Summation
If you are unable to find the perfect web font for your website design, you can always create one of your own. You can find a variety of web font generators out there that will convert your font into a kit of web files that you can use. Just remember that you need to host them, and it is important that you have the rights to use them.
Web fonts are a perfect solution for creating unique pages that provide your users with one-of-a-kind user experience. There is a lot of typeface options that you can choose from, so you are no longer stuck with just using traditional fonts that are web-safe. Web fonts are easy to use and you can experiment with them all you like, in order to give your website its own personality.
