8 Pivotal Developments in Web Typography

By   |  Stashed in Webdesign

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.

About the Author

Tom is a writer and designer from the UK who works with a supplier of genuine Epson ink, toner, paper and printing accessories. You can read more of his writing on their blog, the CreativeCloud.

More posts by

Website

  • http://www.blog.exxcorpio.com Luis Lopez

    Some goo information here, I didn’t know that CSS was since 1996, I thought it was most recent, because before wasn’t that important.
    What about lately and the letter press effect with CSS.
    .-= Luis Lopez´s last blog ..50+ HD Desktop Wallpapers For Your Inspiration – Abstract and 3D =-.

  • http://www.crearedesign.co.uk Michael Angrave

    It’s amazing how far things have come in such a relatively short time. I’m interested to learn more about typekit? I’m looking forward to the day when all text on websites can be real text without having to lose any of the freedom with design.

    I wonder where it will go in the next 20 years!
    .-= Michael Angrave´s last blog ..Website Design – Introduction to JParallax (Part 2) =-.

  • http://designwannabe.com Design Wannabe

    Wow, some really good info on typography. thanks
    .-= Design Wannabe´s last blog ..Limkis =-.

  • http://twitter.com/lucast182 Lucas Tadeu

    Great info! I really wanted to know more about web typography.
    .-= Lucas Tadeu´s last blog ..lucast182: RT @tweetmeme Connect with Designers on Facebook | styl.eti.me http://bit.ly/2cU1O1 =-.

  • http://www.pixelflips.com Phillip

    Awesome article! I just thought I would mention http://fontdeck.com from the guys over at Clearleft & OmniTi. Looks very interesting in addition to typekit.

  • http://10steps.sg Johnson Koh

    Learnt some great information here. Can see the evolution clearly with those years stated. Thanks Tom!
    .-= Johnson Koh´s last blog ..We are ONE Year Old =-.

  • http://robertoblake.com Roberto Blake

    Typography has certainly come a long way. Great collection of images and information here by the way. A lot of people don’t realize that CSS was over a decade old, LOL. In fact I still know designers who are clueless about it and still use font tags.
    .-= Roberto Blake´s last blog ..20 Top Tier Photo-Manipulations =-.

  • http://belinkddesign.com Kim H

    It’s still probably going to be a while before we see web designers using various fonts, and while it’s nice to see a variety of fonts, I still shudder in horror to think of the amount of typographical mistakes that will be present after the release of such things as Typekit.
    .-= Kim H´s last blog ..WordPress: Two Post Pages =-.

  • http://www.ar-ekurye.com kurye

    8 Pivotal Developments in Web Typography great article thank you.

  • http://maddon.net/blog Madeline Ong

    Awesome post! A short history of web typography, detailed enough to explain the pivotal developments, but brief enough to keep the reader interested. I can’t wait to see what happens next in the web typography scene. The possibilities are thrilling.
    .-= Madeline Ong´s last blog ..Book reviews =-.

  • http://www.crearecommunications.co.uk Damian Web

    that was a really interesting read! The discussion of typography within sites is always a good one, some sites have really nice fonts but usually have to go through the pain of downloading them first. I tend to use images for really unique fonts and would be great if someday soon there was an online database full of fonts and somehow worked so that fonts appear straight away!
    .-= Damian Web´s last blog ..The Importance Of Connecting With Other Bloggers For SEO Purposes =-.