Skip to main content

Typography

Our typeface is Segoe UI. It offers a clean, light, and open aesthetic that complements the content in the system. We use a minimum of weights and sizes and make sure that our type ramp works in harmony with other design elements. Different sizes of type should be used to create hierarchy. This hierarchy builds a structure which enables users to easily navigate through written communication. All-caps should only be used in calls-to-action, kickers, and badges. We have introduced bold to the mostly light/regular ramp to add visual interest, for legibility on top of imagery, and for content hierarchy. Use bold in scenarios with paired primary and secondary strings (ie: product name and price).

Hierarchy

Different type sizes from our ramp can be used to create hierarchy. This hierarchy builds a structure that enables users to easily navigate through written communication. To ensure a concise hierarchy, we recommend using as few typography classes as possible in a single experience.

Heading 1

Subheading size 1

Paragraph 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna augue, hendrerit lobortis aliquam rutrum, ultricies vel metus. Vestibulum auctor sollicitudin maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend ac tortor nec venenatis. Morbi congue porttitor augue nec semper.


Heading size 2

Subheading size 2

Paragraph 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna augue, hendrerit lobortis aliquam rutrum, ultricies vel metus. Vestibulum auctor sollicitudin maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend ac tortor nec venenatis. Morbi congue porttitor augue nec semper.


Heading size 3

Subheading size 3

Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna augue, hendrerit lobortis aliquam rutrum, ultricies vel metus. Vestibulum auctor sollicitudin maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend ac tortor nec venenatis. Morbi congue porttitor augue nec semper.


Heading size 4

Subheading size 4

Paragraph 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna augue, hendrerit lobortis aliquam rutrum, ultricies vel metus. Vestibulum auctor sollicitudin maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend ac tortor nec venenatis. Morbi congue porttitor augue nec semper.

Bold weight

This new weight is being proposed only for primary display type, particularly cases where it rests on top of imagery, including heroes, and mosaic items.

Visual interest can be created when bold and light display type are combined in specific scenarios with paired primary and secondary strings (e.g. album name and artist, product name and price, etc.).

Bold should not be used for anything less than the primary display type on a given item (e.g. the headline for a news story, a new album name, etc.). This should be a treatment used for display type only – as such, the only sizes able to be bolded are 20/24px (mosaic headlines) and 34/40px (hero headlines).

Bold type can also help in cases where type rests on top of imagery – but the primary focal rule (above) must still be respected.

For all placements on the mosaic (0px gutter) grid, the default type style should be bold (20/24px) for the primary string, with the option to couple with light display type in cases with paired secondary strings of nearly equal priority.

Examples of bold weight used correctly

All caps

The use of all caps typography provides a visually distinct content cue that helps badges and calls to action stand out. By distinguishing these text strings further from others on the page, and by eliminating the irregular shapes created by letter descenders, calls to action appear more actionable and clickable in all caps.

All caps type is used only in two specific cases: badging and calls to action. The primary reason for limiting this treatment is legibility. It is difficult to read more than a few words at a time in all caps, and these two scenarios are very limited in word count.

For badges, strings consist of one or two words inside a solid container. For calls to action, the all caps strings are coupled with a glyph. These glyphs are part of a system that indicates the expected destination to which the user will be taken upon clicking the call to action.

Both use cases are limited to one style to maintain visual consistency. Use 13px Segoe UI Regular with a tracking value of 75.

In international localities where all caps typography is problematic, this style can be replaced by sentence casing.

Example of all caps used correctly