Welcome to MSDN Blogs Sign in | Join | Help

News

Making the Letters Better

We're not just introducing a new UI in Office 12--we're also introducing a new UI font.

Windows 95 used "MS Sans Serif" as the UI font in Western locales.  It was a straightforward font which looked fairly good, if plain, at small sizes.  Office 95, as well as previous versions running on Windows 95, used this font for menus and dialog boxes.

With Office 97, a new UI font was introduced called "Tahoma."  Tahoma was designed by Matthew Carter and hinted by Tom Rickner, and was optimized for on-screen reading at small point sizes.  Tahoma 8pt. is still used as the main font in Office 2003 today; it has also been used as the main UI font in Windows since Windows 98.

A piece of trivia: the very popular Verdana font is the wider cousin of Tahoma.  Verdana was created by starting with Tahoma and increasing the spacing between letters a bit and updating the hinting accordingly.  There's a lot more you can read about the history of Tahoma and Verdana in this interesting article.

Fast forward to today, nearly a decade after the adoption of Tahoma.  One major innovation that has transpired in the interim is the introduction and widespread adoption of ClearType, which many people feel allows crisper on-screen text, especially on LCD-based displays.

With the UI changes happening in Windows Vista and Office 12, we felt like it was time to commission a more modern UI font, designed specifically to take advantage of ClearType.  In addition, we wanted a more humanistic, friendly font that would seem less "computer-y" than Tahoma.  Most importantly, we wanted the font to take advantage of the research done in Microsoft Typography over the last decade in specifically creating fonts that are easy to scan and read on-screen.  These guys know their stuff, and we knew it would make a positive difference in the user interface.

The result is a font called "Segoe UI" which will ship in both Office 12 and Windows Vista.  It was conceived, designed, and totally optimized for ClearType, and I think it's beautiful at both small and larger point sizes.


The Segoe UI font will ship in Office 12 and Windows Vista

That said, the creation of a font good enough to use in Windows and Office must seem sometimes like a thankless job.  The designers have been iterating on it for nearly two years now, making changes based on our requirements and those of Windows.  We will primarily be using the 8pt. size, while Windows will be using primarily 9pt., and so keeping those in sync design-wise has been a challenge.

It's amazing to me how much work goes into making a great font--sometimes we send back feedback just about a certain glyph ('g' looks weird in this specific situation) and they tweak the hinting just a bit to improve it.  Tightening up line spacing has been a constant issue--we don't want the Ribbon to take up any more space than necessary, yet Tahoma "cheated" by having certain accents drawn over descenders from the previous line sometimes.  We can't allow Segoe UI to use the same trick.

Learning all about the ins and outs of font design has been another one of those unexpected job perks.  You know when you show up for work at Perkins that you're going to be making pancakes, but you never expect to get to help design the syrup bottle too.

Posted: Wednesday, November 16, 2005 7:00 AM by jensenh

Comments

Matt said:

Looks good! Typography is a casual interest of mine, and UI design slightly more than casual, so it's doubly good!
# November 16, 2005 10:25 AM

Gabe said:

Why would you be using the standard font 1pt smaller than the rest of Windows?
# November 16, 2005 10:37 AM

Dave Solimini said:

where can I get ahold of the Segoe font file?

# November 16, 2005 12:08 PM

jensenh said:

Gabe:

I will explain in an upcoming article.
# November 16, 2005 12:57 PM

Universalis said:

For those of us who write programs, will the method of calling up this font be even kludgier than the "MS Dialog" + DS_FIXEDSYS that we have to use to ensure compatibility with all versions of Windows? Or the same?
# November 16, 2005 1:42 PM

ChrisC said:

Weird, I just commented on that:
http://blogs.msdn.com/jensenh/archive/2005/11/14/492482.aspx#493359 (& I'm sure I wasn't the reason for it)

If readers want to learn about fonts from a design perspective a good intro is found with the (free) ProFontWin at
http://www.tobias-jung.de/seekingprofont/

