The choice of typography for the presence on the web has a major impact on the final web design and should not be underestimated alongside images, graphics, and the like. In addition to design aspects, technical aspects must also be taken into account. In this article, you will learn what you should pay attention to and tips for the best font for websites.
Fonts affect readability. This applies to books, but also to the web. While a delicate font might add elegance to your headlines, you can make it difficult for readers to grasp them. Fonts are of great importance in web design. Because the right font is and remains a crucial point for the design of your website. But which fonts are suitable for the web? And what is the best font for websites?
The Best Font for Web Pages: Two dimensions to consider
Before we get down to business, an explanation of the term: In information technology, a font is a digital typeface set. So if you talk about fonts in the context of web design, the term font will often come up.
Basically, the question of the best font for websites can be divided into two dimensions.
First: What technical conditions must be in place?
And secondly: What should be considered when designing?
Aside from these general dimensions, corporate design is also an important factor when choosing the best font for websites. If you have brand guidelines that define the “typeface” feature more precisely, then you should also take these into account on your website. Uniformity and recognition value are once again higher up on the priority list. However, your brand font may not display correctly in every browser. In web design, it is therefore important to specify alternative fonts for such cases in the HTML code. In order to then find the best font for your website, you should fall back on the two dimensions mentioned.
Technical requirements for the website font
You may be familiar with this: The first problems can arise when sending a text document from Windows to macOS. Formatting shifts, graphics are distorted and the writing looks different. This small example gives an idea that using fonts on the web is not child’s play either. Unfortunately, it is not as easy in web design as it is nowadays to select and change fonts in a text document or even in an e-mail.
The first hurdle is making the writing visible. If you have a cooperative design with a fixed font, technical problems can already arise in the display, as mentioned. Of course, the same applies to alternative fonts. The second hurdle is that the website, including the selected fonts, looks the same across every web browser and every operating system. When it comes to the technical requirements, there are a few things to consider so that your website font is displayed correctly and independently of the browser or end device. Here are two ways you can ensure consistent visibility of your font.
Web Safe Fonts
The traditional way for a visible and uniform font is via so-called web-safe fonts. Several fonts are pre-installed on computers, mobile phones, smart TVs, and the like. If a website uses one of these pre-installed fonts, it will be retrieved from the device. It becomes problematic if a font is used that is not installed on the end device. In this case, the website uses generic fonts. In the worst-case scenario, this means that the text cannot be deciphered. Accordingly, the term web-safe fonts bring together all the fonts that are pre-installed on the majority of operating systems. Examples include Arial (PC) or Helvetica (Mac) or Times New Roman (PC) or Times (Mac). Overall, however, the selection is very limited.
Web fonts
Even fonts that are not pre-installed on any end device can be integrated into the web design via web fonts. These fonts are also safe – although not “web-safe”. A prominent example of a web font provider is Google Fonts. Unlike many other providers, Google Fonts is open source and therefore free of charge. The application offers a selection of over 1,000 fonts for the text of a website, which can be integrated into the style sheets (CSS) as code snippets. If you want to bypass the code, there is a plugin for WordPress, for example, that allows direct access to Google Fonts and thus easy integration into the web design. Instead of the end device, as is the case with web-safe fonts, the fonts are loaded from Google servers. An advantage of Google Fonts is the huge selection of different typefaces, which allow for individual designs. However, it should be emphasized negatively that data from website users is transmitted to Google. It is important that this is addressed in the privacy policy of the website.
Safety fallbacks
Regardless of whether it is a web-safe font or web font – fallbacks in the style sheet (CSS) ensure extra security. If font 1 cannot be accessed, font 2 or the closest possible font is used. Accordingly, fallbacks minimize the risk of illegible and visually unappealing text.
In the following we have included an example of how you can integrate fallbacks in CSS:
html {
font-family: Verdana, Helvetica, Arial, sans-serif;}
If Font 1, here Verdana, is not pre-installed, Font 2, here Helvetica, is used. If this is not possible, Font 3, Arial, is used. If Arial doesn’t work either, the website uses another sans-serif font according to the style sheet.
Design aspects
If a company or private individual has not noted any specified fonts in their brand guidelines (or these cannot be displayed), design aspects should be taken into account in addition to technical aspects. A closed external appearance with a uniform design radiates sovereignty and professionalism. It is important that the font chosen for the texts matches the image of the company. It is quite possible to use different fonts for different texts. This can generate attention and give the web design that certain something. However, care should be taken not to exceed the three font limits. In addition, there should be a clear hierarchical order for the use of the scriptures. For example, the font could be assigned to the headings and body text. In terms of size, line spacing, and color, the focus is on good readability.
Serif: yes or no?
Well-known serif fonts, also called Antiqua, are for example Times New Roman or Baskerville. Serifs denote short, thin strokes at the beginning and end of a letter. For a long time, these fonts were considered to be particularly easy to read, partly because serifs were supposed to give the continuous text more guidance. One reason why serif typefaces can be found in many daily newspapers and books today and are associated with them.
In user tests, no clear differences in the legibility of different fonts, whether with serifs or sans serifs, could be determined. Only with particularly small texts, such as captions, have serif fonts turned out to be less legible.
Basically, one can say that sans serif fonts, i.e. sans serif fonts like Arial, appear more modern and every day. Due to their high frequency in print, serif fonts usually appear more mature and serious.
Readability as a top priority
If you have decided on a technical variant, the focus in terms of design should be entirely on readability. By choosing between Times, Georgia, Arial, Trebuchet, and Verdana, all web-safe fonts that Liebig’s study found to be similarly legible, the font choice can be tailored to the style of the website. If you decide on a different typeface, it is important to first examine it for legibility. If this is guaranteed, nothing stands in the way of the font.
On a website, you should keep the font as simple as possible. The goal of a website or blog is to convey information. Fonts that are too fancy can negatively affect legibility.
Therefore, you should always use simple fonts in web design. The standard fonts also have a positive influence on the loading time of the website. Standard fonts also do not need to be preloaded as they are already preinstalled on every system.