|
|
 |
Contents of this page: Working with fonts | Available font faces | Available font sizes | Available font styles | Text samples of common webfonts | Text images
Working with fonts
Available font faces
Defining font faces in the site is very limited: whether a font face can be viewed by the visitor is dependent of the fact whether these fonts are installed as software on the visitor's computer. Only a limited number of font faces are more or less standard present in most Windows, Linux and Mac systems and are therefore considered to be usable 'webfonts'.
They are divided up in three major groups: serif fonts (characters with 'flags' at the extremities, originating from the time that characters were carved in wood of stone), sans-serif fonts, and monospace fonts (where every character, as will the i as the w, occupy the same width in the screen).
Usable webfonts are considered to be:
serif fonts: Georgia, Times New Roman, Times, serif
sans-serif fonts: Verdana, Arial, Helvetica, sans-serif
monospace fonts: Courier New, Courier, mono
It is possible and common practice to define multiple options, usually 3 or 4, separated by a comma and a space, e.g.:
| Font face: | Verdana, Arial, Helvetica, sans-serif |
If the first defined font face hasn't been installed in the visitor's computer, the browser programme will look for the second defined font face, and so on.
It is advised to define 'serif', 'sans-serif' or 'mono' at the end. These are no real font faces, but general definitions for the three major groups of font faces.
In almost any browser programme, for each of these groups a default font face is defined, taken from the list of those font faces actually present when the browser programme was installed. In this way, the visitor will always roughly view your site in the intended look.
Around 1999, for a short time it became the fashion to include font software, so-called 'bitstream fonts', in websites. It didn't caught on, because of the extra download time required and the limited ability of the various types and versions of browsers to correctly display the fonts (while these downloadable fonts were meant to actually solve this problem!).
Available font sizes
For defining the font size, only the integers 1 till 7 can be used:
The various systems differ in displaying the font size. On Mac systems, particularly the older versions, characters of the same size are displayed smaller than on Windows and Linux systems.
Another way of defining font sizes is the 'relative font size': a number (integer) combined with a "+" or a "-". With this option, the size of characters is defined in respect of the default font size of the visitor's browsing programme.
Available font styles
To make texts or text parts 'bold' or 'italic', and to transform text parts into 'hyperlinks', you need to use HTML encoding. With HTML you can also give text parts deviating font faces and font sizes.
How to do this, with simple examples, is set out on the page Working with HTML.
 Text samples of common webfonts
The Text samples of common webfonts are meant to help you in making a choice from the various font options.
It contains an overview of text samples in the most common font faces, in all permitted font sizes, and in the font styles 'default' and 'bold'.
All along the same piece of text is used, to enable comparison of text volume in different font faces.
Besides, it is meant to illustrate weak points of some of the fonts, such as Times font size 1 (difficult to read) and Arial font size 1 (hardly any difference between 'bold' and 'default').
Choosing font faces is evidently a matter of taste and culture. Therefore no lecture about 'rules' or 'conventions' such as limiting the number of font faces.
One important aspect, however, has all to do with the limitations of reading from a screen: text in sans-serif font is easier to read than text in serif font. It cannot be helped that the complicated shape of serif characters isn't reproducable accurately on the screen.
For the sake of clearity: the 'Text samples' are an 'image' (to prevent your browser from displaying deviating font faces!) of texts as displayed on a Windows system. Make sure that your browser doesn't scale down the image and that it is displayed in true size!
Text images
There is a way of getting round the limited choice of fonts, by transforming text into an image, as is done above in the 'Text samples'. For this purpose you need an image-editing programme.
As you can insert images at many places in QwikZite, you can in this way use all possible font faces.
This technique is heavily practised on the web, especially for buttons and page titels, but it has drawbacks:- By applying images it will take longer for pages to download.
- Text images cannot be indexed by search engines.
- The text cannot be reproduced by copying/pasting.
(A well-meant advice: always display address data as text and never as image!)
Go to top | Available font faces | Available font sizes | Available font styles | Text samples of common webfonts | Text images
|
|
|
|
|
|
Latest changes in this page |
|
|
|
|