The chinese created the first printed book in the year 868, and invented movable wooden type between 1041 and 1049. The Koreans invented the first movable metal type around 1230. In the west, Johann Gutenberg is credited with inventing the printing press and first latin movable type between 1448 and 1452. If we take this milestone as a starting point, typographers and designers working with latin type have had hundreds of years to perfect the practice. While Gutenberg's black letter bibles look archaic by todays standards, typefaces we recognise and would be comfortable with, appeared surprisingly soon after. Nicolas Jenson's Roman was designed in 1469 and the ubiquitous Garamond by Claude Garamond has been around since 1528.

Practicioners in type then, have had over 550 years to refine and codify the use of typography. Why then, is much of the typography on the web so poor? There are a number of factors at play here —

The democratic nature of the web has allowed everyone to publish a website. There are parallels with the desktop publishing revolution in the 1980s. The introduction in 1985 of MacPublisher followed by PageMaker and Quark XPress coupled with the Apple Laserwriter printer brought publishing to the masses.
The quality of general design and typography dropped substantially for a number of years as clients bypassed design professionals in favour of self publishing. Gradually they realised the value of design and returned to the professionals to produce their printed material.

Similarly on the web, visual web editors such as FrontPage, PageMill and others brought web publishing to the masses. More recent developments like content management systems (CMS) such as WordPress, Joomla and Drupal, coupled with readily available templates further encourage self publishing. While there are some very good templates available, these tend to concentrate on layout and visual design rather than embracing typographic standards. Type is functional, but an afterthought.

Even where organisations employ a designer, the process of website building frequently has said designer handing his designs to a developer to implement. Many things can change at this point - the developer may not be faithful to the design specifications, the designer may have chosen unworkable fonts in their design. Even now, many designers and developers still rely on the core web fonts, (Arial, Helvetica, sans-serif or Georgia, Times, serif). Many prominent sites give little consideration to hierarchy, type size, line-spacing or whitespace.
It is fair to say that there are few sites on the web which give typography the attention to detail it deserves.

Typography is hindered by the specification of HTML and CSS themselves. Print designers routinely kern letter pairs or adjust tracking to avoid widows and orphans (stray words separated from the parent text, usually at the end of a paragraph or the start of a page). There is a letter spacing property in CSS which equates to tracking, but kerning is currently not possible in CSS. Avoiding widows and orphans is also not possible, although Widon't, a javascript plug-in attempts to solve this problem by adding a non-breaking word space between the last two words in each paragraph.
This can only be partially successful as the designer cannot completely control which font the text would be displayed in, or to a degree, its size. A certain amount of text reflow across browsers is inevitable. CSS4 promises improved typographic controls, but only a draft specification exists at the time of writing.

The variety of browsers across diverse operating systems causes further difficulty. What is supported by one browser is not necessarily supported by the next. Firefox for example, uses the fonts internal kerning tables while Internet Explorer does not, which produces different letter spacing between the two and consequently a different text flow.
Operating systems use different technologies to render fonts. Font smoothing in OS X is very different to Windows Cleartype. Helvetica Neue, for example, renders beautifully on OS X but notoriously badly on Windows. Some browsers (Safari 1.0 on windows XP) use their own rendering engine while others leave the rendering to the operating system.
The variation in font file formats across platforms (TrueType, Postscript, Opentype) gives rise to further inconsistencies - Windows uses ClearType to smooth Truetype, but not Postscript or Opentype, for example. In IE9 on Windows Vista and 7, Cleartype is enhanced by DirectWrite.

The traditional approach to web typography is to use the core web fonts, ensuring that the specified font is available on the end users computer. This is obviously very limiting in terms of typographic choice and a number of techniques have been developed to mitigate this. Web designers used image editors such as Photoshop to create images of their chosen fonts which are then used to replace the html element. Technologies such as sIFR, FLIR and Cufón emerged to make this kind of replacement more dynamic, but image replacement can, and usually does, have a detrimental effect on the accessibility of a web page. It can also impact negatively on SEO (search engine optimisation).
The introduction of @font-face was intended as a panacea to designers - the ability to embed fonts directly in the page should allow the creative control they wanted but preserve the accessibility of the text. In practice @font-face is hindered by fonts EULA, fonts are poorly hinted and many of the freely available fonts are poorly drawn and lack kerning tables.

We are currently in the Wild West of web Typography
― Thomas Phinney, 2011

Serif versus Sans-serif

Conventional wisdom among Graphic and Web Designers suggests that serif typefaces are more legible than sans-serif when used in print, with the converse being true on-screen. Empirical studies have not confirmed this conclusion. Research by Ole Lund and Alex Poole found no significant difference in legibility between serif and sans-serif, either in print or on-screen. This project therefore, will examine both types. There is a toggle at the top right of the screen to switch between serif and sans-serif (not supported in Safari 5.01).

Aims, Objectives & Limitations

The purpose of this research is to examine current techniques and best practices in typography on the web and identify their strengths and weaknesses. The conclusions of this examination will result in a series of practical recommendations and be implemented in a number of downloadable stylesheets which may be included in other stylesheets, frameworks or CMS.
The research covers type rendering and practice on the main browsers on Windows XP and 7, OS X and Ubuntu 10.04. It does not cover other Linux varieties, iOS or Android.

The Ideal

In an ideal world, typefaces specified by designers would be viewable by end users. Tools would exist which would enable typographers to control factors such as kerning, hyphens, ligatures, orphans and widows. Operating systems and browsers would render the fonts beautifully and faithfully.
Some of these tools exist today. Others exist as javascript plug-ins or as specifications in the as yet undeveloped CSS4. Wider adoption of OpenType promises extended character sets and alternative glyphs.