Guidelines for fonts

Applies to Windows only

The proper use of font sizes, weights, colors, tracking, and spacing can help give your Windows Store app a clean, uncluttered look that makes it easier to use. Follow these guidelines when selecting fonts and specifying font sizes and colors.

There are style resources available that make it easier to adhere to these guidelines:

If you're looking for a list of Segoe UI Symbol icons, see Guidelines for Segoe UI Symbol icons.

Dos and don'ts

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.
    • 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. See For reading and writing in the Additional usage guidance section below.
    • Use Cambria for larger blocks of text such as for a magazine or RSS reader. Cambria supports Latin, Greek and Cyrillic alphabets. See For reading in the Additional usage guidance below.

    Note  Other languages and writing systems use different fonts and may require different sizing and spacing. When localizing your app, 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 your UI elements, use these font styles and 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 20 pt Segoe UI Light for text elements that need to be clearly visible and draw user attention but fit on a single line. If 20 pt is too big, use 16 pt Segoe UI Semilight instead. For example, 16pt font might be better if you have a dense list with many items. However, don't use both 20 pt and 16 pt Segoe UI fonts on the same page.
    • Use 42 pt Segoe UI Light for prominent UI elements that consist of one or two words on a single line.

    See Additional usage guidance for more detailed Segoe UI weight, opacity, letter spacing, and stylistic set recommendations.

  • Use contrast (of weight, size, and position) to distinguish page elements if necessary.
  • Use the following opacities:
    • 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%.

    For examples of Segoe UI fonts at different sizes and opacities, see Segoe UI type ramp in Additional usage guidance.

  • Indicate keyboard focus by alternating black and white pixel squares.

    Header on a dark background with keyboard focus

  • If a page header or subheader is too long to display, use an ellipsis (U+2026), not three periods. Don't include a space between the end of the header text and the ellipsis. long header with ellipsis
  • Follow the layout guidelines for Windows Store apps. For more info, see Laying out an app page.
  • Don't use italic fonts.

Additional usage guidance

Predefined weights for 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 font family to one of these Segoe UI font names. For apps using JavaScript and HTML, use the Cascading Style Sheets (CSS) font-family property. If you're using C#/VB/C++ or XAML, use FontFamily.


<p style="font-family: 'Segoe UI Semibold'">Semibold text</p>


<TextBlock x:Name="semiBold" Text="Semibold font." FontFamily="Segoe UI Semibold"/>


Segoe UI type ramp

This type ramp shows which sizes, weights, and colors to use for different parts of the UI. For each portion of the UI, it shows which colors to use when using the dark style sheet and which colors to use when using the light style sheet.

  • 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%.

(The "Illustration key" in each entry identifies that text style in the image that follows this table.)

Default viewRest stateHover state (opacity: 80%)Pressed state (opacity: 40%)
Page header
  • Do not use when the app width is 500 pixels or less
  • Font family: Segoe UI Light
  • Font size: 42pt
  • Illustration key: A

Page header text using the dark stylesheet

rgba(255, 255, 255, 1.0)

Page header text in the hover state

rgba(255, 255, 255, 0.8)

Page header text in the pressed state

rgba(255, 255, 255, 0.4)

Page header text using the light stylesheet

rgba(0, 0, 0, 1.0)

Page header text in the hover state

rgba(0, 0, 0, 0.8)

Page header text in the pressed state

rgba(0, 0, 0, 0.4)

Page subheader
  • Font family: Segoe UI Light
  • Font size: 20pt
  • Illustration key: B

A subheader in the dark style sheet

rgba(255, 255, 255, 1.0)

A subheader in the hover state

rgba(255, 255, 255, 0.8)

A subheader in the pressed state

rgba(255, 255, 255, 0.4)

A subheader in the light style sheet

rgba(0, 0, 0, 1.0)

A subheader in the hover state

rgba(0, 0, 0, 0.8)

A page subheader in the pressed state

rgba(0, 0, 0, 0.4)

Interactive subheader
  • Font family: Segoe UI Light
  • Font size: 20 pt
  • Glyph: Segoe UI Symbol U+E26B
  • Spacing between text and glyph: 10 pixels
An interactive subheader in the dark style sheet

rgba(255, 255, 255, 1.0)

An interactive subheader in the dark style sheet, hover state

rgba(255, 255, 255, 0.8)

An interactive subheader in the dark style sheet, pressed state

rgba(255, 255, 255, 0.4)

An interactive subheader in the light style sheet

rgba(0, 0, 0, 1.0)

An interactive subheader in the light style sheet, hover state

rgba(0, 0, 0, 0.8)

An interactive subheader in the light style sheet, pressed state

rgba(0, 0, 0, 0.4)

Item title/header
  • Small subheader
  • Font family: Segoe UI Semibold
  • Font size: 11pt
  • Illustration key: C

An item title in the dark style sheet

rgba(255, 255, 255, 1.0)

An item title in the hover state

rgba(255, 255, 255, 0.8)

An item title in the pressed state

rgba(255, 255, 255, 0.4)

An item title in the light style sheet

rgba(0, 0, 0, 1.0)

An item title in the hover state

rgba(0, 0, 0, 0.8)

An item title in the pressed state

rgba(0, 0, 0, 0.4)

