Guidelines for typography

Follow these guidelines when adding text to your Windows Store app.

Typography's role in the Microsoft design language

Typography is at the heart of the Microsoft design language. Each of the Microsoft design principles reinforces the importance of typography. For the first time, app developers have a set of frameworks that support advanced typographic features.

Segoe UI

The signature user interface font of Windows, Segoe UI, was introduced in the Windows Vista/Office 2007 timeframe. It's a sans serif design drawn in the tradition of signage and way-finding typefaces. Since its introduction, Segoe UI has defined the personality of all Microsoft offerings, influencing the feel of not only operating systems, apps, and devices, but also logos, branding, advertising, and packaging. This typeface truly represents the typographic voice of Microsoft.

In Windows 8 we made significant upgrades to the Segoe UI family. These are the major changes:

• Segoe UI Light and Segoe UI Semibold were rehinted (tuned) to improve the quality of their screen rendering.
• We adjusted the design of the default numerals and the "Q" and "I" to match the Windows Phone version of Segoe. You can still use the original Windows Vista forms by using the SS01 Microsoft OpenType stylistic set.
• Because designers often use Segoe UI Light at sizes smaller than 20pt, which is smaller than it was designed for, we added Segoe UI Semilight, a light-weight version of Segoe UI that renders beautifully at smaller sizes, even down to 11pt. We recommend this font when you want to give smaller-sized text a light feel.
• In Windows Vista and Windows 7, Segoe UI supported Latin, Greek, Cyrillic and Arabic (only in regular and bold). For Windows 8, we expanded Segoe UI to include Hebrew, Armenian and Georgian, and we updated the Arabic. Segoe UI now includes character set coverage for all major European and Middle-Eastern languages.
• Although the Windows UI doesn't use italics, we added italic variants for all five Segoe UI weights for apps to use.
• We added advanced OpenType variants to the fonts, including small caps, ligatures and numeral styles across all weights.

Fonts for other languages

Windows 8 also includes Segoe UI aligned fonts for most other languages. These are currently available in two weights: regular and bold. Although we don't include a Segoe UI-aligned font for Japanese, our Japanese UI font, Meiryo UI, includes Segoe UI-based Latin characters as an OpenType stylistic set (ss20).

Here's a list of the recommended fonts for certain languages:

If you are using in-box fonts when localizing your app, see the Windows.Globalization.Fonts APIs to identify the correct UI and document fonts for a given writing system.

Using alternate fonts

Segoe UI’s association with Windows 8 and Microsoft has both benefits and drawbacks. On the one hand, through proper use you add instant credibility to your app. But using the font can make it challenging to infuse your own unique personality or brand into your app.

Fortunately, Windows 8 ships with a variety of high quality alternatives to Segoe UI. A serif font like Cambria has good language coverage and provides a more traditional feel compared to Segoe UI. Calibri, our default authoring font, will be familiar to your users. We also added a brand new font to Windows 8, Calibri Light, which allows for a lighter feel that's different from Segoe UI Light. Finally, like Segoe UI, all of our Cambria and Calibri fonts include advanced OpenType features.

When you use an in-box font, test it on a machine that has a clean install of Windows 8 so that you can verify that the font is available and doesn’t require the installation of Microsoft Office or another app. Windows 8 always installs the exact same set of fonts regardless of localization or edition.

If the core set of Windows fonts don’t provide what you need, you can embed alternate fonts within your app. However, be aware of potential rendering and licensing issues, such as these:

• Most third party fonts don't have the same level of hinting as many of the Windows inbox fonts, so be sure to test them thoroughly at the sizes you care about.
• Although most font licenses allow for some form of document font embedding, most don't allow the font to be redistributed or embedded within an app or game. Before embedding a font, be sure to carefully read the font license and, if in doubt about whether you can embed it, contact the font’s creator.

Choosing the right sizes and weights

