Web Type Revolution

Typography” and “web” are two words that have never played well together. During the 20-year history of the web, despite the radical improvements in computers and display technologies, fonts and type layout for the screen have remained almost unchanged.

Change is coming, though. In fact, it’s already here, and you may have started noticing that some websites seem to be expanding their repertoire. The ability to add web fonts to any site is going to completely change the way you view design on the web.

While the new trends in web typography are not just about the availability of new typefaces—in parallel to the rise of web fonts, web browsers have been adding new font and text styles—the lack of typefaces on the web undoubtedly has been the greatest obstacle.

A Brief History of Web Typography

Ever since Tim Berners-Lee made his first web page in 1990, designers have been dependent on the fonts available on the computer of the person viewing their work. At first, we couldn’t even specify the font or style; that was solely at the viewer’s discretion. Then, we could choose from a small list of the 10 “Core Web Fonts” that Microsoft and Apple made sure were preinstalled on every computer they produced. But really, when rubber hit the road, for the last 15 or so years, designers have been choosing from a list of five typefaces for the vast majority of their designs: Arial, Georgia, Times New Roman, Trebuchet MS and Verdana.

When the publisher of Fast Company relaunched its blogs, www.fastcodesign.com, www.fastcocreate.com and www.fastcoexist.com, it chose a bold typographic voice for each to distinguish the three otherwise identical designs. Typefaces used: FC Izou Slab, Museo Sans, FC Kaiser, Grumpy-Black36, CaslonFSMedium.

When the publisher of Fast Company relaunched its blogs, www.fastcodesign.com, www.fastcocreate.com and www.fastcoexist.com, it chose a bold typographic voice for each to distinguish the three otherwise identical designs. Typefaces used: FC Izou Slab, Museo Sans, FC Kaiser, Grumpy-Black36, CaslonFSMedium.

If type is to text what voice is to speech, imagine a world with only five voices. Everybody begins to sound pretty much the same. That’s been the state of web typography.

During the digital type revolution of the 1990s and 2000s, print designers experimented with typefaces, both old a new, to push the boundaries of their craft. Web designers, on the other hand, were forced to make do with either embedding text in images or using Flash if they wanted to do anything even remotely interesting. As Jim Kidwell of web font software company WebInk has noted, “There was definitely a pent-up desire for typographic variety on the web.” But when you only have five choices, what’s the point of trying to stand out?
Amazingly, it wasn’t technical reasons that prevented web designers from using the same fonts that their print counterparts were using, but legal ones. In fact, Microsoft’s Internet Explorer browser has included the ability to use embedded font files since 1997, using its own proprietary Embedded Open Type font file format.

The problem was the licenses. Seeing the effect the web was having on the intellectual property of the music and movie industries, type foundries were reluctant to license their fonts to be used on the web out of a fear that their property would be the next to be stolen. Without legal fonts to download, browser manufacturers simply didn’t want to take the chance of adding new capabilities that no one could use.
Then something amazing happened.

An Explosion of Typefaces

Web Design TipsIn 2008, Apple released Safari 3.1, which took the bold step of allowing the web browser to download any Open Type (OTF) or True Type (TTF) font file. To keep up, Google Chrome, Firefox and Opera soon followed suit. Although Microsoft refused to do the same for Internet Explorer, developers quickly created tools that could convert more common font formats to the EOT format.

Late in 2009, another important advancement was made in the form of a new font format especially tailored for the web. The Web Open Font Format addresses a major concern from type foundries, providing a basic layer of protection for the font file to prevent it from being installed and used on a computer.

By 2010, virtually every web browser being used— including browsers on tablets and smartphones—supported web fonts in some format, and the number of legally available fonts has ballooned into the tens of thousands.

Given the snail’s pace at which web browser technology seems to progress, it may come as a surprise how quickly web fonts have come on the scene. It’s like giving a kid who had been confined to only using the Crayola eight-color box the 50,000-color box.  These new capabilities are certain to challenge and push web designers at first as they grow accustomed to their new options.

Creep fest: Creating a spooky camping ground effect, www.kccreepfest.com uses handwritten and serif fonts with a complementary illustration style. Typefaces used: Copse and Homemade Apple.

