Guidelines for typography

Applies to Windows and Windows Phone

Description

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.

Dos and don'ts

  • Use a typographic grid to lay out your text.
  • Use Unicode to improve your text.
  • Apply Microsoft OpenType features globally.
  • Use sentence case.
  • Use an en-dash instead of a hyphen in numerical ranges.
  • Don’t apply discretionary ligatures if not using recommended fonts.
  • Don't use justified text.

Additional usage guidance

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 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 on-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 an OpenType "stylistic set" (SS01) .
  • In Segoe UI Light, Semilight, and Semibold, we made the numerals space proportionally by default. You can access the more traditional fixed pitch numerals in Windows Store apps using C#/VB/C++ and XAML by setting the Typography.NumeralAlignment attached property to "Tabular". If you use JavaScript and HTML, set the font-feature-settings property to “TNUM” to apply the tabular (fixed pitch) numeral spacing OpenType feature.
  • 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.

In Windows 8.1, we added Segoe UI Black and Segoe UI Black Italic, with pan-European language coverage, further extending the palette of font choices available.

Fonts for other languages

Windows 8 also includes Segoe UI aligned fonts for most other languages. These are 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-style Latin characters and numerals as an OpenType stylistic set (ss20).

Here’s a list of the recommended fonts for the following common languages and scripts:

ScriptFont
Latin, Greek, CyrillicSegoe UI
ArabicSegoe UI
HebrewSegoe UI
Armenian & GeorgianSegoe UI
Simplified ChineseMicrosoft YaHei UI
Traditional ChineseMicrosoft JhengHei UI
KoreanMalgun Gothic
ThaiLeelawadee UI
Khmer Leelawadee UI
LaoLeelawadee UI
American indigenous languages, including Cherokee Gadugi
African languagesEbrima
Indian languagesNirmala UI
JapaneseMeiryo UI

 

Please note that Windows 8.1 also offers the following fonts:

  • Microsoft YaHei UI Light (available for use at 20pt and above)
  • Microsoft JhengHei UI Light (available for use at 20pt and above)
  • Leelawadee UI Semilight (available for use at 11pt and above)
  • Nirmala UI Semilight (available for use at 11pt and above)

If you are using in-box fonts when localizing your app, see the Windows.Globalization.Fonts APIs to identify the recommended 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 traditional feel. Calibri, our default authoring font, will be familiar to your users. In Windows 8, a light weight was added to Calibri, making it a good sans-serif alternative to Segoe UI. Like Segoe UI, Cambria and Calibri include advanced OpenType features. In Windows 8.1, we also added a new typeface family called Sitka, which is available in a range of sizes.

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 and Windows 8.1 come with 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 the 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 headings
  • Segoe UI Semilight 11 point for body copy
  • Segoe UI Regular 9 point for captions

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 OpenType features globally

If you use one of the recommended UI fonts, apply these OpenType features to all text: 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 content, 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 the recommended UI fonts, it is best to only apply kerning (kern) and standard ligatures (liga). Don’t apply discretionary ligatures if you decided not to use the recommended fonts.


<p class='note'>
    6/16/2012<br />
    To: Simon Daniels<br />
    Please find enclosed five flashing baffles.
</p>



.note {
    font-family: 'Segoe UI';
    -ms-font-feature-settings: 'kern' 1, 'dlig' 1, 'ss20' 1, 'lig' 1
}


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

BeforeAfter
Text before applying Open Type featuresText after applying Open Type features

 

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 common improper use of the hyphen is in numerical ranges; use an en-dash instead. As an additional typographic refinement, use a hair space before and after the en-dash. Finally, with lining figures or text in all-caps, raise the en-dash slightly so it lies in the center of the optical letter.

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.

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

Without Unicode symbolsWith Unicode symbolsUnicode code-points to use
Text that doesn't use Unicode symbolsText that uses Unicode symbolsU+201C, U+201D
Text that doesn't use Unicode symbolsText that uses Unicode symbolsU+2019
Text that doesn't use Unicode symbolsText that uses Unicode symbolsU+2236
Text that doesn't use Unicode symbolsText that uses Unicode symbolsU+00D7
Text that doesn't use Unicode symbolsText that uses Unicode symbolsU+00BD
Text that doesn't use Unicode symbolsText that uses Unicode symbolsU+2026
Text that doesn't use Unicode symbolsText that uses Unicode symbolsU+2013, U+200A (hair space)

 

Unicode also includes thousands of symbols, including 722 emoji symbols that were added to the standard. You can use many of these symbols in place of text and bitmaps in your app. For a list of available symbols, see the Segoe UI Symbol icon list.

3. Use sentence case

When communicating with text, the globally applicable approach is to use conventional sentence casing. Styling text to be all-caps or all-lowercase won’t translate into international writing systems that use only one case. Using standard sentence case makes your app more accessible to a broader audience.

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:

Text before applying the old style figures feature

After:

Text after applying the old style figures feature

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 fully 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 secrets of Windows typography 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 appear in color. Windows 8.1 supports full color fonts, further extending the possibilities for font based controls.

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.

When you create a reading app, consider adding a flyout in the bottom app bar that allows users to switch between text sizes. You can use the Segoe UI Symbol font size icon to create a consistent, predictable experience for users. For an overview of standard icons, see the Segoe UI Symbol icon list.

The image below shows a news app with a flyout for resizing text located on the app bar.Screenshot of news app with an extended text size flyout

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
  • Inside Paragraphs: Typographic Fundamentals by Cyrus Highsmith
  • 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

For designers
Guidelines for fonts
Label (or text block)
Guidelines for Segoe UI Symbol icons
Laying out an app page
Guidelines for flyouts(Windows Store apps)
For developers (HTML)
font-feature-settings property
For developers (XAML)
Windows.Globalization.Fonts
Typography.NumeralAlignment attached property

 

 

Show:
© 2014 Microsoft