Chapter 1: Typography in Web Design – Contrast, Font Size & Hierarchy
September 6th, 2011
Typography derives from the Greek words ‘typos’ and ‘graphe’, meaning ‘form’ and ‘writing’. In web design it is the technique and art of arranging typefaces, which manifested when Tim Berners-Lee launched the first website in 1991. http://www.telegraph.co.uk/news/newstopics/
nationaltreasures/2194133/Sir-Tim-Berners-Lee-portrait.html
Contrast
The contrast between typography and background requires consideration of colour and font types. The purpose of text is to be perused and as such, it needs to be formatted in a way that enhances its message. To test that it contrasts enough with your background, screen grab your page. Then open your image editing software and reduce the image to grey-scale. The Canadian typographer, poet and translator Robert Bringhurst, published The Elements of Typographic Style, which has become a classic for typographers. This guidebook promotes that websites are designed to maximise their content and text: “Typography exists to honour content.” http://webtypography.net/
Of these two examples black text against white background, is less of a visual strain then vice versa and as such, books are usually presented this way.
Font Size
Small text became popular amongst graphic designers however, this only hindered the average reader. Therefore, ensure your font size is large enough to be viewed on different sized devices. Avoid setting body text below 12px for web based applications.
The size of typeface is measured by the height of the ascender to the descender. Good font size varies between 9-12 points for body copy. Note that different fonts in the same size will not appear with identical dimensions. Larger fonts are preferable for those with declining eye sight due to old age, so always consider your audience.
Hierarchy
The hierarchy of type size is of importance in establishing differences in content. Aesthetic boxes and colours may enhance the display of your web page. However consistent type face used throughout your pages will highlight the elements on the page to the readers. This increases your chances of hooking those who read your work for longer. Another way to achieve this is utilising different styles, serif and sans serif faces, capitals, italics or sub-headings.
(Continue to Chapter 2: Typography in Web Design – Space, Widows & Orphans, Alignment, Paragraphs, Measure).
Article written by
