8 Pivotal Developments in Web Typography

In: web resources

15 Aug 2009


The world is full of stunning, unusual and powerful fonts. We see them in newspapers, magazines, on TV and on billboards, but rarely on websites. Website authors are still very much limited to using the 10 or so fonts that are supported on computers around the world.

Of course, unusual fonts can be incorporated into websites, but usually only as background images. This has severe limitations, as images are expensive to transmit in terms of bandwidth, can look different on different screens, are more time consuming to create and are even harder to translate into Japanese (or any other language for that matter)!

In this article, we look back at the major innovations that that have made web typography what it is today. We find out why such a limited number of fonts dominate the web, learn how they have become more pleasant to read, and look to the near future, when using any number of different fonts to style the text of your website will become reality.

1988: Subpixel Rendering Massively Improves Font Appearance

subpixel-rendering

Each individual picture element (pixel) on an LCD screen is, in fact, composed of three subpixels: one red, one green and one blue. Although these subpixels are invisible to the naked eye, they can be seen through a magnifying glass.

Traditionally, a line on an LCD screen could only be rendered to within the width of one pixel, giving it a jagged edge and a blurred appearance. Subpixel rendering, invented by IBM in 1988, makes it possible to render a line within the width of one subpixel (three times smaller than a pixel), adding greater definition to text, making it far more pleasant to read on a screen.

1992: Mosaic Displays Inline Images & Text

mosaic

Mosaic was not the first graphical web browser, but it was the first to display images inline with text, prompting designers to make typography that looked attractive beside images. Developed by the National Centre for Supercomputing Applications (NCSA), it was released in 1993 to wide critical acclaim, catalysing the internet boom of the 1990s.

Mosaic’s creators went on to release the superior Netscape Navigator in 1994, and by 1998, Mosaic had been consigned to the archives (although it can still be downloaded for free from NCSA). Nevertheless, Mosaic’s influence is still evident in Microsoft Internet Explorer and Mozilla Firefox. Internet Explorer 1 to 6 even stated “Based on NCSA Mosaic” in the About box.

1996: Microsoft Develops The Internet’s Core Fonts

webdings

In 1996, Microsoft began the “core fonts for the Web” project, with the aim of designing a standard pack of fonts for use on the internet. Ten fonts were selected on the basis of them being highly legible on screen in a range of different languages and them offering a wide range of typographic timbres within a small number of typefaces.

The 10 fonts chosen are still omnipresent today, much to the dismay of some. They are Arial, Comic Sans MS, Times New Roman, Verdana, Andale Mono, Courier New, Georgia, Impact, Trebuchet MS and Webdings.

1996: CSS Makes It Easy To Change Fonts Sitewide

css

Creating websites with fonts of different sizes and colours was an arduous task prior to the release of CSS in 1996: each individual variation on a standard font had to be described, in full, within the HTML.

The development and adoption of CSS greatly simplified this tedious process, by separating content (usually written in HTML) from presentation or style. With CSS, presentation information, such as font colours and sizes, as well as borders, margins, backgrounds and alignment, were moved to a separate style sheet so that any changes made to the style sheet are then implemented throughout the site automatically.

2005: sIFR Enables An Infinite Number Of Fonts To Be Used

sifr

Using HTML and CSS, website authors can use any font they wish. However, if the chosen font is not installed on users’ computers, it will not show up as intended in their web browsers. This is a real problem, as Microsoft’s core fonts for the web are typically the only ones that are universally installed.

With sIFR it is possible for any font to be used in a website, even if it is not installed on users’ computers because it embeds text in websites as a Flash image.

Flash is now used extensively on numerous high profile websites, but it does have significant drawbacks. Firstly, for Flash to work, users must have JavaScript enabled and must have downloaded the Flash plugin. Secondly, it’s not suitable for replacing large chunks of text as it takes ages to load.

However, sIFR remains a huge advance in web typography because it again pushes the boundaries of what can be done when designing a site.

2007: Liberation Fonts Released Under GNU

liberation-fonts

Liberation is the collective name for three TrueType font families, released by Linux company Red Hat, that have been designed to liberate us all from the shackles of Microsoft’s core fonts.

These three new font families: Liberation Sans, Liberation Serif and Liberation Mono, match the metrics of Arial, Times New Roman and Courier New so closely that they are, in fact, interchangeable. Liberation fonts are available to download for free under the GNU General Public License.

1998 & Beyond: The Era Of Web Fonts

font-face

This entry should really appear higher up in this chronological list, as what are colloquially known as “web fonts” were actually invented in 1998. Even so, the potential of web fonts is yet to be properly explored. However, they are undoubtedly the future of web typography.

So what are web fonts? Instead of converting fonts into Flash images as is the case with sIFR, which we all know has its limitations, “web fonts” make it possible to host and serve fonts from a website’s server, so that they don’t have to be installed on users’ computers. Therefore, as long as the website has permission from the rights holder to use the font, they can use any font the want and any user browsing with a compatible browser will be able to view the site as intended without having to download and install the font.

Due to ongoing copyright issues, web browser developers have thus far refused to support some of the most popular web fonts (TrueType fonts), so the technology has not seen widespread use. Nevertheless, the age of the web font is almost upon us and websites will never look the same again! Many designers have begun using this sort of progressive enhancement on their sites using the @font-face declaration.

2009: Typekit

typekit

It’s no coincidence that major browsers have taken their time to embrace web fonts – the whole issue is a legal minefield. Many fonts, like other images, are protected by copyright and cannot be reproduced without the expressed permission of the copyright holder.

Typekit offers a solution to this problem. Working closely with various font foundries, they have developed a consistent web-only font linking license, giving Typekit users access to a vast library of great fonts for a very low price (or free for some customers). Reliance on core fonts could soon become a thing of the past.

Comment Form

About this blog

This blog delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from: CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.