Sidebars:
Georgia & Verdana
Typefaces designed
for the screen (finally)
by Daniel Will-Harris
Download them here...The typefaces you normally read have been designed to be typeset digitally and printed on paper. But as more people read more type off computer screens, they're unfortunately reading a type designed in another era for another medium. That's why type on screen can look pathetic (especially so-called "italics" on the Mac) and is often painful to read.
In the past, every time a new typesetting or printing medium appeared, designers created typefaces to take advantage of it. But today, while more people than ever are designing more typefaces than ever, so few of them are designing type specifically for the screen that you can count them on one finger.
Maybe it's the complexity of the task, which requires a deep knowledge of type design, legibility, and technology, rather than just style. Maybe it's because until the web has a way to transmit type as easily as it transmits pictures (see WebFonts), there's no market to sell such faces.
Luckily, a company with the deepest pockets in the computer world thought deeply enough to see what a problem this was and hired a type designer with years of experience designing legible type under difficult circumstances, including Bell Centennial for phone books, and ITC Charter for low-res printed output.
The company: Microsoft. Yes, Microsoft. The type designer: Matthew Carter. The typefaces for the screen (shown automatically on this page if you've downloaded the fonts from the link at the bottom of this paragraph): Verdana a sans serif named for the verdant Seattle area and Georgia, a brilliant serif named after a tabloid headline about alien heads found in Georgia, which was then used to set test headlines. The hinting on both was done by Monotype's hinting expert, Tom Rickner. These fonts are available for free download at www.microsoft.com/truetype/
Verdana
abcdefg
Verdana does everything right on screen; it has a large x-height so characters look bigger, yet not so big that it's hard to tell the lowercase from the uppercase or that it looks crowded in apps such as web browsers that don't have adjustable leading (yet).
Verdana is extended, but more importantly, it has extra space between characters so they don't touch. The bolds are quite bold, ensuring that you can always tell the difference between bold and roman, yet the bold characters never fill-in, even at small sizes (you can still read it at 4 point, at least under Windows).
hijklmnop
Special care has been taken with letters like 1, I, l, i and J so that they aren't confused. The lowercase "i" is slightly shorter than the lowercase l, which also makes them more distinct. Letter combinations such as "fi" "fl" and "ff" are designed so they clearly do not touch, as touching letters can create hard-to-read blobs on-screen. Microsoft's web site states, "Curves are reduced to a minimum in the counters. Lowercase characters are a pixel taller than their uppercase counterparts at key screen sizes, to aid the distinguishing of particular characters."
qrstuvwxyz
Even though it was designed for the screen, Verdana is attractive on paper. While some have compared it with Frutiger, a closer look reveals more of a resemblance to Carter's own Bell Centennial. Because it's spaced widely for the screen, it has a more "typewriter"-like feel to it on paper. [not to editor: if you track it more tightly for the page please mention it here.] But this face was not designed for "style," it was designed for function, and Matthew Carter explains (below) how the screen literally dictated the design.
Georgia
Georgia, Carter's new screen serif, is perhaps an even more remarkable feat than Verdana. It takes the complexity of serifed characters and makes them not only comfortable on-screen, but also very attractive.
abcdefghijk
In large sizes, Georgia might be mistaken for a heavier Times New Roman. It's a sturdy face that could easily be used by any newspaper. On-screen in body-text sizes, it takes on new life--looking friendlier, almost like Cheltenham. The characters are beautifully clear at 8-12 point. Its x-height is larger than Times, but not as large as Verdana's, and the result is a face with a traditional feel that's very pleasant on-screen. It has a true italic that is so fluid and graceful it could be used by itself, and like Verdana, a bold that verges on ultra-bold. The numerals have a slightly old-style feeling but are still lining.
abcdefghijk
Georgia is nothing short of wonderful on-screen--which is, of course, the whole point. It could easily become the de facto serif screen face, and readers would be all the better for it.
qrstuvwxyz
Microsoft's part
To find out why and how Microsoft initiated these fonts, I spoke with Simon Earnshaw, a typographer at Microsoft.
DWH: When (and why) did the project start--and when will it be complete?
The Verdana family started in early Summer 94 as a two font typeface (Tahoma), designed by Matthew Carter and hinted by Tom Rickner, to be used as a system font for Windows95. To make the fonts work in extended text settings it was necessary to open up the counters more, widen the advance widths and loosen the spacing. Thus Verdana was born; effectively the more generous cousin of Tahoma.
Just as the Verdana fonts have their origins in Windows, the Georgia fonts were conceived for the then nascent Microsoft Network as a serif alternative to Times.
Verdana, Georgia, Trebuchet and Comic Sans are all available now for free downloading.
DWH: What characteristics did Microsoft want in the faces?
Our brief was very loose beyond a statement of the problems we wished to overcome and the intended purpose. We felt more inclined to let the experience and eyes of Carter and Rickner produce what felt right to them. Of course we (and the UI designers) had input at different stages, but to a large degree we just let them get on with it.
Matthew Carter's unique approach
Matthew Carter has designed or resurrected many popular typefaces including ITC Galliard, Snell Roundhand, Cochin, ITC Charter, Bell Centennial and more. He's designed type for lead, photo and digital type, and been instrumental in the creation of type libraries for phototype (at Linotype) and digital type (as one of the founders of Bitstream). There are few people more qualified to design typefaces to meet the demands of the screen.
DWH: Matthew, why did Microsoft embark on this project?
Microsoft wanted fonts to give Windows a new look. They also needed some faces of which they were the sole undisputed owners so they could give them away. They also needed fonts with a comprehensive character set. MS software is localized all over the world [dwh: over half of Microsoft's sales are outside the United States] so they needed fonts that were conceived from the start as being as all-inclusive as possible.
DWH: How did you start working on this project?
In graphic design circles, people think of screen fonts as preview mode--it's only when the toner hits the wood-pulp that we usually judge a typeface.
But that's an increasingly short-sighted view of life. Larger numbers of computer users spend their entire time in front of a screen and never (or seldom) print anything. So it became obvious to us that this was a reversal of priorities--we should not approach this as one of doing printer fonts adapted for the screen, we should design them as screen fonts from the outset, the printer fonts are secondary in this case.
In the past I've been burned starting from outlines and trying to be extra clever in the hinting. So I finally deciding, ‘I'm better off grasping the nettle. What's most important is to get the bitmaps right at the sizes people use most often.'
So instead of starting with outlines and then working to hint them for the screen, I started by simply making bitmap fonts. No outlines, just bitmaps.
Bitmaps are relatively easy to make and they show exactly how the fonts will look on-screen. This allowed us to make decisions about sizes, weights, and distinctions between serif, sans, roman, italic, all viewed in context. Working this way we came up with a definition for a certain number of critical sizes and weights.
Once the key bitmaps were done, I very carefully wrapped an outline around them. I always have in mind that this outline will then be given to the person responsible for hinting--and they'll need to be able to hint outline to get back, pixel for pixel, to the bitmap faces where we started.
DWH: Isn't this the reverse of the normal practice of starting with outlines then creating bitmaps?
Yes, but since our immediate problem was, "how do we make the bitmaps look as good as possible," we felt our chances of success were higher if we simply started out with bitmaps.
DWH: Verdana appears extended with extra spacing between the characters. How did you come to those decisions?
In very early trial we would set a paragraph of text in a pre-existing face and in Verdana on the same screen. Then we'd walk backwards across the room until one of them became illegible.
If Verdana has any unique qualities at all it's in the spacing. Pre-existing printer fonts are spaced for paper, not the screen, so they suffer on screen. In Verdana, it's the regularity of the spacing that's just as important as the positive parts of the letterform.
Wider spacing wasn't enough, it also had to be more regular, this was thing that gave it an advantage in readability. Verdana really isn't wide, the sensation of width comes from the spacing.
DWH: Verdana's bolds are extremely bold. How did you decide on this weight?
The bolds also started out with bitmaps. At small sizes the only way to make something bolder is to double the weight: a stem of one pixel jumps to a stem of two pixels. In typographic terms that's a big step; very few bolds are as much as twice the weight of the normal until you get into the black or ultrabold range. The bitmaps dictated the weight.
DWH: Do you see any other faces having inspired Verdana?
One face I feel lurking is Bell Centennial. Both faces had some legibility requirements in common. And with similar limitations come some similar solutions--you simply couldn't design a Helvetica-like "c" which turns in on itself without it blocking completely on-screen
DWH: How do you feel about your work being given away?
As a type designer I try never to part with the rights forever. Even when a face is done for a particular client, they will license it for a certain period of time, then the rights will revert to me. People commission faces, use them for a while, get bored with them, then this gives me a residual benefit.
But in this case there was never any plan other than to give these fonts away. I didn't see what else they could say, realistically, except that they needed complete rights. It was up to me whether I would choose to work this way or not. I liked the project and people so I thought, why not?
DWH: Since other designers aren't yet designing fonts for the screen (probably because the mechanism for embedding them isn't in place), you weren't taking away from anyone else's sales. It seems to me that your faces will just serve as an inspiration to other designers.
It's true to say that type designers have been rather slow in dealing with the screen, but much more importantly, computer screen fonts are considered a sort of poor relation. Oddly enough, it is the buzz about the Internet that has made this a competitive issue.
I'm a believer in designing specifically for the screen. When you get up to larger sizes for display you can use anything on screen. But for type down at the most-often used sizes I remain persuaded that what we did was the best thing to do--to look at this as a screen exercise.
DWH: Do you think that OpenType will spur more type designers to design for the screen?
I would hope so--it would be good to see more screen work being done. But first there needs to be a demand. Graphic designers must create a market for these new faces by demanding faces designed specially for the screen. Designers may think they have a library of type that will be good enough on the screen so they don't have to buy a lot more faces. But as I've explained, text sizes really have to be designed "for the screen."
Fonts for free?
These new fonts could be sold to people who are tired of straining to read the screen, so why is Microsoft is giving them away? They'll be included in Microsoft's new browsers, and be freely downloadable at Microsoft's web site. I asked Simon Earnshaw, a typographer at Microsoft about this:
DWH: Does MS plan to keep these fonts as freely downloadable for the foreseeable future?
Absolutely. The whole point is to make them available to as many users as possible. The more people have the fonts, the more confident a Web author can feel when specifying the fonts.
DWH: Will these fonts be included as standard in future MS apps or versions of Windows?
Definitely yes.
DWH: Was there a commercial motivation behind this, or is this just Microsoft's gift to anyone who has to read text off the screen?
Both, as you'd expect. The provision of these fonts reinforces Microsoft's advances in making layout, appearance and control of Web pages easier, better and more attractive. And the real winners are the users. Typographically we now offer far more than any of our competitors; and this in a medium which traditionally has been a very poor relative of DTP and print. Of course we still have a long way to go, but we're at least demonstrating our commitment to addressing some of the issues.
DWH: In this case, Microsoft has acted as the patron saint to everyone who has to read type off a screen, and stands as a testament to the company's attention to detail. Microsoft should be congratulated for subsidizing new fonts that make on-screen reading easier for everyone.
OtherType for the screen
If you're looking for existing faces that are easy-on-the-eyes, some of the best include: Avenir, Blueprint, PNM Caecilia, Gill Sans Book, ITC Legacy Sans, Lucida Fax, Lucida Sans, ITC Maiandra (excellent and casual), Memphis, Melior (or Bitstream's well-hinted Zapf Elliptical), Myriad Multiple Master (you can tune the sizes yourself), Sassoon Sans, Serifa (my standard screen font), and Univers or Zurich (especially the extended version).
I've found that the hinting on Bitstream's TrueType fonts is especially good, probably because Bitstream designed its own tools for the purpose and many of their fonts were hinted by a group of type designers who have since left to form Galapagos Design, the type design and production company responsible for all the digitization and hinting of all new ITC releases.
Monotype offers special "ESQ" (Enhanced Screen Quality) fonts with hinting by Rickner and his colleagues at Monotype. ESQ faces include Arial, Arial Black, Century Schoolbook, Impact, LetterGothic, and Nimrod. Choose any of these faces from the Monotype library and you get an ESQ version. And some of these are free: Arial and Impact are both freely downloadable from the Microsoft site. --DWH