With dawn of desktop publishing came easy access to a plethora of type sizes and weights. Early desktop publishers frequently used a wide variety of type sizes and weights in the same document—a hallmark of amateur typography. Too many type sizes and weights make it hard to establish an effective information hierarchy. For that reason, the Windows 8 UI uses only a handful of font sizes and weights:

• Segoe UI Light 42 point for titles
• Segoe UI Light 20 point for second level headings
• Segoe UI Semilight 11 point for body copy
• Segoe UI Regular 9 point for captions and for body text if the screen resolution meets a certain level

For the full type ramp, see Guidelines for fonts.

Note  The Windows type ramp is optimized for light text on dark backgrounds, and deliberately uses lighter-weight fonts. If your app mostly displays dark text on a light background, it might not be suitable to follow this ramp because fonts such as Segoe Ui Light or Semilight don't work well at small sizes (dark gray text on a light gray background). Heavier font weights, such as Regular or Semibold, are better for dark text on a light background.

If you decide to diverge from the Windows 8 type ramp, keep the range of type sizes and styles to a minimum.

Laying out your app page

The amount of space around text is just as important as the font size, and for this reason we recommend using a typographic grid to lay out your text. To learn more about working with the Windows grid, see Laying out an app page. In addition to using the grid, pay particular attention to margins and space around pictures and illustrations. A good layout can be ruined if the text flows around an image poorly or if page elements have inconsistent margins.

8 tips for good typography

There’s more to good typography than use of the right font at the right sizes with good spacing. While there are many manuals on typography (see the Suggested reading section), here are a few tips to help you take your typography to the next level.

1. Apply these OpenType features globally

If you use Segoe UI, apply these OpenType features to all text in your app: kerning (kern), discretionary ligatures (dlig) and stylistic set 20 (ss20).

• Kerning improves the inter-letter spacing of your text, and is most evident at larger sizes (for an example, see the "To" in the before and after illustration that follows).
• Ligatures are key elements of high quality typography, but to prevent dialog reflow in legacy settings, we encoded the standard ligatures as discretionary ligatures in Segoe UI, so you must turn them on to use them.
• OpenType stylistic set 20 lets you access preferred letter shapes and spacing. (This stylistic set is particularly helpful for numbers.) As an added benefit, when you apply this stylistic set, it ensures consistent text rendering across all the Segoe UI weights and styles.

If you aren’t using Segoe UI, it is best to only apply kerning (kern) and standard ligatures (liga).

<p style="font-family: 'Segoe UI'; -ms-font-feature-settings: 'kern' 1, 'dlig' 1, 'ss20' 1, 'lig' 1;">
    6/16/2012<br />
    To: Simon Daniels<br />
    Please find enclosed five flashing baffles.
</p>

These illustrations show the text before and after applying OpenType features.

Before	After

2. Exploit the power of Unicode

Avoiding plain ASCII text through the use of proper characters is the number one way to make your text look more professional:

• Avoid straight quotes and apostrophes
• Use the multiplication symbol instead of the lower case "x"
• Consider using the ratio symbol rather than colon as a time delimiter
• Employ proper dashes instead of hyphens or the minus sign

The most significant improper use of the hyphen is in ranges; use an en-dash instead. As an additional typographic nicety, use a hair space before and after the en-dash. Finally, with lining figures or text in all-caps, the raise the en-dash slightly so it lies in the center of the optical letter.

Here are a few examples of how you can use Unicode to improve your text.

Without Unicode symbols	With Unicode symbols	Unicode code-points to use
		U+201C, U+201D
		U+2019
		U+2236
		U+00D7
		U+00BD
		U+2026
		U+2013, U+200A (hair space)

Unicode also includes thousands of symbols, including 722 symbols that were recently added to the standard. You can use many of these symbols in place of text and bitmaps in your app.

Meaning	Symbol	Unicode code-points to use
Like		U+1F44D
Not like		U+1F494
Type here		U+270E
Show video		U+1F4F9
Play audio		U+1F4FC
Pictures		U+1F4F7

It's easy to apply this advice to content you include in your app, but what if your app displays content that you don't control, such as a news feed? You can autocorrect this content on the fly using basic string search and replace techniques.

