Windows 8 metro applications have a few things in common. One of them is typography. Segoe (pronounced “se-go” not “see-go” or anything else), specifically we’re talking about the Segoe UI font (or a derivative of it), is the standard san serif font in Windows 8 metro applications – and more.
Preview Segoe UI
What does Segoe UI look like? Take a look:
This is the Windows 7 version, the Windows 8 version has a different Q!
“Segoe is either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries.” In all reality, Segoe UI has become “the Microsoft font”, and it’s beautiful.
Wikipedia: [Microsoft] uses Segoe in their online and printed marketing materials, including recent logos for a number of products. Additionally, the Segoe UI family of fonts is utilized by numerous Microsoft applications, and may be installed by applications (such as Microsoft Office 2007 and Windows Live Messenger 2009) or bundled with certain operating systems (including Windows Vista and Windows 7).
Bruce: Segoe UI is an approachable, open, and friendly typeface, and as a result has better readability than Tahoma, Microsoft Sans Serif, and Arial. It is smoother and more book-like than ITC Franklin Gothic. It has the characteristics of a humanist sans serif: the varying widths of its capitals (narrow E and S, for instance, compared with Helvetica, where the widths are more alike, fairly wide); the stress and letterforms of its lowercase; and its true italic (rather than an “oblique” or slanted roman, like many industrial–looking sans serifs). The typeface is meant to give the same visual effect on screen and in print while being highly readable on its own. It was designed to be a humanist sans serif with no strong character or distracting quirkiness.
Segoe UI is optimized for ClearType, which is on by default in Windows Vista. With ClearType enabled, Segoe UI is a very beautiful, readable font. Without ClearType, Segoe UI is only marginally acceptable. These factors determine when you should choose to use Segoe UI.
Segoe UI Symbol
But as cool as Segoe UI is, that’s not what I want to talk about. I want to talk about Segoe UI Symbol. You might wonder “do I have it installed? Navigate to c:\windows\fonts and check:
Segoe UI Symbol was added to Windows 7 to support, as the name suggests, Unicode encoded symbols. In Windows 8 the font has been extended to include even more symbols, such as playing cards, mahjong tiles and emoji, as well as symbols used by Windows 8 UI, these are encoded in the font’s Unciode “Private Use Area” or PUA.
1,000 icons
I am not keeping super accurate count here. But if you run the Character Map program, installed on every windows desktop (just type “charmap” in the run dialog) and see what a treat Segoe UI Symbol really is. You’re going to want to scroll – and scroll and scroll. It’s a wealth.
Note: Charmap does not display all of the symbols in the font, including many of the Unicode 6 “emoji” – Office “Insert Symbol” feature proves access to the entire set.
Many of the icons are the icons we see in the metro applications we use every day. This is a handy resource for you to build similar-to-the-OS applications. By the way, building such a similar application can have its significant advantages (familiarity) and disadvantages (not distinct).
Use it in XAML
These styles are located in StandardStyles.xaml in the “Common” folder. The image to the right shows some of the styles defined in the base AppBarButtonStyles style.
Using these styles mixed with a knowledge of your options (thanks to the character map, et al) you can create a bunch of scalable icons effortlessly – and make your application look awesome.
Leverage the styles like this:
Levarage the font like this:
Other options
As a Windows Phone application developer, metro-styled icons are a must. And, now, as a Windows metro developer, metro-styled icons are a must. Segoe UI Symbol gives me tons of options – but what happens when I can’t find the icons I need?
First, Metro Studio 1
Metro Studio 1 is one of the best icon programs I have ever used. It is not the most powerful (overall) but it is one of the most productive for metro developers. It’s selection is very large and it’s ease of use is profound. Best of all, Syncfusion gives it away for free.
Second, the Noun Project
The Noun Project is a web site. It is smartly designed and jammed full of royalty-free, metro-ready icons for you to enjoy. Their variety is staggering (including this lovely afro icon – every application needs it!) and their search is handy. The Noun Project might be all you will ever need.
Third, Google Images
Google images can reveal what might be the most comprehensive and hardest to use set of metro-friendly icons in the universe. The reason I say it’s not user friendly is, although Google Images is easy to use, the images to which it points are not always available in a consumable package.
I would be remiss if I didn’t mention Bing Images, too. With all its momentum, Google’s lead is more narrow every day. Bing may not be the next Google, but it’s a fair option already today. Many people use it. If you have jokingly dismissed Bing, you might be surprised.
Conclusion
If you are going to build a Windows Phone or Windows 8 metro application, do a great job. And one of the aspects is great icons. You likely already have thousands of icons installed. But if those don’t cut it for you, check out the other resources I mentioned and find the one that fits.
Best of luck!