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.
A font's readability essentially depends on factors such as the family it belongs to, the x-height and the overall character size.
|
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. |
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:
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. |
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:
|
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:
|
Best practices: