Typography

Carbon uses type tokens to manage typography, and these tokens sit within two type sets. The productive and expressive type sets support designers creating for a full range of user needs and activities across product and web pages. To understand when to use styles from each set, see Style strategies.

The productive type set uses a base type size of 14px, while the expressive type set uses a base type size of 16px.

Within Body styles and Supporting styles, the same set of styles are offered, and an easy way to spot which type set they belong to is to look at the suffix. Productive styles are named with a suffix of

-01

-02

There are two heading sets, one for productive and one for expressive. The major difference between them is in how they are implemented in code because of the nature of the pages.

The utility styles are used with productive and expressive moments and include styles for code snippets, labels for captions and helper text, as well as legal copy. Productive styles have a suffix of

-01

-02

There are two body styles for productive and expressive moments. Productive styles have a suffix of

-01

-02

The fixed heading styles are used for product pages where multiple containers are used and space efficiency is key. Fixed means they are not responsive. The type size remains constant regardless of break point.

Creators of web pages also use the fixed headings

-01

-02

The fluid heading styles are primarily used in web pages, and are therefore part of the expressive set of type styles. These headings are responsive and the type styles actually change size incrementally (almost imperceptibly) between the different breakpoints — hence the name “fluid.”

Do not use these styles inside a container. They may be used in product pages where text sits outside of a container, and a blend of expressive and productive type styles is desired for hierarchy and distinction. For more information, see Style strategies.

Note: the slider below shows the type sizes jumping abruptly between breakpoints, which is not a good representation of the actual behavior.

The callout and display styles are part of the expressive set and being fluid, they will adjust at different breakpoints. Do not use these styles inside a container. For guidance about using display styles, see Style strategies.

For IBMers only: If you have any questions about using either of these experiences, reach out to the teams on Slack or sign up to share your work in a review.