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.

Comments (64)

  1. Matt says:

    Looks good! Typography is a casual interest of mine, and UI design slightly more than casual, so it’s doubly good!

  2. Gabe says:

    Why would you be using the standard font 1pt smaller than the rest of Windows?

  3. Dave Solimini says:

    where can I get ahold of the Segoe font file?

  4. jensenh says:

    Gabe:

    I will explain in an upcoming article.

  5. Universalis says:

    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?

  6. ChrisC says:

    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!)

  7. Julie says:

    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

  8. ChrisC says:

    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)

  9. jensenh says:

    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.

  10. jensenh says:

    For programming, I prefer Andale Mono, which I think is surprisingly clear and easily-readable monospaced font.

  11. jensenh says:

    Universalis:

    I’m not sure, you’d have to ask the Windows team.

  12. Mike Dunn says:

    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?

  13. jensenh says:

    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.

  14. Carlos says:

    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

  15. Julie says:

    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.

  16. Jody Power says:

    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.

  17. cb says:

    Think we will see a nice new monospace font with Vista? It sure would be a boon for developers who hate Courier New!

  18. AndyC says:

    cb: There is, it’s called Consolas and looks much nicer than Courier!

  19. MSDNArchive says:

    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 πŸ˜‰

  20. Alex Black says:

    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

  21. Alan De Smet says:

    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.

  22. GB says:

    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.

  23. jensenh says:

    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.

  24. Guido D. says:

    Alan de Smet: It doesn’t only work well on LCD — I’m on CRTs and can’t stand being without Cleartype now.

  25. Tim says:

    "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).

  26. Mark Steward says:

    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.

  27. Moz says:

    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.

  28. Marcel says:

    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.

  29. Roland says:

    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?

  30. Dave R. says:

    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 πŸ™‚

  31. Julie says:

    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.

  32. Julie says:

    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.)

  33. Adam says:

    <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>

  34. cb says:

    Thanks all for the tip on Consolas. I looked it up and now I need to figure out how to get it πŸ˜€

  35. MSDNArchive says:

    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.

  36. jensenh says:

    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…

  37. 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.

  38. Joe Clark says:

    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.

  39. Seagoe says:

    But why is it spelled wrong?

  40. BW says:

    So how many glyphs will it have? What character sets will it support?

  41. Fiendish says:

    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

  42. Moz says:

    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.

  43. PatriotB says:

    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.

  44. ChrisC says:

    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

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

  46. high school science fair topics chemistry

  47. 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