Skip to main content Skip to navigation

Fonts and appearance

Various data about the appearance of each page was recorded. This included information about the body font such as its size, face and colour as well as the page's predominant background and foreground colours. Where the home page didn't contain any normal 'body' text, I went into the site and picked the most consistently used typeface and noted its appearance. Many different font sizes were used so I've restricted the bar chart to the top ten. The question of whether or not fonts and colours could be customised referred to the existence of any kind of widget or set of buttons for performing this action. It didn't stretch to being able to alter the style sheet from Firefox's menu, for example, and nor did it cover alteration of the site's appearance from an accessibility page.

fonts0.png



Frequency Percent Valid Percent Cumulative Percent
Valid Black 71 55.5 55.9 55.9
Blue 12 9.4 9.4 65.4
Brown 2 1.6 1.6 66.9
Grey 35 27.3 27.6 94.5
Green 2 1.6 1.6 96.1
White 5 3.9 3.9 100.0
Total 127 99.2 100.0
Missing 99 1 .8

Total 128 100.0

Black was the most common choice for font colour but grey was also popular, particularly #333333.

fonts5.png



Frequency Percent Valid Percent Cumulative Percent
Valid 0.65em 1 .8 .8 .8
0.75em 4 3.1 3.1 3.9
0.7em 8 6.3 6.3 10.2
0.85em 2 1.6 1.6 11.8
0.8em 12 9.4 9.4 21.3
0.9em 1 .8 .8 22.0
100% 1 .8 .8 22.8
10pt 4 3.1 3.1 26.0
10px 3 2.3 2.4 28.3
11px 4 3.1 3.1 31.5
1.25 * xx-small 1 .8 .8 32.3
12px 11 8.6 8.7 40.9
1.2 * x-small 1 .8 .8 41.7
13px 2 1.6 1.6 43.3
2 (using font tag) 1 .8 .8 44.1
63% 1 .8 .8 44.9
64% 1 .8 .8 45.7
67% 1 .8 .8 46.5
68% 3 2.3 2.4 48.8
69% 1 .8 .8 49.6
70% 8 6.3 6.3 55.9
70.5% 1 .8 .8 56.7
71.25% 2 1.6 1.6 58.3
72% 1 .8 .8 59.1
75% 6 4.7 4.7 63.8
76% 1 .8 .8 64.6
80% 11 8.6 8.7 73.2
82% 1 .8 .8 74.0
82.5% 1 .8 .8 74.8
87% 1 .8 .8 75.6
8pt 3 2.3 2.4 78.0
90% 2 1.6 1.6 79.5
93% 1 .8 .8 80.3
94% 1 .8 .8 81.1
9pt 1 .8 .8 81.9
-1 (using font tag) 2 1.6 1.6 83.5
Small 14 10.9 11.0 94.5
Undefined 3 2.3 2.4 96.9
x-small 3 2.3 2.4 99.2
xx-small 1 .8 .8 100.0
Total 127 99.2 100.0
Missing 99 1 .8

Total 128 100.0

The different choices of font size was extremely wide and it's interesting to note that some of the most popular choices were actually absolute sizes, rather than relative ones. Sizes given in ems were rounded to the nearest half value. Also, a small number of pages still used the font tag!

fonts1.png



Frequency Percent Valid Percent Cumulative Percent
Valid Arial 60 46.9 47.2 47.2
Helvetica 2 1.6 1.6 48.8
Lucida Grande 2 1.6 1.6 50.4
Trebuchet MS 1 .8 .8 51.2
Undefined 1 .8 .8 52.0
Verdana 61 47.7 48.0 100.0
Total 127 99.2 100.0
Missing 99 1 .8

Total 128 100.0

There was a fairly even split between Arial and Verdana for the primary font face.

fonts2.png



Frequency Percent Valid Percent Cumulative Percent
Valid Black 1 .8 .8 .8
Beige 1 .8 .8 1.6
Blue 7 5.5 5.5 7.0
Cream/off white 1 .8 .8 7.8
Grey 3 2.3 2.3 10.2
Purple 1 .8 .8 10.9
White 114 89.1 89.1 100.0
Total 128 100.0 100.0

White was the overwhelmingly favourite background colour, although this was the site background, rather than text background.

fonts3.png



Frequency Percent Valid Percent Cumulative Percent
Valid Black 3 2.3 2.3 2.3
Beige 1 .8 .8 3.1
Blue 73 57.0 57.0 60.2
Cyan 2 1.6 1.6 61.7
Green 8 6.3 6.3 68.0
Grey 5 3.9 3.9 71.9
Not applicable/no dominant foreground colour 5 3.9 3.9 75.8
Orange 2 1.6 1.6 77.3
Purple 7 5.5 5.5 82.8
Red 18 14.1 14.1 96.9
White 1 .8 .8 97.7
Yellow 3 2.3 2.3 100.0
Total 128 100.0 100.0

A blue of some description (be it light or dark) was the most commonly used foreground colour. Here, I'm referring to foreground elements other than the text, such as banners, borders etc.

fonts4.png



Frequency Percent Valid Percent Cumulative Percent
Valid No 121 94.5 94.5 94.5
Yes, style sheets 2 1.6 1.6 96.1
Yes - test size 3 2.3 2.3 98.4
Yes - text size, background colour 1 .8 .8 99.2
Yes - text size, style sheets 1 .8 .8 100.0
Total 128 100.0 100.0

Most sites did not offer the facility to customise their appearance by clicking a button or link but a few did allow this via choosing a different style sheet or making alterations in an accessibility section. The chart above simply records those sites that had these options directly accessible from links or buttons on the home page.