Windows Dev Center

Guidelines for fonts

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

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

The Windows 10 type ramp

The type ramp establishes a crucial design relationship from headlines to body text and ensures a clear and understandable hierarchy between the different levels. Users immediately understand where to find information and how to parse the page.

Here's the type ramp that we recommend for UWP apps:

Text styleTypefaceWeightSize (epx)Line spacing (epx)Word spacingTracking (1/1000 em)XAML style key
HeaderSegoe UILight4656100%0HeaderTextBloxStyle
SubheaderSegoe UILight3440100%0SubheaderTextBlockStyle
TitleSegoe UISemilight2428100%0TitleTextBlockStyle
SubtitleSegoe UIRegular2024100%0SubtitleTextBlockStyle
BaseSegoe UISemibold1520100%0BaseTextBlockStyle
BodySegoe UIRegular1520100%0BodyTextBlockStyle
CaptionSegoe UIRegular1214100%0CaptionTextBlockStyle

 

Recommended fonts

You don't have to use the Segoe UI font for everything. You might use other fonts for certain scenarios, such as reading, or when display text in non-English languages.

Here's the list of fonts that are guaranteed to be available in all Windows 10 editions that support UWP apps.

Note  If you use a font that’s not in this list, your app may trigger an automatic download of the font data from a Microsoft service. This can have performance and other impacts that may be a concern, particularly for mobile devices. In particular, note that this might consume some of a user’s mobile data plan or result in mobile data usage costs. UWP apps that will available on mobile devices should never use fonts for UI content other than fonts in this list.
Font-familyStylesComment
ArialRegular, Italic, Bold, Bold Italic, Black
CalibriRegular, Italic, Bold, Bold Italic, Light, Light Italic
CambriaRegular
Cambria MathRegular
Comic Sans MSRegular, Italic, Bold, Bold Italic
Courier NewRegular, Italic, Bold, Bold Italic
EbrimaRegular, BoldUser-interface font for African scripts (Ethiopic, N’Ko, Osmanya, Tifinagh, Vai)
GadugiRegularUser-interface font for North American scripts (Canadian Syllabics, Cherokee)
GeorgiaRegular, Italic, Bold, Bold Italic
Javanese Text Regular Fallback font for Javanese scriptRegularFallback font for Javanese script
Leelawadee UIRegular, Semilight, BoldUser-interface font for Southeast Asian scripts (Buginese, Lao, Khmer, Thai)
Lucida ConsoleRegular
Malgun GothicRegularUser-interface font for Korean
Microsoft HimalayaRegularFallback font for Tibetan script
Microsoft JhengHeiRegular
Microsoft JhengHei UIRegularUser-interface font for Traditional Chinese
Microsoft New Tai LueRegularFallback font for New Tai Lue script
Microsoft PhagsPaRegularFallback font for Phags-pa script
Microsoft Tai LeRegularFallback font for Tai Le script
Microsoft YaHeiRegular
Microsoft YaHei UIRegularUser-interface font for Simplified Chinese
Microsoft Yi BaitiRegularFallback font for Yi script
Mongolian BaitiRegularFallback font for Mongolian script
MV BoliRegularFallback font for Thaana script
Myanmar TextRegularFallback font for Myanmar script
Nirmala UIRegular, Semilight, BoldUser-interface font for South Asian scripts (Bangla, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu)
Segoe MDL2 AssetsRegularUser-interface font for app icons
Segoe PrintRegular
Segoe UIRegular, Italic, Bold, Bold Italic, Light, Semilight, Semibold, BlackUser-interface font for European and Middle East scripts (Arabic, Armenian, Cyrillic, Georgian, Greek, Hebrew, Latin), and also Lisu script
Segoe UI EmojiRegularThe version that ships on Windows Phone includes a white outline around each emoji to ensure that it will show up on any color background. It is metrically compatible with the version that ships on Windows.
Segoe UI HistoricRegularFallback font for historic scripts
Segoe UI SymbolRegularFallback font for symbols
SimSunRegular
Times New RomanRegular, Italic, Bold, Bold Italic
Trebuchet MSRegular, Italic, Bold, Bold Italic
VerdanaRegular, Italic, Bold, Bold Italic
WebdingsRegular
WingdingsRegular
Yu GothicMedium
Yu Gothic UIRegularUser-interface font for Japanese

 

Related topics

For designers
Label (or text block)
Segoe UI Symbol icons
For developers (XAML)
XAML theme resources reference
Laying out an app page
Segoe UI Symbol icons
TextBlock.FontFamily property
For developers (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
Samples
XAML text display sample
CSS stying: branding your app sample
Language font mapping sample

 

 

Show:
© 2015 Microsoft