Typography

Within Carbon, there are two type sets available for use with productive and expressive moments. The productive type styles were developed for product design, and the expressive, more editorial type styles were developed for IBM.com website pages.

The overarching rule has been to use the productive type styles for product design and the expressive for editorial pages. For the most part, this is still a good guideline to follow. However, there are situations where we can create contrasting moments that better support the user’s intention or task.

Let’s look at the respective design rationales for each experience, and then see where it makes sense to provide a blend.

Carbon Design System started as the design system for Cloud console and provides typography that supports productive use cases.

The key drivers for the use of productive type styles are:

Given these considerations, space efficiency is key. Keeping content condensed is helpful to support focus on complex tasks.

To create productive moments, use the body styles and supporting styles with the 01 suffix, as well as the fixed headings.

To ensure consistent line heights, use the following pairings:

Productive headings are fixed.

Carbon for IBM.com is for the creators of IBM.com and it provides typography that supports expressive use cases.

The key drivers for the use of expressive type styles are:

Given these considerations, larger type sizes and a more editorial approach allows users to scan, read, and navigate multiple pages with comfort and ease.

To create expressive moments, use the body styles and supporting styles with the 02 suffix. There are also two fixed headings, as well as fluid headings that will adjust with different breakpoints.

For the fixed headings, ensure consistent line heights by using the following pairings:

As well as these two fixed headings, there is a set of fluid headings that add a series of scales and fluid behavior.

The spaces we are designing for are no longer neatly divided between productive and expressive. Both product and web pages can be blended with what we call “moments” if the alternative type set better supports the function.

Users working in product pages benefit from an expressive moment for easy reading or a pause. In these cases, however the “moment” would span a full page or banner where there are no containers.

If your users are working in a product but pausing to read or scan for options, an expressive moment can facilitate easy reading and/or create a desired impact or pause. In these cases, however the “moment” would span a full page or banner where there are no containers.

If your users are on the website and reading, but then switch to a focused task within the web experience, using productive styles within that component would facilitate focus.

Here are some of the places the Dotcom team uses productive moments: