The changing typography of the Web

Since the World Wide Web’s earliest days, whether you were shopping on Amazon or researching on Google or catching up on news at latimes.com, chances are you were looking at just one of four typefaces -- Arial, Verdana, Georgia or Times -- each formulated for computer monitors and trusted by web designers to display properly on your screen.

In other words, a seventh-grader writing a book report on Microsoft Word had more font choices than the person designing Esquire Magazine's website or the IKEA online catalog. But now that is about to change.

Beginning Tuesday, Monotype Imaging, a Massachusetts company that owns one of the largest collections of typefaces in the world, is making 2,000 of its fonts available to web designers. The move follows the San Francisco-based FontShop, which put several hundred of its fonts online in February. In just a few weeks, Font Bureau, a Boston designer of fonts, will make some of its typefaces available online as well.

Web designers, understandably, cannot overstate how big of a deal this is.

“It's like the 'Wizard of Oz' moment when they go from black and white to color,” said Tal Leming, a typeface designer. “It's going to be huge. It's going to be absolutely huge.”

But how much change will this online font explosion bring for nondesigners, particularly a public that rarely thinks about fonts at all? According to many designers, the change will be subtle — just how it should be. Good graphic design is generally meant to be invisible, they said, enhancing a reader's experience of the text but not getting in the way of it.

“It's like walking into a room that has bad lighting,” said Ellen Lupton, curator of contemporary design at the Smithsonian’s Cooper-Hewitt National Design Museum in New York and author of “Thinking With Type.”

“Most people walk into the room and they know it is unpleasant. They know they don't feel good in the room, but they don't know why. An interior designer walks into the room and says, 'It's the lighting.' Typefaces work the same way.”

Shu Lai, vice president of the Society of Typographic Aficionados and interactive creative director at the Pereira & O'Dell ad agency in San Francisco, put it this way: “We don't necessarily want people to notice the change. We just want them to be happier.”

Traditionally, the fonts you see when you surf the Web are owned or licensed by Apple or Microsoft or whatever company is running the computer's operating system. If a designer wants you to see Caslon (one of the most popular typefaces for books, but unavailable online) when you go to her website, you must have Caslon installed on your computer; otherwise it will default to a font that you do have, such as Times. When it is really important to show certain lettering — for example, the Los Angeles Times' gothic-looking header — then a designer would essentially save the type as a photo or graphic. The correct font would display, but the words would not be selectable, searchable or resizable because according to the computer, they are an image, not text.

Now, if a designer wants you to see Caslon, she can purchase it from the font company that owns it or through services such as Typekit, which has a library of fonts available by subscription. That font will be delivered to the designer's website and to anyone viewing it, even if the font is not installed on the computer.

The designer is satisfied because you are seeing what she intended you to see, and the typeface designers are satisfied because they were paid.

Frank Martinez, a New York lawyer who specializes in intellectual property law and who represents several typeface designers and foundries, said the difference between having a font temporarily downloaded to your computer and having it installed permanently on your computer is like hearing a song on the radio versus getting a band's CD. “Either way you receive the music,” he said. “But if you hear it on the radio, you don't own it, and you can't play it again.”

A few small foundries started rolling out these temporarily downloadable fonts — the industry term is “web fonts,” as opposed to the “system fonts” installed on in your computer — in 2007, but only now have the major font houses followed suit. Typekit, which launched in November, has 2,000 fonts from several designers available. The company has more than 100,000 customers including the New York Times, Twitter, Gizmodo and the Wall Street Journal.

Designers have been calling for more fonts to be available on the web for years but faced some pretty significant obstacles. Popular web browsers such as Safari, Internet Explorer and Firefox weren’t capable of delivering fonts to individual computers. Bandwidth wasn’t fast enough. Perhaps the biggest hurdle: People who create and license fonts worried that their work would be pirated or given away for free.

“We've all been around the Internet from Day One and we've seen what happened with the music industry,” Martinez said. “Technology is coming, we can't stop it, but we want to put in place a rational methodology so if a customer wishes to license a font they can. Rather than hold back the sea, we've built a boat.”

While most designers are excited about the opportunities all these new font options will afford, not all of them are convinced that it will lead to beautiful Web design.

“It's great, but it's also horrible,” Lai said. “Now if people want some random handwriting site, they can have one. It's going to go through growing pains, there's no question about that.”

Allan Haley, director of words and letters for Monotype Imaging, equates it to the desktop publishing revolution of the mid-’80s.

“We saw a lot of horribly typographic examples back then, and a lot of 'because I can, I will,' design,” he said. “People were mixing up typefaces and there was this horrible goulash, but it pretty quickly went away. You don't want to sell people short. I think we are seeing much better graphic communication on every level now.”

Stephen Coles, type director of FontShop and editor of the typography blog Typographica, is similarly hopeful.

“I was originally concerned because Web designers are not necessarily trained in typography, but I don't think it is going to be so heinous, “ he said. “I think Web designers are pretty savvy about what things work.”

--Deborah Netburn

Illustration credit: Los Angeles Times

To illustrate how Web fonts will look different than system fonts, the designers at Monotype Imaging created the following visual. The image on the left uses system fonts: Microsoft Corporation’s Verdana® (heads); Monotype’s Times New Roman®  (nav, paragraph in brackets) and Monotype’s Arial® (paragraph copy, What’s Hot & Recent Posts). The image on the right uses web fonts: Linotype’s Coronet® "finally, fashion that's frugal"; Monotype Imaging’s Parma (family) is used for the serif text, and the sans serif text is in Monotype Imaging’s Felbridge. 

California design: Get news, sales alerts and more by joining our Facebook page.

Comments

[Joe T.]

As a website designer, I hate the font restrictions that we've had on the web in the past. Looking forward to the new era of web design.

[Jung Gatoona]

Most web designers know this font limitation all too well.

I'm surprised this article mentioned nothing of the capabilities of Flash to embed font types into its file(s), so that users don't have to install them to view them as the designer intended.

[Ryan M.]

If only we could replace most instances of TNR with Computer Modern Roman (with ligatures, of course), the world would be a better place. As it stands, you can find a recent distribution of TeX/LaTeX, which features Computer Modern, on http://www.tug.org/.

[P J Evans]

More fonts for web designers to misuse? (Please don't use Peignot....)

[Brad Haan]

Our desire to have print-design graphics on the Internets grows closer every day. Hooray to the geniuses who have finally come up with this solution.

Typographically designed webpages will be such a breath of fresh air. BRAVO!

[Alex Reyes]

Peignot? Why not? Someone with skills can make Hobo or Impact look right.

[Marcy]

I am a web developer and I LOVE TYPOGRAPHY!

I just hope we don't start seeing even more Papyrus or Comic Sans across the web -- let those ones die already!

Seriously, though, this is one of the only good things to come out of Steve Job's dismissal of Flash. I have used sIFR for the past few years and am excited for the increased performance and unified presentation across all platforms.

[Fabrisse]

Will this help people using software like JAWS get more from their Web experience? I know having certain things as embedded photographs rather than type can be a problem.

[Canistel Design]

wow, this is really exciting :-D

i do agree, however, that there are positives and negatives to this move.. we will for sure see some very obnoxious websites as a result of this increased selection of fonts

it's unfortunate the principles of graphic design are not more widely-known, or the world of media would be much more harmonious and attractive

[Canistel Design]

@ marcy's papyrus & comic sans comment.. haha soo true

[Grant Horsfall]

i run a company called i4 visual media in the UK. This will solve alot of SEO problems as you can get more readable search engine text down on the page. www.i4visualmedia.co.uk

[Dennis Wilen]

These web fonts will have to be downloaded with every page you visit.

I wonder how that will impact the loading time for web sites that use a lot of web fonts -- it's like adding a lot of images to a site.

Furthermore, a web site designed with these fonts *will not display as intended* if the font server is not online.

I wonder if these font companies have any experience serving millions of files to millions of simultaneous online users?

In the end, web designer's control over how pages look is always in the hands of the user. Designers who obsess about fonts should go back to print.

[Jason]

Be nice if it were free

[Loren]

The CSS3 specification to include your own fonts (for free) is already supported fully in Safari and Firefox. It should be coming in the next IE (if it's not there already) and Opera 10. Why pay when you can go to dafont.com, download a free font and use it on a site?

http://www.css3.info/preview/web-fonts-with-font-face/

[Mike]

These fonts are only "available" only in the sense that a user's web browser can access them from a third-party server. They are not stored locally, as are real web fonts. There are a lot of potential problems here, such as the font owner's servers being overloaded or slow or going down, the font owner changing its mind or getting acquired by another company that doesn't see the fiscal advantage of doing this, the latency of accessing remote servers, and so on. The only way to really do this right is for the fonts to be put in the public domain, not licensed, put in the public domain, and then for computer manufacturers to put these on all computers.

[David Martinez]

This is a very timely article. We are investigating Typekit and other resources for specifically this reason. There is one caveat to these 'downloadable' font faces, each face ranges from 20-60k per download. Smart designers and businesses will limit their font usage, but this is size is still considerable.

If the W3C would put out specifications for browser technologies in a more timely way, these improvements would be seen much faster. We'd have better browsers and more technologies to work with - that were standardized.

All in all, this a great step forward.

[Jennyusagi]

I would be excited about this except for the IE only part, but it inspired me to look for a cross browser version, which seems to be in progress:
http://en.wikipedia.org/wiki/Web_Open_Font_Format
http://people.mozilla.org/~jkew/woff/

[Shaddy Zeineddine]

i've already been using different font faces, FREE FONTS, using the new CSS font embedding technology. There are hundreds of high quality free fonts available, and they have been available for a long time. Why get involved with all the intellectual property nonsense?

[Steve Moshlak]

Another Bill Gates / Adobe winner gone awry. Let's get it straight, people.

Typefaces are the style or name of the typeface. (Arial, Calibri, Candy Stripe, Cargo, Century Schoolbook, Certificate, Helvetica, Times new Roman, etc., with an additional choice of extended, italics or boldface.

Fonts are the size of the typeface and dependent upon the program or application inuse, is measured in point(s) or inche(s).

Didn't anybody take any shop classes like "Print Shop" in Jr. or Sr. High School or is everybody learning about how Harry Potter & Company is going to get them through life, instead?

[Bill Davis]

Deborah - you covered this topic well, but you should be aware that there are other type foundries also offering web font services today. For example Typotheque from The Netherlands, and also our company launch a web fonts service back in January at www.AscenderFonts.com.

As others here have noted, web designers are hungry for more typographic flexibility and not being constrained to using graphics if they wanted a particular commercial font that they licensed for use on their desktop computers. Like Tal, I firmly believe that 2010 is the year of web fonts!

The challenge for designers will be to carefully choose what typefaces they use as most fonts were designed for print and won't look that great at small sizes on the web. It will be vitally important to select fonts that will reproduce will on both Mac & Windows systems and test any web fonts across platforms and browsers to ensure the quality achieves their desired user experience.

[Adam Hiller]

It really ticks me off online when people use Arial instead of the much classier Helvetica. It's such a subtle thing, but sites like http://www.dirtyphonebook.com would be just a tad tastier looking by switching just a couple of characters in a CSS stylesheet that its a wonder to me why more big companies don't do that. Oh well, not everybody is a type designer.

[Delve Withrington]

What will also be interesting to see is how the new various web font services' licensing and pricing settles over the next couple of years. Specifically, fees based on bandwidth vs. page views for large websites vs. small ones. Regardless, as a type designer, I think this this is an exciting time to be making fonts. And it is especially exciting for web designers to finally have web fonts as a viable option.

[Bobs]

Well good write up I must say. The typography is being continuously evolved and developed with time. Designers derive inspiration from almost anything. Same is the case with typography. They have experimented out different typographies and some have actually worked out. Typography is something which should be perfect according to the kind of readers you are going to have on your website. It should appeal to them. There is no harm in trying out new things but at the same time you need to ensure its clarity on all popular browsers. Thanks for sharing the info

[Michael Cain]

Whenever I consider changing browsers, my first question is always, "Does this browser have an 'Always use my fonts' setting?" Even with the designers confined to the common system-installed fonts (a much larger set, by the way, than your article implies), too many web pages are a mash-up of multiple fonts in sizes that range from far too large for the purpose to too small to read easily. So I intentionally restrict them to a small number of fonts and sizes that I know will display legibly on my browser. 11-point Caslon may look wonderful on the designer's monitor; unless my browser and my settings are the same, though, there's a reasonable chance that it will come out ugly on my machine.

[Jason Schwartz]

The ability to use an expanded set of dynamic fonts means so much to the future of the web as well as usability, accessibility and overall good design.

The problem that has continued to plague this discussion over the past years is that not everyone seems to be on the same page for standards.

Of course designers and type foundries want to make use of thousands of fonts natively, but browsers, web standards and even mobile devices need to all play ball.

There are already ways to utilize and expanded selection of fonts using Cufon, Typekit and even CSS @font-face standards, but there are always cross-platform issues and pros and cons for each.

I think this move is a step in the right direction and hopefully in a few years, every font will have the ability to see online glory.

[lukeMV]

I hope that they include Comic Sans... i can't wait for the rebirth of the geocities-style web sites by the "casual web designer".

[G-G]

"But if you hear it on the radio, you don't own it, and you can't play it again."

That's an interesting analogy, however, where I live, I am well within my rights to record radio songs and play them again whenever I wish.

[Scott Corgan]

Oh how beautiful a large font library is! It's like a never-ending pit of font-water. Always trying get that typography perfect!

[Jared]

I've been using kernest.com as a font distribution platform for months now on my own website. It has some paid fonts, but also tons of fonts that are offered for free. It was also a lot easier to use than typekit in my opinion. I have loved the flexibility it has given me in designing my site.

[Web Design]

It has ups and downs, however you can't oppose to evolution, even if this evolution is not in a great way.

[Website Designers]

Interesting!! Truly speaking I did not have much idea about typography. But after reading your post my concept regarding this thing has become quite clear. Thanks to you for that.

[Megha]

Wow, really an informative post!! Its good to see that you have shared all such news with us.