Why is my website font different?

September 13, 2006

I recently completed a job for a government department.

The job was to make an HTML version of their printed annual report.

They made the comment that the font used on the website was different from the printed version.

Here is my response:

> As with colours, we have a limited number of fonts that are common to the popular operating systems. If we want the site to look the same on most computers, we can only use typefaces that exist on most (not all) people’s computers.

> The printed annual report has been set in Rotis Semi Serif for the body. Unfortunately, nice as the face is, it doesn’t exist on most people’s computers.

> So, the closest looking one was Georgia (designed by Microsoft). The site has been designed so that if the user doesn’t have Georgia, it will load Times and if not, a generic browser serif typeface.

> Bear in mind that Georgia was design for viewing on a computer screen, Rotis was not.

> It’s also worth remembering that if Georgia isn’t loaded, and the user view Times – the word flow changes according to the way the typeface is designed. Times has a slightly smaller x-height amongst other differences.

> This is part of what any good web designer will do. The process is part of the “optimise for web” aspect of web design.

> The cold hard reality is that unless everybody in the world has the same computer set up, it’s impossible to match exactly a print document to a web document. Indeed, the mediums are different enough to make web and print design different creative disciplines. Anyone who has started in graphic design and moved to web will be able to testify to that.

> That is why the PDFs are available for download. For anyone who wants to read the report offline and have the benefit of seeing the same as the printed document.

Here is a list of the Top 40 fonts reported for the common operating systems.

[http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml](http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml)

I had thought it was common knowledge… apparently not.

So, I hope this helps other web designers in setting client expectations.

{ 1 comment… read it below or add one }