We've selected Segoe UI for use on all Microsoft digital designs. Segoe UI provides a wide range of characters and is designed to maintain optimal legibility across sizes and pixel densities. It offers a clean, light, and open aesthetic that complements the content of the system.
We approach typography with an eye to simplicity and efficiency. We choose to use one typeface, a minimum of weights and sizes, and a clear hierarchy. Positioning and alignment follow the default style for the given language. In English the sequence runs left to right, top to bottom.
Line spacing is calculated at 125%, rounding to the closest multiple of four when needed to ensure good reading and adequate space for diacritical marks.
Kerning and tracking
Word spacing and letter spacing
Segoe is a humanist typeface, with a soft, friendly appearance, it has organic, open forms based on handwritten text. To ensure optimum legibility and maintain it’s humanist integrity, the kerning and tracking settings must have specific values.
Kerning should be set to “metrics” and tracking should be set to “0”.
Similar to kerning and tracking, word spacing and letter spacing use specific settings to ensure optimum legibility and humanist integrity.
Word spacing should be set to “100%” and letter spacing should be set to “0%”.
Generally, we recommend that visual elements and columns of type be left-aligned. In most instances, this flush-left and ragged-right approach provides consistent anchoring of the content and a uniform layout.
When typography is not positioned as flush left and ragged right, try to ensure even line endings and avoid hyphenation.
To provide aligned column edges, paragraphs should be indicated by skipping a line without indentation.
If a line is too short, the eye will have to travel left and right too often, breaking the reader’s rhythm.
50–60 letters per line is best for ease of reading.
Segoe provides a wide range of characters and is designed to maintain optimal legibility in both small and large sizes as well as low and high pixel densities. Using the optimal number of letters in a text column line ensures good legibility in an application.
Lines that are too long will strain the eye and may disorient the user. Lines that are too short force the reader’s eye to travel too much and can cause fatigue.
Less than 20
characters per line
is difficult to read.
These lines are
50–60 characters per line is best for ease
of reading. Using the optimal number
of letters in a text column line ensures
More than 60 characters per line is difficult to read. Using the optimal number of letters in a text column line ensures good legibility. Lines that are too long will strain the eye and may disorient the user. Lines that are too short force the reader’s eye to travel too much and can cause fatigue.
Hanging text alignment
The horizontal alignment of icons with text can be handled in a number of ways depending on the size of the icon and the amount of text.
Where the text, either single or multiple lines, fits within the height of the icon, the text should be vertically centered.
Once the height of the text extends beyond the height of the icon, the text within the height of the icon should align vertically and the additional text should flow on naturally below.
When using characters with larger cap, ascender and descender heights, care should be taken to observe the same alignment guidance.
Clipping and ellipses
Clip by default – Assume that text will wrap unless the redline specifies otherwise. When using non-wrapping text, we recommend clipping rather than using ellipses. Clipping can occur at the edge of the container, at the edge of the device, at the edge of a scrollbar, etc.
Exceptions – For containers which are not well-defined (e.g. no differentiating background color), then non-wrapping text can be redlined to use the ellipse ”…”.
Different sizes of fonts should be used to create hierarchy. This hierarchy builds a structure which enables users to easily navigate through written communication. An example is illustrated here using Segoe UI.
Color and contrast
Typography should always be distinct from the background color to ensure readability.
We recommend a minimal color contrast ratio 4.5:1 for readability and optimally, a contrast ratio of 7:1.
We recommend differentiating body and subhead text through color tinting or, in some cases, with a heavier type weight.
Typography guidelines for UWP apps
For UWP-specific typography recommendations, see Typography guidelines for UWP apps.