typography.md

author	description	title	ms.author	ms.date	ms.topic	ms.prod	ms.technology	keywords	ms.localizationpriority
mijacobs	Learn how to use typography in your app to help users understand content easily.	Typography in UWP apps	mijacobs	04/06/2018	article	windows	uwp	windows 10, uwp	medium

Typography

As the visual representation of language, typography’s main task is to communicate information. Its style should never get in the way of that goal. In this article, we'll discuss how to style typography in your UWP app to help users understand content easily and efficiently.

Font

You should use one font throughout your app's UI, and we recommend sticking with the default font for UWP apps, Segoe UI. It's designed to maintain optimal legibility across sizes and pixel densities and offers a clean, light, and open aesthetic that complements the content of the system.

To display non-English languages or to select a different font for your app, please see Languages and Fonts for our recommended fonts for UWP apps.

:::row::: :::column::: Pick one font for your UI. :::column-end::: :::column::: Don't mix multiple fonts. :::column-end::: :::row-end:::

Size and scaling

Font sizes in UWP apps automatically scale on all devices. The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible as a 24 px font on 5" phone that's a few inches away.

Because of how the scaling system works, you're designing in effective pixels, not actual physical pixels, and you shouldn't have to alter font sizes for different screens sizes or resolutions.

:::row::: :::column::: Follow the UWP type ramp sizing. :::column-end::: :::column::: Use a font size smaller than 12 px. :::column-end::: :::row-end:::

Hierarchy

:::row::: :::column::: Users rely on visual hierarchy when scanning a page: headers summarize content, and body text provides more detail. To create a clear visual hierarchy in your app, follow the UWP type ramp. :::column-end::: :::column::: :::column-end::: :::row-end:::

Type ramp

The UWP type ramp establishes crucial relationships between the type styles on a page, helping users read content easily. All sizes are in effective pixels and are optimized for UWP apps running on all devices.

Using the type ramp

:::row::: :::column::: You can access levels of the type ramp as XAML static resources. The styles follow the *TextBlockStyle naming convention. :::column-end::: :::column::: :::column-end::: :::row-end:::

<TextBlock Text="Header" Style="{StaticResource HeaderTextBlockStyle}"/>
<TextBlock Text="SubHeader" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock Text="Title" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Text="SubTitle" Style="{StaticResource SubtitleTextBlockStyle}"/>
<TextBlock Text="Base" Style="{StaticResource BaseTextBlockStyle}"/>
<TextBlock Text="Body" Style="{StaticResource BodyTextBlockStyle}"/>
<TextBlock Text="Caption" Style="{StaticResource CaptionTextBlockStyle}"/>

:::row::: :::column::: Use "Body" for most text.

    Use "Base" for titles when space is constrained.
:::column-end:::
:::column:::
    ![don't](images/dont.svg)
    Use "Caption" for primary action or any long strings.

    Use "Header" or "Subheader" if text needs to wrap.
:::column-end:::

:::row-end:::

Alignment

The default TextAlignment is Left, and in most instances, flush-left and ragged right provides consistent anchoring of the content and a uniform layout. For RTL languages, see Adjusting layout and fonts to support globalization.

<TextBlock TextAlignment="Left">

Character count

:::row::: :::column::: Keep to 50–60 letters per line for ease of reading. :::column-end::: :::column::: Less than 20 characters or more than 60 characters per line is difficult to read. :::column-end::: :::row-end:::

Clipping and ellipses

When the amount of text extends beyond the space available, we recommend clipping text, which is the default behavior of most UWP text controls.

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

:::row::: :::column::: Clip text, and wrap if multiple lines are enabled. :::column-end::: :::column::: Use ellipses to avoid visual clutter. :::column-end::: :::row-end:::

Note: If containers are not well-defined (e.g. no differentiating background color), or when there is a link to see more text, then use ellipses.

Languages

Segoe UI is our font for English, European languages, Greek, Hebrew, Armenian, Georgian, and Arabic.​ For other languages, see the following recommendations.

Globalizing/localizing fonts

Use the LanguageFont font-mapping APIs for programmatic access to the recommended font family, size, weight, and style for a particular language. The LanguageFont object provides access to the correct font info for various categories of content including UI headers, notifications, body text, and user-editable document body fonts. For more info, see Adjusting layout and fonts to support globalization.

Fonts for non-Latin languages

Font-family	Styles	Notes
Ebrima	Regular, Bold	User-interface font for African scripts (Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi	Regular, Bold	User-interface font for North American scripts (Canadian Syllabics, Cherokee).
Leelawadee UI	Regular, Semilight, Bold	User-interface font for Southeast Asian scripts (Buginese, Lao, Khmer, Thai).
Malgun Gothic	Regular	User-interface font for Korean.
Microsoft JhengHei UI	Regular, Bold, Light	User-interface font for Traditional Chinese.
Microsoft YaHei UI	Regular, Bold, Light	User-interface font for Simplified Chinese.
Myanmar Text	Regular	Fallback font for Myanmar script.
Nirmala UI	Regular, Semilight, Bold	User-interface font for South Asian scripts (Bangla, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu)
SimSun	Regular	A legacy Chinese UI font.
Yu Gothic UI	Light, Semilight, Regular, Semibold, Bold	User-interface font for Japanese.

Fonts

Sans-serif fonts

Sans-serif fonts are a great choice for headings and UI elements.

Font-family	Styles	Notes
Arial	Regular, Italic, Bold, Bold Italic, Black	Supports European and Middle Eastern scripts (Latin, Greek, Cyrillic, Arabic, Armenian, and Hebrew) Black weight supports European scripts only.
Calibri	Regular, Italic, Bold, Bold Italic, Light, Light Italic	Supports European and Middle Eastern scripts (Latin, Greek, Cyrillic, Arabic and Hebrew). Arabic available in the uprights only.
Consolas	Regular, Italic, Bold, Bold Italic	Fixed width font that supports European scripts (Latin, Greek and Cyrillic).
Segoe UI	Regular, Italic, Light Italic, Black Italic, Bold, Bold Italic, Light, Semilight, Semibold, Black	User-interface font for European and Middle East scripts (Arabic, Armenian, Cyrillic, Georgian, Greek, Hebrew, Latin), and also Lisu script.
Selawik	Regular, Semilight, Light, Bold, Semibold	An open-source font that's metrically compatible with Segoe UI, intended for apps on other platforms that don’t want to bundle Segoe UI. Get Selawik on GitHub.

Serif fonts

Serif fonts are good for presenting large amounts of text.

Font-family	Styles	Notes
Cambria	Regular	Serif font that supports European scripts (Latin, Greek, Cyrillic).
Courier New	Regular, Italic, Bold, Bold Italic	Serif fixed width font supports European and Middle Eastern scripts (Latin, Greek, Cyrillic, Arabic, Armenian, and Hebrew).
Georgia	Regular, Italic, Bold, Bold Italic	Supports European scripts (Latin, Greek and Cyrillic).
Times New Roman	Regular, Italic, Bold, Bold Italic	Legacy font that supports European scripts (Latin, Greek, Cyrillic, Arabic, Armenian, Hebrew).

Symbols and icons

Font-family	Styles	Notes
Segoe MDL2 Assets	Regular	User-interface font for app icons. For more info, see the Segoe MDL2 assets article.
Segoe UI Emoji	Regular
Segoe UI Symbol	Regular	Fallback font for symbols

Related articles

• Text controls
• XAML theme resources
• XAML styles
• Microsoft Typography