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


Light 62px 74px


Light 46px 55px


Light 34px 41px


Semilight 24px 30px


Regular 20px 25px


Regular 18px 27px

Body alt

Regular 15px 19px


Regular 13px 18px

Caption alt

Regular 11px 15px


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.


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.


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