Font style trends on the web

Font styles specified by key web sites

Think of this from the point of view of a user who browses the web, then looks at your web site, perhaps links to other web sites from yours, then exits back to the rest of the web. If the user is happy with the browsing experience outside your site, how should you ensure the user's satisfaction within your site? And if your site causes the user to change the browser settings, will the user then be happy elsewhere on the web?

Examples of font styles in practice

Consider a web site concerned with "Middleville, past and present", where Middleville is a village in the UK . The sites it links to, and those that link to it, probably include the "Digital Midlands" sites.

Perhaps on-line news services would link to it. Perhaps the user got there from Google, or has recently been doing some shopping. Perhaps they stopped-off to see what graphics designers are doing with CSS, at CSS Zen Garden.

(I've tried to find the most representative font properties for the sites noted in the table below).

 
Web site Main text properties
"Digital Midlands"
Digital Handsworth 0.8em Verdana
Digital Midlands 74% Arial
Exploring the Potteries 12px Arial
Literary Heritage West Midlands 100% Arial
Revolutionary Players 0.8em Verdana
Secret Shropshire 10pt Geneva, Arial
Staffordshire Past-Track CSS+<font>, Tahoma, but equivalent to between 13px & 14px Arial
Windows on Warwickshire small Tahoma, Verdana, Arial, but equivalent to between 13px & 14px Arial
On-line news services
Ananova 100% Arial
BBC CSS+<font>. 13px Verdana, and a size value in some articles.
Guardian <font>, but equivalent to 13px Arial
Independent equivalent to 13px Arial
Telegraph 12px Verdana
Times 13px Arial
Major sites
Google (summary text) CSS+<font>, equivalent to 13px Arial
Amazon.co.uk <font>, Verdana -1, equivalent to 13px Verdana
eBay small Arial, equivalent to 13px Arial
CSS Zen Garden
Home page (Tranquille) 9pt Georgia, equivalent (in size) to 13px Arial on my PC
Mediterranean 12px Verdana
Austrian's Dark Side 12px "Courier New"
Invitation 13px Georgia
Odyssey 12px Arial
Revolution! small Georgia, Tahoma, Verdana, equivalent (in size) to between 13px & 14px Arial
punkass 11px Verdana
15 petals 90%, close to 13px Arial on my PC
Government sites
10 Downing Street Browser dependent! It appears on my PC either as 16px "Times New Roman", or 13px Arial.
UK Parliament small Verdana, equivalent to 13px Verdana
Inland Revenue 70% Verdana
Department for Work and Pensions 12px Arial
Child Support Agency 88% Arial
Academic sites
Birmingham University <font>, equivalent to 13px Arial.
Glasgow University 0.8em Verdana

How have we arrived at this state?

We appear to have arrived at a state where many, perhaps most, web sites on the planet end up with a similar text size, via a variety of properties. I think there is some sort of reinforcement among users, authors, and browsers. I'm not sure what came first, but I suspect something like this:

  • If most users are using browsers that default to "16px Times New Roman", what should an author specify who wants to use a common sans-serif font? The following look about the same practical size as "16px Times New Roman": "13px Arial"; "80% Arial"; "0.8em Arial"; "12px Verdana". They are all typical web site specifications.
  • If most web sites specify such a size via a range of properties, what should browsers have as their factory-settings? The only one that now makes sense appears to be: "16px Times New Roman"! Although "15px Georgia" looks about the same size as "16px Times New Roman", it might make "80% Arial" or "0.8em Arial" look too small, more like "12px Arial". If browsers used "16px Arial", (or especially "13px Arial"), and users did whatever was necessary to make this size comfortable for them, then the following (common) web site specifications will look too small: "80% Arial"; "0.8em Arial". So they are probably not good factory-settings for browsers.
  • So, now, what motivation is there for users to change their browser settings? Most users probably don't know how to anyway. But they now mostly see, on the web, sans-serif text that looks about the same size as their browser settings. For sites, (like mine), that doesn't specify font parameters at all for main text, the user will see "16px Times New Roman", which is about the same practical size. If this is too small for them, perhaps they have to increase the size some other way. For example, I believe many users use their systems configured with fewer, hence larger, pixels on the CRT monitors. Perhaps they run the monitor at 1024x768 instead of 1280x1024.

This is like an "Evolutionary Stable Strategy". Any divergence by users, authors, or browsers is likely to be less than ideal relative to most of the others. A web site that specifies "100% Arial" has text that is too big for most users. Users who change their browser settings are likely to find that either "13px Arial" or "80% Arial" looks wrong, perhaps too small. And so it goes!

Any theory of what, if anything, to specify for a web site needs to take into account what most other web sites do, what most users do, and what most browsers do. Otherwise, the result may look poor to most users, in spite of appear to be an impeccable theory.

Questions

How do those people who object to web sites changing the main text size deal with all of these sites?

They are surely not going to cause all the sites to change. So perhaps they either just mutter under their breath, or they adapt to these sites, for example by changing the browser settings? And if they have adapted their browser settings to cater for these sites, why shouldn't authors conform to their adapted settings? (Are the people who object to what these web sites are doing running with "16px sans-serif" as their default browser font?)