Safe fonts and web fonts

Further information >

Safe fonts and web fonts

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

The choice of a font is very important because it influences the display quality of a website page. Over 90% of the information on the Internet is text and so it is clear that the choice of font is very important. It is important to choose a font that is not only attractive but also easy to read, and that will be displayed correctly on our visitors' devices, regardless of the browser they use for navigating.

Click to expand/collapseFont readability

A font's readability essentially depends on factors such as the family it belongs to, the x-height and the overall character size.

Family - The most readable fonts on the Internet belong to the sans-serif family (e.g. Arial or Helvetica) whilst the serif family (e.g. Times New Roman, Georgia or Palatino) is more suited to printed documents. Cursiv (such as Arabic) and fantasy (such as Symbolix) fonts are not widely supported by the main browsers. Monospace fonts (such as Courier) tend to induce eye-fatigue if used for long documents, and they are normally only used for snippets of code on the Internet.
x-height - By x-height, we mean the height of the lowercase "x" character. A font such as Times New Roman has, for example, an average readability on a computer screen because it has a moderate x-height. Verdana, on the other hand, was designed specifically to be read on computer screens and has a very high x-height, especially when compared to other character types with the same pixel size.
Click to expand/collapseSafe fonts or safe web fonts

Before the CSS3 directive was introduced, another 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 sends a web page to a client computer, it asks the client which font it will use to display the text, The client checks that it has the proposed font installed and proceeds as instructed: otherwise it uses 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.

Click to expand/collapseUnsafe 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 that the suggested font is installed, or not, 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:

use fonts installed on our computer, publishing the font files (in the various formats) on the website's server;
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.

One 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 of them 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 website's server.

Click to expand/collapseSuggestions

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:

Use small fonts and not too many of them: 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 and they influence the time it takes to load the page, so too many may slow down display.
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.
Click to expand/collapseUsing web fonts in WebSite X5

There are many places in WebSite X5 where you can choose fonts to use: in the text editor, the template's header/footer editor and in all the windows where you can add text (contents, menu items, a button label, etc.).

Every time you have to enter text, the menu listing the available fonts will automatically display all the fonts that are installed on the computer. You can increase the choice by adding web fonts to this list, without having to install them but simply by adding them from the Internet (see How to use web fonts).

The fonts in the menu are listed in alphabetical order, and the web fonts have an icon next to them, so they are easy to recognize:

The font types can be easily identified by the icon next to them:

Google Fonts: fonts added from the Add web fonts window of WebSite X5 and linked to Google's server.

Online Web Fonts: fonts added from the Add web fonts window of WebSite X5 and linked to server of service that offers fonts.

Offline Web  Fonts:  fonts added from the Add web fonts window of WebSite X5 and published on the website's Internet server.

 


Best practices:

-

How to use web fonts

-

How to download fonts from Fontsquirrel