Fonts And Your Website
I recently read a post regarding the most popular fonts installed on a persons computer based on actual survey information. You can read the post here regarding Windows based users and it offers links to Mac and *nix users too.
This made me think a little bit about font choices and that perhaps sIFR which I wrote about previously has a much greater importance than any other typography method currently used on the web. So, let’s have a quick look at the font survey results for PCs and Macs:
On Windows based systems, the top 5 installed fonts were:
- Arial Black (95.40%)
- Verdana (94.10%)
- Comic Sans MS (93.80% – ‘cringe’)
- Arial (93.76%)
- Courier New (93.54%)
On Mac systems they were:
- Monaco (96.15%)
- Arial Black (95.61%)
- Arial (95.48%)
- Courier (95.48%)
- Helvetica (95.31%)
My favourite three fonts are Trebuchet MS, Georgia and Times New Roman. This is how they ranked:
- Trebuchet MS – Win (90.72%) – Mac (91.29%)
- Georgia – Win (83.78%) – Mac (90.79%)
- Times New Roman – Win (78.19%) – Mac(88.27%)
What really surprised me is that Times New Roman was only installed on 78.19% of Windows systems but on 88.27% of Mac systems. I also expected Georgia to rank a bit higher on Windows based systems than what it has in this survey.
So what does all this mean? Well, basically it is not safe to assume that a user will have the font you are intending to display on your website. Even with modern computers, CSS and rich websites, something as simple as knowing a user has a font is still not 100% certain, in fact, no single font rated 100% installation. Based on these findings though, it seems fairly safe to make the following assumptions:
- Arial and Arial Black are extremely popular on Windows and Mac systems.
- Times New Roman is not as a safe font as most would think, being installed on less than 8 out of 10 Windows systems that participated in this survey
- The default fonts included with the operating system and with office suites seem to be the ones that have the highest install rates
- When dealing with CSS, it is ESSENTIAL to offer at least a secondary font name when defining your styles. eg: [Tahoma, Arial, Helvetica] or [Georgia, Monaco, "Times New Roman"]