Picchu

Typography

Guidance

Use Segoe UI for 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.

The default color of text on white is #2F2F2F. This is a more natural color in comparison to black, and provides better antialiasing.

Ramp & weight

Example use Default weight Pixel size Line height

Headline

Light 62px 74px

Header

Light 46px 55px

Subheader

Light 34px 41px

Title

Semilight 24px 30px

Subtitle

Regular 20px 25px

Body

Regular 18px 27px

Body alt

Regular 15px 19px

Caption

Regular 13px 18px

Caption alt

Regular 11px 15px

Responsive

The Microsoft.com responsive type ramp scales font-sizes fluidly from desktop to mobile. This is done to optimize the given page real estate as well as maintain relational size hierarchy. All type aligns to responsive behavior by default; to overwrite use .static-typography

At desktop resolutions above 1400px, the responsive type ramp reflects the standard type ramp. Then from 1399px down to 540px the fonts scale fluidly down until they become static again at 539px.

> 1400 1399 - 540 < 539
62 -16 46
46 -12 34
34 -8 26
24 -4 20
20 -2 18
18 -2 16
15 -1 14
13 -1 12
11 -1 10

Alignment & rag

In most cases, it is recommended to left-align visual elements and columns of type. This flush-left and ragged-right approach provides consistent anchoring of the content, optimal readability and a uniform layout.

It's not recommend to justify or right-align type. In some scenarios, centered text would be preferred over left-aligned.

When typography is positioned as flush left and ragged right, try to ensure an even rag and avoid hyphenation.

Casing

Sentence case is recommended for most content. With this approach, the first word is capitalized, as are proper nouns, such as countries, people’s names, and product names. All other words of the sentence, title, headline or label are lowercase.

Treat all-uppercase, all-lowercase, and title-case text as exceptions. These formats generally don’t provide the level of consistency and legibility required for the best customer experience.

Paragraph breaks

Paragraphs should be indicated by a full line break without indentation.

Line length

Ideally it's recommended to maintain 45-90 characters per paragraph line for optimal readability.

Demo

See the Pen Typography demo 1 by Microsoft.com (@microsoft) on CodePen.