Typography

As the visual representation of language, typography’s main task is to be clear. Its style should never get in the way of that goal. But typography also has an important role as a layout component—with a powerful effect on the density and complexity of the design—and on the user’s experience of that design.

Typeface

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.

Example of typography showing the alphabet in uppercase and lowercase letters in Segoe UI
Weights of Segoe UI shown from light to bold

Weights

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

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.

Line spacing example shown highlighting the 125% spacing

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%”.

Example showing kerning space between letter forms
Example showing spacing between words

Alignment

Line endings

Paragraphs

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.

Example showing flush left alignment
Example showing rag right text in a paragraph
Example showing the difference between a paragraph break and a full line space

Character count

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
too short.

50–60 characters per line is best for ease
of reading.
Using the optimal number
of letters in a text column line ensures
good legibility.

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.

Various examples showing different degrees of hanging text alignment

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 ”…”.

Example that shows how text clips off the right edge of the container

Hierarchy

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.

Different sized examples of type from heading to caption

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.

Examples follow

Example of various type colors on color backgrounds
Example of various type colors on color backgrounds
Example of various type colors on color backgrounds
Example of various type colors on color backgrounds
Example of various type colors on color backgrounds
Example of various type colors on color backgrounds
Example of various type colors on color backgrounds
Example of various type colors on color backgrounds
Example of various type colors on color backgrounds
Example of various type colors on color backgrounds

Typography guidelines for UWP apps

For UWP-specific typography recommendations, see Typography guidelines for UWP apps.