Make Great Fonts for Reading Onscreen

I’ve told you in an early posting in this blog how even while working for Aldus in Europe I noticed the great leap forward Microsoft had made in creating fonts for the screen.

Times New Roman, Arial and Courier New were the Core Fonts created for Windows 3.1. I’ve since learned a lot more about that project. It took a team of 18 people working for about three years to figure out how to use the power of the TrueType language to hint them for the screen and integrate TrueType into Windows.
Even though they were the best screen fonts I’d seen so far, they were still far from ideal. Times New Roman, which has to be the most-used font on the planet, since it was also the default font in Microsoft Word until Office 2007, is a very traditional face which works well in print (although definitely showing its age now) but is not very good onscreen because of its small x-height.
The ratio of x-height to the height of capital letters (cap-height, of course) is very important. If you have two passages of type set in different faces in 12point, and one typeface has a larger x-height, it will look much bigger).
I joined Microsoft in January 1995. At that time, when I mentioned my goal of making reading much better onscreen, the typical reaction was, “Why bother? No-one will ever read from a screen anyway. They’ll print out whatever they want to read”.
But 1995 was the year the Web went mainstream. The first project I commissioned in my new job was to ask Matthew Carter, one of the leading type designers in the world, to create two new faces specifically for reading large passages of text on a screen.
We asked Matthew for a serif and a sans serif face. We got Georgia and Verdana. The Verdana project has already been in existence, but it had been intended only for text in menus and dialogs, not for sustained reading. We changed the requirements, asked Matthew if he felt confident he could meet the “improve sustained reading” goal, and got started.
One of Verdana’s identifying characteristics is a large x-height. Another is the wide default spacing between letters – we found that spacing was just as important as character shape in creating readability.
We shipped Verdana and Georgia first in Internet Explorer (PC and Macintosh), then with every copy of Windows and Office.
Verdana changed the Web. It’s everywhere.
However, it’s no longer the best font for reading onscreen (except perhaps in the strict black-and-white case).
In 1998, we invented ClearType. It improved the display of all fonts. But as we developed it more we realized that, with our understanding of how ClearType manipulated the RGB color sub-pixels, we could use what we’d learned to create even better type for the screen.
I’m typing this blog in Calibri, one of the new family of “ClearType optimized” faces we shipped with Windows Vista and Office 2007. (All the names begin with “C”)
We needed new designs. So we went out to the world’s top type designers and announced a competition. We’d pick the six best designs, and commission the creation of full versions, which would ship with Windows and other major Microsoft products.
Calibri is my personal favorite. Cambria is a great new serif typeface, and we built that with a whole set of 4000 mathematics characters.
When combined with a new math. composition engine which ships with Word 2007, it allows for the creation of even better math composition than TeX, but in WYSIWYG.
The math composition engine was the baby of Murray Sargent, a physicist who works in Microsoft’s RichEdit team. We supported that project with the new font.
Another major font project we did for Vista was a new Japanese font, also designed for onscreen readability.
If you think it’s hard designing Latin-language fonts for the screen, try Japanese. Japanese eyes are the same as every other human.
Their fovea dictates they need to read type at about 10.5 points (equivalent to about 11 or 12 points in Western type since the outlines sit on a different matrix).
But on the screen at that size you don’t have nearly enough pixels to accurately create all the strokes of a kanji character like utsu, which has eight horizontal strokes.
So you have to reduce the number of strokes in the glyph – but leaving it still able to be recognized as the same character.
In the past, this was done by having a skilled Japanese typographer design a bitmap for every character – typically, for every size between 7 and 22 point. That meant someone had to create about 400,000 bitmaps, and that made the creation of a new Japanese typeface suitable for the screen into a 50 man-year job!
Our project started out with the codename of “Verdana-J”, but was later renamed Meiryo.
We worked with Japanese typographer Eichii Kono. The project was managed by Geraldine Wade of the ClearType team. Mike Duggan of the same team was also deeply involved.
Another problem with Japanese text is that kanji characters are often mixed with Latins (usually English).
In the past, these two languages clashed like crazy. Typically, in most Japanese faces the Latins were something of an afterthought, often with poor outlines. Worse still, since Latin text is set on a baseline and there’s no concept of that in Japanese (which was traditionally used for vertical writing) there was no harmony.
We called back Matthew Carter, and he and Eichii worked to harmonize the Japanese and Latin.
The result is the best onscreen Japanese I’ve ever seen. Meiryo has now won awards in Japan for its innovation.
Better still; instead of using bitmaps to do the stroke reduction, we innovated by using the TrueType hinting language. result was that we not only finished the project within budget and in only 18 months (well done, Geraldine!) but we passed on the new techniques we’d invented to the Windows International Fonts team, who used the same procedure to improve the Chinese and Korean fonts we sipped with Vista.
We’d taken a bold gamble with Meiryo, that we could really do something new. To get funding for it, I’d had to go face-to-face with Bill Gates and argue the case (by some fluke, I once found myself with BillG as my manager’s manager. I keep a copy of the Microsoft orgchart of the time – the one produced by the Redmond-based Microsoft watchers, Directions on Microsoft – just for sentimental reasons. Two org steps from The Man – it was a once-in-a-lifetime shot, and it’ll never happen again…)
Bill gets type, and gets reading onscreen. Over the years, Microsoft has invested huge amounts of time and money in text. He signed off on the project, and he was delighted with the end result.
When I say Bill gets type, I’m not joking. I’ve come home from the movies on a Saturday night to find email from Bill asking me about support for ligatures in Microsoft products…
Bad news when the man at the top knows that much about your job – nowhere to hide!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s