Compatibility:

WebSite X5 Evo and Pro

The choice of a font is very important because it influences the display quality of a Website page. Nowadays there are thousands of fonts which differs not only for their style and legibility, but also in the way they can be used on the Web. In order to select them wittingly, it is important to understand what Safe and Web Fonts are and how they work.


Safe fonts or Safe Web Fonts

Before the CSS3 directive was introduced, a factor that heavily influenced the choice of fonts for Web Pages was the support offered by the various Browsers for displaying the fonts. It was practically obligatory to use safe fonts, that is those fonts that are used universally and present on nearly every computer.

When a server used to send a web page to a client computer, it asked the client which font it would have used to display the text. The client checked that it had the proposed font installed and proceeded as instructed: otherwise, it used a default font as a substitute.

This basically meant that everyone always used the same fonts (Arial, Verdana, Georgia and few others), to avoid the risk of spoiling the display of the Web Pages. This obviously limited the creativity of web authors.


Unsafe fonts or Web Fonts

CSS3 opened the door to the use of unsafe fonts: the @font-face command makes it possible to send a file relative to a particular font (in TTF, EOT, WOFF or SVG format, depending on the Browser in use) to the client computer that contains the character set to use for a particular page.


This means that the client computer no longer has to check if the suggested font is installed but it can use the character set linked to the CSS stylesheet of the web page.


So, thanks to CSS3, it is now possible to use any font on a Web Page, because the end user can download the necessary character set.


There are 2 main techniques for using Web Fonts:

  1. use fonts installed on our computer, publishing the font files (in the various formats) on the website's server (see: How to add an Offline Web Font);
  2. use an external service, such as Google Fonts™ (free) or Adobe Typekit (to buy), that offers web fonts that are ready to use, and only need a link in the web page's CSS stylesheets (see: How to add a font from Google Fonts).


A disadvantage of these solutions is that the Web Fonts have to be downloaded by the user, and this could influence the time taken to load a Page. The advantage, on the other hand, is that they offer much greater freedom for text formatting and page layout. Furthermore, Google fonts remain stored on Google's servers and do not have to be present on the server used for the Website.


Some tips

Thanks to the Web Fonts we can now be as creative on the Web as we are on Desktop computers, but it's important to remember not to exaggerate. Here are some suggestions for using web fonts wisely:

  • Don't use too many fonts in different sizes: the pages will be clearer to read and look tidier.
  • Don't use fonts haphazardly: stick to the same character type and style combinations on all the pages so that the Website is coherent and consistent.
  • Only add the Web Fonts (with their styles) that you actually use to the pages: the end user has to download the web font files, which affects the time it takes to load the page.
  • Always check the conditions of use in the font licence: many fonts can be used freely on the Internet, but some are subject to particular conditions, such as a limit to printed material only.