I’ve even heard some designers argue that this is too much. Since the web has never known anything more than the core web fonts, they see a danger in suddenly adding tens of thousands of untested fonts that may or may not work well on the screen. But typography expert Erik Spiekermann thinks that this argument is nonsense. “That would be a very arrogant thing to say. Like saying people should continue to eat bad food because they were used to eating at McDonald’s when they were kids,” he says.

But it’s important to remember that the majority of fonts were designed for print—not screen display. “Intended use is critical, and a good font’s optimizations should flow from it,” says Gregory Veen of web ront wervice bureau Typekit. “For better cross-platform rendering, fonts intended for paragraph text should include hinting, while fonts intended for headline text can benefit from being served with PostScript outlines.”
So the question isn’t whether designers can handle web fonts, but what new typographic trends we’ll begin to see.

The Web font Service Bureaus

Top Web Font Service Bureaus
There are a variety of web font service bureaus online, each with its own strengths and weaknesses, not to mention pricing structures. Here are some of the most popular, in no particular order:

While in theory you could use any font you wanted on a website, the reality is that all fonts have End User License Agreements (EULAs), dictating what you legally can do with them. Very few of these EULAs include the right to simply embed the font on the page. There are sites that sell font files that can be used directly in a web page, most notably FontSquirrel.com, Fontspring.com and Fonts.com from Linotype. But only a few thousand fonts are available this way.

A new industry is growing that’s not selling web font files, but providing use of the fonts on websites. They work as a third party, allowing you to point to the font files on their computer servers (the place where web files are hosted). You never actually have control of the font file itself. For a price—generally a subscription structure—this can ease the pressure for the less technically inclined.

Veen says that web fonts can require a lot of technical font expertise, testing and development work.  “Using a service instead of owning font files lets you outsource all of that to the service, abstracting it behind the simple snippet of code that enables the service on your site,” he says.

Kidwell agrees, noting, “One large benefit is that the service takes care of all of the font-quality improvements and browser-compatibility issues.” This means that, as the technology advances, you’re always using the best available. “The service can determine which font type is best for each browser/OS combination down to very granular version support, and can maintain a wide variety of formats to dynamically deliver just the right font to each site visitor,” he explains.

The web font service bureaus all have their own strengths, weaknesses and pricing structures, varying from free to hundreds of dollars depending on a variety of factors including the font being licensed and the traffic to your site.

Without a doubt, though, the 800-pound gorilla in the room is Google, which now offers several hundred web fonts for free. There has been some debate over the quality of the fonts Google is offering, especially with the Roboto font, which has been called a “Frankenfont” because it was kludged together from various other fonts. “Some people will be happy with what Google offers, mainly because it’s free,” Spiekermann says. “The market will decide. I’m very confident that good designers will pick good typefaces.”

The Future of Web Typography

10 Web Type Trends

When working in web design, you need to be on the cutting edge of visual trends. Look to these 10 trends in web typography to take us through 2012 and beyond.

The future of typography on the web is undoubtedly bright. Now that the stifling limitation on typefaces has been at long last lifted, designers are beginning to flex their muscles and finally have a reason to experiment with some of the cool new capabilities provided by CSS3, the language used to style web pages. And there’s more where that comes from. Not only is CSS4 already under development—promising even more font effects such as outlines—but browsers will soon allow you to use the full features available to Open Type fonts.

The web browser Firefox is leading the way, unlocking the Open Type capabilities that were once the domain of print software like QuarkXpress and Adobe InDesign. Web designers can access ligatures, small caps, old style numbers and other characters to really set their designs apart.

The irony is that just as designers are gaining greater control of typography on the web, it may be taken away from them again. The rise of smartphones and tablets has had an interesting side effect on web content in the form of web-enabled reader apps such as Flipboard, Read It Later and InstaPaper.

These services provide a way to read the content of an article from a web page without the web page, standardizing the display and typography of the article. These services automatically remove all of the extraneous elements such as navigation, branding and advertisements, allowing readers to focus on what they’re actually interested in: the content.

Whatever the future of web typography holds, the fact is that we have finally turned a corner. The rise of web fonts is already leading to a renaissance in type design for the screen, allowing the web and typography to play nicely together.

Texts for Typophiles:

  • Everything you need to know about the art and science of words on screens and pages. Mastering Type by Denise Bosler.
  • Creativity tanks running on “E”? Get inspired with Jim Krause’s Type Idea Index