Item title/header, secondary
  • Font family: Segoe UI Semibold
  • Font size: 11pt
  • Illustration key: D

An item title in the dark style sheet

rgba(255, 255, 255, 0.6)

An item title in the hover state

rgba(255, 255, 255, 0.8)

An item title in the pressed state

rgba(255, 255, 255, 0.4)

An item title in the light style sheet

rgba(0, 0, 0, 0.6)

An item title in the hover state

rgba(0, 0, 0, 0.8)

An item title in the pressed state

rgba(0, 0, 0, 0.4)

Navigation
  • Item title/header, Navigation
  • Font family: Segoe UI
  • Font size: 11pt

A navigation item in the dark style sheet

rgba(255, 255, 255, 1.0)

A navigation item in the hover state

rgba(255, 255, 255, 0.8)

A navigation item in the pressed state

rgba(255, 255, 255, 0.4)

A navigation item in the light style sheet

rgba(0, 0, 0, 1.0)

A navigation item in the hover state

rgba(0, 0, 0, 0.8)

A navigation item in the pressed state

rgba(0, 0, 0, 0.4)

Body text
  • Font family: Segoe UI Semilight
  • Font size: 11pt
  • Illustration key: E

Body text in the dark style sheet

rgba(255, 255, 255, 1.0)

N/A

N/A

Body text in the light style sheet

rgba(0, 0, 0, 1.0)

N/A

N/A

Links
  • Font family: Segoe UI Semilight
  • Font size: 11pt
  • Illustration key: F

A link in the dark style sheet

rgba(148, 102, 255, 1.0)

A link in the hover state

rgba(148, 102, 255, 0.8)

A link in the pressed state

rgba(148, 102, 255, 0.6)

A link in the light style sheet

rgba(79,26,203, 1.0)

A link in the hover state

rgba(79,26,203, 0.8)

A link in the pressed state

rgba(79,26,203, 0.6)

Tertiary info
  • Font family: Segoe UI
  • Font size: 9pt
  • Illustration key: G

Tertiary info in the dark style sheet

rgba(255, 255, 255, 1.0)

Tertiary info in the hover state

rgba(255, 255, 255, 0.8)

Tertiary info in the pressed state

rgba(255, 255, 255, 0.4)

Tertiary info in the light style sheet

rgba(0, 0, 0, 1.0)

Tertiary info in the hover state

rgba(0, 0, 0, 0.8)

Tertiary info in the pressed state

rgba(0, 0, 0, 0.4)

Tertiary info, secondary
  • Font family: Segoe UI
  • Font size: 9pt
  • Illustration key: H

Tertiary info in the dark style sheet

rgba(255, 255, 255, 0.6)

Tertiary info in the hover state

rgba(255, 255, 255, 0.8)

Tertiary info in the pressed state

rgba(255, 255, 255, 0.4)

Tertiary info in the light style sheet

rgba(0, 0, 0, 0.6)

Tertiary info in the hover state

rgba(0, 0, 0, 0.8)

Tertiary info in the pressed state

rgba(0, 0, 0, 0.4)

 

You can see how Windows Store app layout and typography applies to a basic blog article in this illustration:

An example of using the recommended typography styles.

Note  The Windows type ramp is optimized for light text on dark backgrounds, and 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 recommended 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:

SizeWeightTracking (letter-spacing) value
42 ptLight0.00 em
20 ptRegular0.01 em
All othersAll0.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.

Changes in Windows 8 to Segoe UI stylistic set

Windows 8 uses a version of Segoe UI that has a number of redesigned default characters, new weights, new Microsoft OpenType alternates, and expanded language support. Note that these redesigned characters 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 7Segoe in Windows 7
Segoe UI in Windows 8Segoe in Windows 8

 

You can use the Windows 7 characters by using the SS01 OpenType stylistic set. To use this set in an app using CSS, 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>

If your app uses C#/VB/C++ and XAML, use the Typography.SetStylisticSet1 method to set the value of the StylisticSet1 attached property to true for the desired dependency object.

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 defaultThe default Segoe UI font
SS01 (compatible with Windows 7 Segoe UI)The Windows 7 Segoe UI font
SS20 (preferred design and spacing)The SS20 Segoe UI font

 

If you aren't concerned with backwards compatibility, use the SS20 stylistic set.

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 WinJS doesn't provide different versions of Cambria for different font weights. Instead, set the font weight by setting the font weight (font-weight CSS property or FontWeight for apps using XAML) to normal or bold. Here's an example of the recommended Cambria sizes and weights.

Standard weights and sizes for the Cambria font

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:

The Calibri font with a font-size of 13pt and a font-weight of normal

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

For designers
Laying out an app page
Guidelines for typography
Label (or text block)
Segoe UI Symbol icons
For developers (Windows Runtime apps using JavaScript and HTML)
WinJS style sheets
Quickstart: Adding WinJS controls and styles
Laying out an app page
Segoe UI Symbol icons
font-family property
letter-spacing property
-ms-font-feature-settings
For developers (Windows Runtime apps using C#/VB/C++ and XAML)
XAML theme resources reference
Laying out an app page
Segoe UI Symbol icons
TextBlock.FontFamily property
Samples
XAML text display sample
CSS stying: branding your app sample
Language font mapping sample

 

 

Show:
© 2014 Microsoft. All rights reserved.