Edit

Typography in Windows 11

  • Article

Several words rendered in Segoe UI Variable

As the visual representation of language, typography's main task is to communicate information. The Windows 11 type system helps you create structure and hierarchy in your content in order to maximize legibility and readability in your UI.

Segoe UI Variable is the new system font for Windows. It is a refreshed take on the classic Segoe and uses variable font technology to dynamically provide great legibility at very small sizes, and improved outlines at display sizes.

Metrics

The word 'Segoe' rendered in Segoe UI Variable with several aspects of the typeface highlighted

Weights

Weight name Weight axis value Visual
Light 300 The word 'Segoe' rendered in Segoe UI Variable light
Semilight 350 The word 'Segoe' rendered in Segoe UI Variable semilight
Regular 400 The word 'Segoe' rendered in Segoe UI Variable regular
Semibold 600 The word 'Segoe' rendered in Segoe UI Variable semibold
Bold 700 The word 'Segoe' rendered in Segoe UI Variable bold

Optical axis

A lower case letter a rendered in Segoe UI Variable with outlines of the different shapes it can have based on the context in which it is being rendered

Segoe UI Variable supports two axes: weight and optical size. The weight axis is incremental, while the optical size axis is automatic and on by default. The optical size axis controls the shape and size of the counters in the font, to prioritize legibility at the small sizes and personality at the large sizes.

Using Segoe Fluent Variable

Type ramp

Windows 11 uses the following values for various types of text in the UI.

Example Weight Size/line height
Example of caption text Small 12/16 epx
Example of body text Text 14/20 epx
Example of body strong text Text semibold 14/20 epx
Example of body large text Text 18/24 epx
Example of subtitle text Display semibold 20/28 epx
Example of title text Display semibold 28/36 epx
Example of title large text Display semibold 40/52 epx
Example of display text Display semibold 68/92 epx

Typography best practices in Windows 11

Windows 11 uses Segoe UI Variable with the following attributes based on the context in which the text is being displayed.

Attribute Value Notes
Weight Regular, Semibold Use regular weight for most text, use Semibold for titles
Alignment Left, Center Align left by default, Align center only in rare cases such as text below icons
Minimum values 14px Semibold, 12px Regular Text smaller than these sizes and weights are illegible in some languages
Casing Sentence case Use sentence casing for all UI text, including titles
Truncation Ellipses and clipping Use ellipses in most cases; clipping is only used in rare cases

Examples

Tip

Open the WinUI 3 Gallery app and see Typography principles in action.

The WinUI 3 Gallery app includes interactive examples of most WinUI 3 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub