Typography in Windows Apps
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 Windows app to help users understand content easily and efficiently.
You should use one font throughout your app's UI, and we recommend sticking with the default font for Windows apps, Segoe UI Variable. 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.
Pick one font for your UI.
Don't mix multiple fonts.
Variable font axes
The Segoe UI Variable font contains two axes for finer control of text. This font has a weight axis (
wght) with weights from Thin (100) to Bold (700). It also has an optical size axis (
opsz) for optical scaling from 8pt to 36pt. When using XAML common controls, the Segoe UI Variable font will be selected by default for supported languages. When this font or another variable font with an optical axis is used, the optical size will automatically match the requested font-size. When using HTML, optical scaling is also automatic, but you will need to specify the Segoe UI Variable font in CSS.
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.
Follow the Windows type ramp sizing.
Don't use a font size smaller than 12 px.
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 Windows type ramp.
The Windows 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.
Check out the guidance on using the XAML type ramp for more details.
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.
Keep to 50–60 letters per line for ease of reading.
Don't use fewer than 20 characters or more than 60 characters per line as this is difficult to read.
Clipping and ellipses
When the amount of text extends beyond the space available, we recommend clipping the text and inserting ellipses [...], which is the default behavior of most UWP text controls.
<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>
Clip text, and wrap if multiple lines are enabled.
Don't use ellipses to avoid visual clutter.
If containers are not well-defined (for example, no differentiating background color), or when there is a link to see more text, then use ellipses.
Segoe UI Variable is our font for English, European languages, Greek, and Russian. For other languages, see the following recommendations.
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
|Ebrima||Regular, Bold||User-interface font for African scripts (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).|
|Gadugi||Regular, Bold||User-interface font for North American scripts (Canadian Syllabics, Cherokee, Osage).|
|Leelawadee UI||Regular, Semilight, Bold||User-interface font for Southeast Asian scripts (Buginese, Khmer, Lao, 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, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu).|
|Segoe UI||Regular, Italic, Light Italic, Black Italic, Bold, Bold Italic, Light, Semilight, Semibold, Black||User-interface font for Arabic, Armenian, Georgian, and Hebrew.|
|SimSun||Regular||A legacy Chinese UI font.|
|Yu Gothic UI||Light, Semilight, Regular, Semibold, Bold||User-interface font for Japanese.|
Sans-serif fonts are a great choice for headings and UI elements.
|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 are good for presenting large amounts of text.
|Cambria||Regular||Serif font that supports European scripts (Latin, Greek, Cyrillic).|
|Courier New||Regular, Italic, Bold, Bold Italic||Serif fixed width font that 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).|
Variable fonts are good for precisely controlling the appearance of text.
|Bahnschrift||Weight, Width||Variable font that supports Latin, Greek, and Cyrillic.|
|Segoe UI Variable||Weight, Optical Size||Variable font that supports Latin, Greek, and Cyrillic.|
Symbols and icons
|Segoe MDL2 Assets||Regular||User-interface font for app icons. For more info, see the Segoe MDL2 assets article.|
|Segoe UI Emoji||Regular||User-interface font for Emoji.|
|Segoe UI Symbol||Regular||Fallback font for symbols.|