3. Avoid gimmicks

There’s a misconception that all you need to do to make your text follow the Microsoft design style is to make it all lowercase or all caps. This isn’t true. The new Windows UI uses sentence case throughout—you won’t find any examples of all-caps or all-lowercase text at all. Unless there’s specific semantic meaning associated with this setting, avoid gimmicks like this, and stick with sentence or title case for content.

4. Use OpenType features selectively

If you follow the first three rules, your text will be in pretty good shape. If you want to take things to the next level, though, you can apply OpenType features to specific portions of text. For example, use the small caps OpenType feature to wrap acronyms. This feature applies true small caps (not scaled caps). If your content contains numbers, apply the old style figures feature to the text. This feature uses old style numbers (also known by some as lower case numbers) that might look better with your content.

Here's an example:

<p style="font-family: 'Segoe UI';" >
   In <span style="font-feature-settings: 'onum' 1;">2012</span> <span style="font-feature-
   settings: 'c2sc' 1;">NASA</span> sent <span style="font-feature-settings: 'onum' 1;">5</span> 
   astronauts to the <span style="font-feature-settings: 'c2sc' 1;">ISS</span>
</p>

Before applying the old style figures feature:

After:

5. Edit

Editing is an aspect of typography that is often overlooked. Many designers don’t consider the text itself to be something they should alter. But if the text isn't well-written and easy to understand, it doesn’t matter how good it looks.

6. Use kerning, tracking, hyphenation, and alignment effectively

As any type designer will tell you, the space between letters is just as important as the letter shapes. Kerning (mentioned in the first rule), applies spacing adjustments between specific pairs of letters to improve the letter spacing. We recommend that you apply it to all of your content.

Tracking, on the other hand, adds (or removes) space between all the letters in a string equally. As a font’s default letter spacing is often optimized for readability at a particular size, there are times when it might be appropriate to slightly widen the spacing. Tracking values of .01em or .02em may be helpful.

Using justified text makes it difficult to have good spacing. When text is forced to fit a container through justification, its spacing always suffers. Justified text usually has "rivers" of white space (large gaps between words) running through the content. Avoid fully-justified text and stick with left alignment whenever possible, and apply hyphenation to keep the right edge of the text from appearing too ragged.

7. Use font-based controls

One of the best kept Windows 8 secrets is that many of the buttons, icons, and controls used in the UI are actually font-based. These are not bitmaps or Scalable Vector Graphics (SVG), but glyphs mapped to the Unicode Private Use Area of the Segoe UI Symbol font. Various showcase apps use the same approach to deliver their icons and controls.

Font-based icons and controls scale just like regular font characters, can be placed in-line with other text elements and, through layering, can even appear in color.

8. Let the reader customize the reading experience

Provide settings that allow users to change the body text size, without impacting system-wide settings. We recommend these values: small (11pt), medium (14pt) and large (18pt). In addition, the app could also allow readers to choose between dark text on a light background, which is best for readability, and dark text on a tinted background or light text on a dark background, which might help reduce eye fatigue in certain environments. Giving users a choice of different body font options is welcomed by readers used to this functionality on dedicated e-reading devices. Keep the list of options limited and language-appropriate.

Suggested reading

Following the basic advice outlined here will give your app a typographic edge. But it barely scratches the surface of what’s possible using modern typefaces and the power of OpenType. If your interest has been piqued, we recommend checking out these books:

• The Elements of Typographic Style by Robert Bringhurst
• Detail in Typography by Jost Hochuli
• Thinking with Type by Ellen Lupton
• Stop Stealing Sheep by Erik Spiekermann and E.M. Ginger

The IEBlog article Using the whole font provides a good primer on how to apply Cascading Style Sheets (CSS) OpenType features, and the linked demos by Monotype, FontShop and Font Bureau demonstrate the extent of what’s possible using the technology.

Related topics

Guidelines for fonts

Build date: 11/29/2012