The proper use of font sizes, weights, colors, and tracking and space can help give your Windows Store app a clean, uncluttered look that makes it easier to use.
User experience guidelines
Achieving simplicity and clarity require careful attention to typographic detail. In developing your app's UI, we recommend that you apply these rules:
- Use the recommended fonts.
- For Windows Store apps using JavaScript, use the Windows Library for JavaScript style sheets. The Windows Library for JavaScript style sheets make it easy to follow these typographic guidelines because they use the recommend colors, weights, and tracking values. For info about how to include the style sheets, see Quickstart: Adding WinJS controls and styles.
- Follow the layout guidelines for Windows Store apps. For more info, see Understanding the Windows 8 silhouette.
- Use the tracking values provided by the Windows Library for JavaScript style sheets.
- Use contrast (of weight, size, and position) to distinguish page elements that need to be distinguished.
Which fonts should I use?
Use these fonts in your Windows Store app:
- Use Segoe UI (the primary Windows typeface) for UI elements such as buttons and date pickers. Segoe UI supports Latin, Cyrillic, Greek, Arabic, Hebrew, Armenian, and Georgian alphabets.
- Use Calibri for text that the user both reads and writes such as email and chat. Calibri supports Latin, Greek and Cyrillic alphabets.
- Use Cambria for larger blocks of text such as for a magazine or RSS reader. Cambria supports Latin, Greek and Cyrillic alphabets.
Other languages and writing systems use different fonts and may require different sizing and spacing, but the choices are based on the recommendations in this document. When localizing your application, if you are using in-box fonts, use the Windows.Globalization.Fonts APIs to identify the correct UI and document fonts for a given language.
For UI elements: Segoe UI
Segoe UI is the most recognizable font in the system and is the font most closely associated with new Windows UI. Use Segoe UI for all user-interface elements.
The Windows Store app style sheets provide five different versions of Segoe UI, each with a different weight:
-
Segoe UI Light
Segoe UI with a weight of 200.
-
Segoe UI Semilight
Segoe UI with a weight of 300.
-
Segoe UI
Segoe UI at the regular weight, 400.
-
Segoe UI Semibold
Segoe UI with a weight of 600.
-
Segoe UI Bold
Segoe UI with a weight of 700.
To use these predefined weights, set the Cascading Style Sheets (CSS) font-family property to one of the Segoe UI font names. This example uses semibold Segoe UI:
<p style="font-family: 'Segoe UI Semibold'">Semibold text</p>
Use one of these four sizes:
- Use 11 pt Segoe UI Semilight for most text.
- Use 9 pt Segoe UI, the smallest size, for short text elements, such as button captions.
- Use 20pt Segoe UI Light for text elements that need to be clearly visible and draw user attention but are short and fit on a single line.
- Use 42pt Segoe UI Light for very prominent UI elements that consist of one or two words on a single line.
When 20 point text is too large, use a 16 point Segoe UI Semilight font instead. For example, if you have a dense list that contains a lot of items, it will be less crowded in a 16 point font. Don't mix a 16 point and 20 point text on the same page: use one size or the other.
Don't use italic font styles.
This type ramp shows which sizes, weights, and colors to use for different parts of the UI. For each UI part, it shows which colors to use when using the dark stylesheet and which colors to use when using the light stylesheet.
- Primary text has an opacity of 100%. Secondary text has an opacity of 60%.
- Text in the hover state has an opacity of 80%.
- Black and white text in the pressed state has an opacity of 40%. Text in other colors has an opacity of 60%.
| Default view | Rest state | Hover state (opacity: 80%) | Pressed state (opacity: 40%) |
|---|---|---|---|
Page header
|
|
|
|
|
|
|
| |
Page subheader
|
|
|
|
|
|
|
| |
Page subheader, secondary
|
|
|
|
|
|
|
| |
Item title/header
|
|
|
|
|
|
|
| |
Item title/header, secondary
|
|
|
|
|
|
|
| |
Navigation
|
|
|
|
|
|
|
| |
Body text
|
|
N/A |
N/A |
|
|
N/A |
N/A | |
Body text, secondary
|
|
N/A |
N/A |
|
|
N/A |
N/A | |
Links
|
|
|
|
|
|
|
| |
Tertiary info
|
|
|
|
|
|
|
| |
Tertiary info, secondary
|
|
|
|
|
|
|
|
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.
Segoe UI tracking (letter-spacing)
Tracking (global letter-spacing) in the UI is important to the overall readability of the text, particularly when it appears against dark or complex backgrounds.
Tracking adjustments are usually very tiny, and are almost imperceptible unless the letters are very large, but these tiny adjustments can make a huge difference in the readability of a paragraph or a page.
Tracking is measured in proportional units, rather than fixed units like pixels or millimeters. The proportional unit, an em, is equal to the type size in points. For example, the width of em for an 11pt type is 11 points. To set the tracking, set the letter-spacing CSS property.
We recommend these tracking values for Segoe UI, based on font size and weight:
| Size | Weight | Tracking (letter-spacing) value |
|---|---|---|
| 42 pt | Light | 0.00 em |
| 20 pt | Regular | 0.01 em |
| All others | All | 0.02 em |
When you use the Windows Library for JavaScript style sheets, these tracking values are set for you automatically.
We recommend that you keep the default tracking of the Cambria or Calibri fonts.
Segoe UI stylistic sets
Windows 8 uses a brand new version of Segoe UI that has a number of redesigned default characters, new weights, new Microsoft OpenType alternates, and expanded language support. The redesigned characters align more closely with other Windows 8 implementations, but don't change character widths in the regular and bold styles. That means existing dialogs, content, and web sites don't have to reflow when you use the new version of Segoe UI.
This illustration shows the notable characters that have been redesigned.
| Segoe UI in Windows 7 |  |
|---|---|
| Segoe UI in Windows 8 |  |
You can use the Windows 7 characters by using the SS01 OpenType stylistic set. To use this set, set the -ms-font-feature-settings property to 'ss01' 1, as shown in this example:
<p style="font-family: 'Segoe UI'; -ms-font-feature-settings: 'ss01' 1;">
Windows 7 Segoe UI
</p>
You can also use the SS20 stylistic set, which provides preferred design and spacing. This illustration highlights the differences between the default Windows 8 Segoe UI and the SS01 and SS20 versions.
| Windows 8 default |  |
|---|---|
| SS01 (compatible with Windows 7 Segoe UI) |  |
| SS20 (preferred design and spacing) |  |
If you aren't concerned with backwards compatibility, use the SS20 stylistic set.
Segoe UI Symbol
For guidance using the Segoe UI Symbol font, see the Segoe UI Symbol icon list.
For reading: Cambria
Most print media use serif fonts, so users expect a serif font when reading a book or magazine. Cambria is a serif font designed for extended onscreen reading. Use Cambria when displaying large amounts of text, such as book or magazine content.
Note Although Cambria is the default font for unformatted eBook content, reading apps may allow the reader to change the font. We also expect more eBook content to be formatted in a designer-specified, embedded font.
For reading apps, follow these guidelines:
- Keep the text columns narrow enough that the lines of text don't get too long to read comfortably. The typographic grid has specs for this.
- Break up a long text into chapters or sections.
- Support continuing from the point where a reader left off.
Use these font sizes when using the Cambria font: 9pt, 11pt, and 20pt. You can use the normal and bold font-weights. We recommend that you keep the default tracking.
Unlike the Segoe UI font, the Windows Library for JavaScript doesn't provide different versions of Cambria for different font weights. Instead, set the font weight by setting the font-weight CSS property to normal or bold. Here's an example of the recommended Cambria sizes and weights.
For reading and writing: Calibri
Calibri is a sans-serif font family designed for reading long texts onscreen. Use Calibri for text that the user writes or edits, such as text in an email or chat client. It is the default font in Microsoft Outlook, Microsoft Word, and Microsoft PowerPoint.
When using Calibri, set its font-size to 13 and its weight to normal. We recommend that you keep the default tracking in Calibri.
Here's an example of the Calibri font:
Note 13pt Calibri has the same x-height as 11pt Segoe UI, so their sizes appear consistent when used together in the same line.
Related topics
- Segoe UI Symbol icon list
- Quickstart: Adding WinJS controls and styles
- Understanding the Windows 8 silhouette
Build date: 11/29/2012