(You got`a love a font with the diagonal line through the zero!)
# November 16, 2005 2:03 PM

Julie said:

First, full disclosure: I am a ClearType hater. To me it makes the type look fuzzy. I have a tablet PC and can read on the screen easily, except, of course, when ClearType is turned on.

I have read the research reports that ClearType makes a 5% improvement in reading. For me, it is over a 50% degradation.

With that as context, I turned the ClearType setting on and look back your new type, Segoe UI. While I can say that it is an improvement, I am not sure how much of that is due to the fact that it is also a larger type size. It also helped me understand very clearly what I hate so about ClearType. When I look at the lower cases of the "i" and the "j", I can see a shadow on the left-hand side of the "i" yet on the "j" the shadow is on the right side of the shaft. No wonder it drives me nuts. And then in the case of the capital "H" -- on the left-hand ascending stroke the shadow is to the left, and on the right hand ascending stroke the shadow is to the right.

As I stare and stare at this sample of yours, sometimes it flashes more into clarity. It reminds me of those hidden figures that were popular about three or four years ago. It is like I have to train my eyes to do the exact same thing in order to gain clarity.

That's the end of my post. And I have to go back and turn off ClearType :-)

Virtually yours, Julie
# November 16, 2005 2:13 PM

ChrisC said:

I'm not too keen on ClearType either - anyone who thinks Microsoft invented it hasn't experienced the Apple ][, but I digress.

Anyone wondering what Julie is talking about can click the Start menu then "All Programs" |Accessories |Accessibility |Magnifier
and place the mouse over the bitmap Jensen provided above. (use "3" for the setting as a start)

I use a notebook + a 19" monitor and *I* wish one used clear type and the othere didn't - but that's an OS thing I guess.
(I code on the monitor and run the app on the notebook's screen)
# November 16, 2005 2:34 PM

jensenh said:

The Segoe UI sample is just a picture. It will look the same with ClearType on or off. :)

The picture was taken with ClearType on, of course.
# November 16, 2005 2:46 PM

jensenh said:

For programming, I prefer Andale Mono, which I think is surprisingly clear and easily-readable monospaced font.
# November 16, 2005 2:47 PM

jensenh said:

Universalis:

I'm not sure, you'd have to ask the Windows team.
# November 16, 2005 2:47 PM

Mike Dunn said:

Jensen, could you talk about how the Ribbon is going to look in CJK? 8 pt is unreadable in those languages, and a short skinny word in English (say, "filter") may end up being several katakana characters long in Japanese. Are there going to be different Ribbon layouts, or different layout rules, for CJK?
# November 16, 2005 3:02 PM

jensenh said:

Mike:

Segoe UI is a Western-only font, so the changes I outline do not apply for Japanese.

It is true that we generally use 9pt. for Japanese fonts, and the Ribbon won't be an exception.
# November 16, 2005 4:25 PM

Carlos said:

I really like ClearType. Maybe it works better if your eyesight isn't so good.

Have the people grumbling about it tried the ClearType tuning tool?

http://www.microsoft.com/typography/cleartype/tuner/Step1.aspx
# November 16, 2005 4:35 PM

Julie said:

Carlos, I don't think its whether or not one sees clearly -- I wear glasses, I think it is a matter of perceptual style. thank you for the link, I tried it, yet again, and even though I am in the "extremely rare" category, I'm still happier with the ClearType turned off. (Maybe I just see things in black-and-white.)

Chris's comment and absolutely wonderful demonstration made me wonder if the ClearType designers could put the "shadows" consistently on one side of the strokes -- it might make everyone happy.

I just hope that Vista will have the setting that allows me to turn off ClearType.
# November 16, 2005 4:57 PM

Jody Power said:

The shadows are purposely put on either side (or both!) of idividual letters.

Many strokes mathmatically land at fractional pixel values (60% on pixel 1 and 40% on pixel 2) depending on the character size and output resolution.

Adjusting the anti-aliasing (gray-scale) proportionally keeps the characters in line with their ideal shape (compare at large font sizes).

Distorted characters can be both visually unattractive and very difficult to read. The other way to enhance character output is to embed a lot of hinting information in the font to adjust them on the fly for resolution and positioning problems.

Hinting is very, very, very, very bad for device independent layout apps (think desktop publishers and drawing packages, as well as page viewers like Adobe's PDF reader). Moving anti-aliased lines to the other side of the character would cause all spacing to change when zooming in and out, the same as hinting does in these applications. Characters would jiggle maddly on-screen - believe me I've seen it.

Resolution independent layout using mathmatically correct, device independent layout paired with fractional pixel rendering has been a godsend for these applications.
# November 16, 2005 5:19 PM

cb said:

Think we will see a nice new monospace font with Vista? It sure would be a boon for developers who hate Courier New!
# November 16, 2005 5:31 PM

AndyC said:

cb: There is, it's called Consolas and looks much nicer than Courier!
# November 16, 2005 5:45 PM

Kawigi said:

cb: Yep, it's called Consolas.

Jensen: Speaking of all these fonts, I was originally surprised that you'd expound on Segoe UI and not Calibri, but I guess that Calibri isn't used in the UI, so it's not your field ;-)
# November 16, 2005 5:46 PM

Alex Black said:

Great blog Jensen! I love hearing about the stuff you guys are doing in the new Office, it looks awesome, and I love hearing about the usability testing/studies you're doing.

One minor comment on this blog though. I clicked 'post comment' and expected to see the post a comment UI. Instead I saw the top of the blog entry? then I scrolled down past the entry, then past the comments, THEN I saw the post a comment box.

Also, the links to your blog in the RSS feed appear to use HTTPS which causes IE to put up a warning dialog.

Actually, as I look over your RSS feed in newsgator, only some entries use HTTPS, others use HTTP.

Looks like when you edit a post (then it shows up twice for me) only one of those uses HTTPS and the other uses HTTP.

- Alex
# November 16, 2005 5:53 PM

Alan De Smet said:

Unless I'm confused, I'm pretty sure the image of Segoe UI is _not_ have ClearType enabled. The image is just anti-aliased. ClearType is sub-pixel anti-aliasing and really only works on LCD monitors. You can tell because anything using sub-pixel antialiasing will have weird colors present when you zoom in on the pixels. When you zoom in on this image you just get shades of grey. http://www.microsoft.com/typography/WhatIsClearType.mspx has a good example of ClearType in action. If you zoom in you get red and blue pixels.

Like many people, I find generic anti-aliasing makes text blurry and less pleasant to read. But I love ClearType and other sub-pixel anti-aliasing solutions. It effectively triples the horizontal resolution of your monitor. I don't find ClearType smoothed text to be blurry at all. Indeed, it feels extremely sharp, on par with a mid-grade inkjet.
# November 16, 2005 6:45 PM

GB said:

One of the problems I've encountered with ClearType, is that it is a house of cards. You must have 24-bit color to use ClearType otherwise, it silently doesn't render any text with any sort of smoothing.

Subsequently a font like Segoe UI which is only hinted for ClearType will look very bad unless you have 24-bit color and ClearType turned on.

I'm also not impressed with ClearType's smoothing on non-LCD monitors. Grey-scale smoothing works much better on CRTs.

Further, will Office 12 help the user turn on ClearType? The setting is like hidden under some awfully obscure dialogs. Will Office 12 include the "Powertoy" capability to help people tune ClearType to their particular monitor? See http://www.microsoft.com/windowsxp/downloads/powertoys/xppowertoys.mspx for the ClearType tuner.

While I think that Segoe is a really great font, I think that it is a mistake to not hint this font for traditional smoothing (or not) seen in the field. Of course, if the adoption rate of Office 12 follows that of XP, then I don't suppose anyone will really upgrade until 2008 anyway.

# November 16, 2005 7:16 PM

jensenh said:

Segoe UI works just fine with normal grayscale anti-aliasing and even with no anti-aliasing at all (such as in 8-bit Terminal Server scenarios.) But it is designed to look best with ClearType.

You might disagree and like it just fine with a different kind of rendering.
# November 16, 2005 7:22 PM

Guido D. said:

Alan de Smet: It doesn't only work well on LCD -- I'm on CRTs and can't stand being without Cleartype now.
# November 16, 2005 7:26 PM

Tim said:

"I'm also not impressed with ClearType's smoothing on non-LCD monitors. Grey-scale smoothing works much better on CRTs."

As I understand it, ClearType's algorithm depends on the construction of LCDs - i.e. that each pixel is a set of 3 vertical colour pixels, which allows ClearType to use sub-pixel addressing to increase the horizontal resolution. (This is why when you tune it, step 1 is choosing between RGB and BGR layouts.)

CRTs generally don't such a layout, or a 'native' 1:1 resolution mode like LCDs.

It's explained at length here:

http://www.grc.com/ctwhat.htm

So, it's not that surprising that ClearType doesn't work very well on CRTs - it's designed for LCDs (afaik).
# November 16, 2005 7:30 PM

Mark Steward said:

Julie (if you're still reading) do by any chance wear reading glasses? If you can see the shadows, I'd guess you're looking too closely at the screen. Cleartype is difficult to read close-up, because of its shadows and colours.

Try sitting further from the screen, with Cleartype on, until you can't see the individual squares that make up curved letters. If you're too close, you'll strain your eyes by making them move too far to cross the screen, so sit at least 25 inches away. You should be able to read taskbar buttons and even the longest menu items in one glance at the centre (though reading speed isn't a direct measure of eye strain).

If it's too small, try increasing your screen's resolution and then putting the DPI up (under Advanced in the same Display tab). You'll find large fonts much easier on your eyes than large pixels. If you have an LCD screen, ensure it's on its native resolution (usually the maximum).

If not, perhaps you simply have an ability to notice letter details that others can't - I'd cash in on it!

As for the font, I don't like it much, but only because it looks like the childish letters for fridge magnets, ABCs, etc. - it doesn't have much character.
# November 16, 2005 8:34 PM

Moz said:

I note that upper case I and lower case L are indistinguishable. That's a terrible feature for any font! I fear that upper case O and numeral zero will also be identical, and if we're really lucky the dot will merge into the lower case i making three vertical-bar characters at smaller font sizes.

I use proggy for most fixed-width text, and still prefer Arial for sans-serif proportional.
# November 16, 2005 10:20 PM

Marcel said:

The problem I have with technology like ClearType is that most screen shots I now see on the web have ClearType enabled, but usually with a different sub-pixel layout than my LCD has! Therefore, most screen shots I see these days just look like sh*t.
# November 17, 2005 1:07 AM

Roland said:

One important feature of Verdana (which I use as the font for all my text editors, including Visual Studio) and Tahoma is that it is possible to distinguish the large i and the small l. Do you think it a wise decision to introduce a *UI* font (I'm not speaking of a font to be used in documents) where these two cannot be distinguished? Or is the new font only in situations where this doesn't matter?
# November 17, 2005 4:02 AM

Dave R. said:

Tahoma has been the standard UI font since Windows 98, so WHY does Visual Studio still default to Microsoft Sans Serif? Heck, the framework isn't compatible with anything < Windows 98 anyway.

Rant over. I love the new fonts (Segoe and Consolas) and really appreciate your blog. I can't wait to have a play with the Office beta :)
# November 17, 2005 4:41 AM

Julie said:

Mark! Thank you for your excellent post. Yes, I'm still reading -- and with ClearType turned off.

Yes, I do wear reading glasses -- I admit, bifocals. I am entering what Microsoft calls "that difficult age of computing." I don't exactly need the magnifier yet but...

As an experiment, I got out my old computer glasses that I used to use in the olden days before I had a tablet PC. You were spot on right -- when I get back about 25 inches from the screen, the clear type settings become a lot more tolerable. (And also thanks to "GB" I switched the color setting from 16-bit color to 32-bit color so that I could get the absolute best performance from ClearType. I have a Centrino chip that does all the graphics processing along with all the other computation necessary, so I try to lighten its load by setting the color to 16-bit.)

Remember, though, I am working with a tablet PC. And writing on a screen that is 25 inches away more or less destroys the point of having a tablet PC -- it is just too difficult. (To say nothing of how one's handwriting and consequent handwriting recognition deteriorates at that distance.)

So, all ye gurus at Microsoft, please keep the option of turning ClearType and all others font smoothing options completely off for those of us who embrace (literally) our tablet PCs.

# November 17, 2005 8:52 AM

Julie said:

I should add a post script to all of my carping -- I am probably one of the 10 people in the world who prefers to read on my tablet PC rather than a paper version. (I don't remember that as being true when I used an antiquated laptop or desktop PC.)
# November 17, 2005 10:46 AM

Adam said:

<P>Hmm...WTF mate? Segoe UI looks exactly like Frutiger (with the addition of round dots, as in another Frutiger ripoff called Myriad). This is going to be just another repeat of the Arial and Book Antiqua incidents. Can't your designers try to come up with something original? I mean, I know it's not worthwhile or feasible to ensure that every new font is designed in total isolation from existing ones, but this isn't just inspired by an existing face; it looks like a near exact replica, and you're claiming it as something that is new and your own. It's just rude and dishonest.&nbsp; [Edited to remove profanity]</P>
# November 17, 2005 2:34 PM

cb said:

Thanks all for the tip on Consolas. I looked it up and now I need to figure out how to get it :D
# November 17, 2005 4:09 PM

Kawigi said:

Adam: Maybe I'm just being unempathetic, but we're talking about really conservative fonts here. Of course Segoe UI is going to look a lot like any other sans-serif, variable-width, Clear-Type font. The patent on letters ran out a long time ago.
# November 17, 2005 8:00 PM

jensenh said:

Adam:

I edited your comment to remove the profanity.

Sorry you feel like Segoe UI looks like Frutiger. I have both on my machine and think they look pretty different, especially the 8pt. size we're using in Office.

You are, of course, entitled to your own opinion. :)

What Kawigi said has a bit of truth in it as well...
# November 17, 2005 11:11 PM

Richard Tallent said:

Suggestion: love the typeface, please see if the IE team can release it with IE7 as well. That will let us at least use it in our own WinForms and web apps that require backward compatibility with XP/2003.
# November 19, 2005 2:04 AM

Joe Clark said:

If you can't see that Segoe and Frutiger are the same typeface, then you probably think Arial is a serif font. Even by Microsoft standards the claim that Segoe is not a copy of Frutiger takes the cake.

In what sense was Segoe "created"? Creation involves originality, after all.
# November 19, 2005 4:02 PM

Seagoe said:

But why is it spelled wrong?
# November 20, 2005 4:24 AM

BW said:

So how many glyphs will it have? What character sets will it support?
# November 25, 2005 3:54 AM

Fiendish said:

While not an exact duplicate (wouldn't want out and out infringement would we now) it is most certainly a knock-off of frutiger. I think that what makes this so bad is the history involved here.
http://www.hardcovermedia.com/lab/articles/fruseg.htm
# November 26, 2005 7:04 PM

Halski said:

Nice, nice.
# November 27, 2005 5:56 AM

Moz said:

Note that he's changed the pic to the actual font now, so my comment no longer applies. Gotta love the way people silently retro-edit blogs but leave the comments intact.
# November 28, 2005 9:53 PM

PatriotB said:

The 8 pt versus 9 pt is going to create small headaches for developers.

Currently, developers can use a single font (MS Shell Dlg) along with specific dialog styles in their dialog box template, and the operating system will map to the correct system font (MS Sans Serif on 95, Tahoma on 2000+). This mechanism could be easily extended to Segoe UI in Vista.

However, changing the Windows standard from 8 pt to 9 pt means that all dialog boxes will need to be modified and resized. They will end up looking nice on Vista, but when on previous versions, you'll have 9 pt Tahoma or MS Sans Serif, which will probably stick out like a sore thumb.

So it seems Office will (once again) be doing its own thing--using Segoe UI but at 8 pt.

With high-DPI being the long-term solution for making text more readable at higher resolutions, I don't see any value in Windows switching to 9 pt.
# November 29, 2005 12:53 AM

ChrisC said:

Moz, (et al)
He mentions fixing/changing this post:
http://blogs.msdn.com/jensenh/archive/2005/11/28.aspx

I agree that he should have left the old image, added a new one above/below, and made a note *here* under the pic that it was updated.

I appreciate how you feel, having been there
# November 29, 2005 10:16 AM

PortlandType said:

# March 17, 2006 9:44 PM

FoxyBlog said:

# May 3, 2006 6:57 AM

MSDN Magazine said:

As a follow-up to Amy’s post on font smoothing , here’s a quick explanation of how you can turn off ClearType

# January 26, 2007 1:36 PM

high school science fair topics chemistry said:

high school science fair topics chemistry

# September 9, 2007 8:25 AM

Relationship Compatibility said:

We're not just introducing a new UI in Office 12--we're also introducing a new UI font. Windows 95 used &quot;MS Sans Serif&quot; as the UI font in Western locales. It was a straightforward font which looked fairly good, if plain, at small sizes. Office

# June 7, 2008 1:57 AM
New Comments to this post are disabled
Page view tracker