Type Design (Typography)

Type Design, or ‘typography’ as it is commonly referred to, is the design and use of typefaces as a means of visual communication, using a combination of font styes, font sizes, spacing, and colour.  This article covers what font styles you can use in your website.

We could pretty much use any font style, colour and font size that is available, however, most Windows, Macintosh, or other PC users who will view your website, will only have a handful of fonts installed on their machines, so it's best we use the commonly installed fonts such as Ariel, Verdana, Times, Courier, Tahoma, Georgia, Helvetica and Calibri.  You can have a look at these various fonts, by playing around on your word processor, with some sample text and try changing the “Font Face”.

To get around the issue of folk only having just a few fonts installed on their PC’s, web designers incorporate a range of font style options, known as a 'font family', into the website.  For example, the font family may be set to say ‘Verdana’, ‘Arial’ and a global style ‘sans-serif’.  Sans-serif is a generalised style description which covers many font options, which according to most experts is ideal on web pages for the body text content.  In this example, the visitor to your site will see a Verdana font if they have it installed on their PC, if not, the browser will try to use Arial.  If Verdana and Arial were not available, then the browser would try to use any available sans-serif font installed on the PC.  There will always be at least one sans-serif font installed.  For ‘Headings’ on a webpage, web designers normally prefer a second global style called ‘serif’, which includes fonts like ‘Times New Roman’, ‘Times’, ‘Trebuchet MS’ and ‘Tahoma’.

The basic difference between the two global font styles of Sans-serif and serif, is with the serif style. With the serif style, the ends of some of the strokes that make up letters and symbols, have curly or pointy bits, whereas the sans-serif style is simply plain.  See the example to the left.

On this webpage, we have used the 'Times Roman' font (size 12) in our introduction paragraph and in the body of the text; we have used the 'Calibri' font (size 11).  For folk who have trouble reading smaller text, we have a tool called a 'Text-Sizer' which you can use to make the body text larger or smaller.  The Tex-Sizer is located just under the top navigation bar.  Try it out!