Share via

Making the Letters Better

  • Article

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

  • Anonymous
    November 16, 2005
    Looks good! Typography is a casual interest of mine, and UI design slightly more than casual, so it's doubly good!

  • Anonymous
    November 16, 2005
    Why would you be using the standard font 1pt smaller than the rest of Windows?

  • Anonymous
    November 16, 2005
    where can I get ahold of the Segoe font file?

  • Anonymous
    November 16, 2005
    Gabe:

    I will explain in an upcoming article.

  • Anonymous
    November 16, 2005
    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?

  • Anonymous
    November 16, 2005
    The comment has been removed

  • Anonymous
    November 16, 2005
    The comment has been removed

  • Anonymous
    November 16, 2005
    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)

  • Anonymous
    November 16, 2005
    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.

  • Anonymous
    November 16, 2005
    For programming, I prefer Andale Mono, which I think is surprisingly clear and easily-readable monospaced font.

  • Anonymous
    November 16, 2005
    Universalis:

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

  • Anonymous
    November 16, 2005
    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?

  • Anonymous
    November 16, 2005
    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.

  • Anonymous
    November 16, 2005
    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

  • Anonymous
    November 16, 2005
    The comment has been removed

  • Anonymous
    November 16, 2005
    The comment has been removed

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

  • Anonymous
    November 16, 2005
    cb: There is, it's called Consolas and looks much nicer than Courier!

  • Anonymous
    November 16, 2005
    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 ;-)

  • Anonymous
    November 16, 2005
    The comment has been removed

  • Anonymous
    November 16, 2005
    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.

  • Anonymous
    November 16, 2005
    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.

  • Anonymous
    November 16, 2005
    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.

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

  • Anonymous
    November 16, 2005
    "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).

  • Anonymous
    November 16, 2005
    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.

  • Anonymous
    November 16, 2005
    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.

  • Anonymous
    November 16, 2005
    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.

  • Anonymous
    November 16, 2005
    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?

  • Anonymous
    November 16, 2005
    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 :)

  • Anonymous
    November 17, 2005
    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.

  • Anonymous
    November 17, 2005
    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.)

  • Anonymous
    November 17, 2005
    The comment has been removed

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

  • Anonymous
    November 17, 2005
    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.

  • Anonymous
    November 17, 2005
    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...

  • Anonymous
    November 18, 2005
    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.

  • Anonymous
    November 19, 2005
    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.

  • Anonymous
    November 19, 2005
    But why is it spelled wrong?

  • Anonymous
    November 24, 2005
    So how many glyphs will it have? What character sets will it support?

  • Anonymous
    November 26, 2005
    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

  • Anonymous
    November 26, 2005
    Nice, nice.

  • Anonymous
    November 28, 2005
    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.

  • Anonymous
    November 28, 2005
    The comment has been removed

  • Anonymous
    November 29, 2005
    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

  • Anonymous
    March 17, 2006
    PingBack from http://www.portlandtype.com/news/?p=59

  • Anonymous
    April 03, 2006
    PingBack from http://www.fixmbr.de/index.php/2006/04/03/alles-nur-geklaut/

  • Anonymous
    April 16, 2006
    PingBack from http://jjgod.3322.org/2006/04/17/segoe-ui-oou/

  • Anonymous
    May 18, 2006
    PingBack from http://blog.sparanoid.com/2006/05/19/segoe-ui-frutiger-next-lt-and-frutiger-45/

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

  • Anonymous
    September 09, 2007
    The comment has been removed

  • Anonymous
    June 06, 2008
    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

  • Anonymous
    June 25, 2008
    PingBack from http://jasonnews.45x.com/startmenutextblurry.html

  • Anonymous
    July 10, 2008
    PingBack from http://rudy.newsvideoguide.info/letterstoosmallwindows.html

  • Anonymous
    July 11, 2008
    PingBack from http://pablo.digestvidsonline.info/makinglargefontsmicrosoftword.html

  • Anonymous
    October 27, 2008
    PingBack from http://mstechnews.info/2008/10/the-office-2007-ui-bible/

  • Anonymous
    May 28, 2009
    PingBack from http://paidsurveyshub.info/story.php?title=jensen-harris-an-office-user-interface-blog-making-the-letters-better

  • Anonymous
    June 09, 2009
    PingBack from http://cellulitecreamsite.info/story.php?id=2234

  • Anonymous
    June 16, 2009
    PingBack from http://topalternativedating.info/story.php?id=1988

  • Anonymous
    June 17, 2009
    PingBack from http://www.heeftstijl.nl/design/systeemfonts-roeien-met-de-riemen/

  • Anonymous
    June 18, 2009
    PingBack from http://outdoordecoration.info/story.php?id=2521

  • Anonymous
    June 18, 2009
    PingBack from http://gardenstatuesgalore.info/story.php?id=86

  • Anonymous
    June 19, 2009
    PingBack from http://debtsolutionsnow.info/story.php?id=1800