Expressive type is reserved for use in editorial and digital marketing experiences which may require more dynamic typographic hierarchies and more variety in the Heading scale. The Expressive styles are curated to create a series of clear user expectations while still allowing for a more dramatic, graphic use of type.
The Expressive styles below introduce the new IBM Design Language tokens. The difference between the Productive and Expressive styles is mainly evident in the Headings. Aside from the token names, which are specifically calibrated for product vs. editorial designers (e.g. $label-01 vs. $caption-01) — the supporting and body styles have the same values in both the Productive and Expressive sets.
supporting style
This is for inline code snippets and smaller code elements.
code-01
Type: IBM Plex Mono
Size: 12px / .75rem
Line-height: 16px / 1rem
Weight: 400 / Regular
Letter-spacing: .32px
This is for large code snippets and larger code elements.
code-02
Type: IBM Plex Mono
Size: 14px / .875rem
Line-height: 20px / 1.25rem
Weight: 400 / Regular
Letter-spacing: .32px
This is for captions or legal content in a layout — not for body copy.
caption-01
Type: IBM Plex Sans
Size: 12px / .75rem
Line-height: 16px / 1rem
Weight: 400 / Regular
Letter-spacing: .32px
This is for explanatory helper text that appears below a field title within a component.
helper-text-01
Type: IBM Plex Sans
Size: 12px / .75rem
Line-height: 16px / 1rem
Weight: 400 / Regular
Letter-spacing: .32px
body
This is for short paragraphs with no more than four lines and is commonly used in components.
body-short-01
Type: IBM Plex Sans
Size: 14px / .875rem
Line-height: 18px / 1.125rem
Weight: 400 / Regular
Letter-spacing: .16px
This is commonly used in both the expressive and the productive type theme layouts for long paragraphs with more than four lines. It is a good size for comfortable, long-form reading. Use this for longer body copy in components such as accordion or structured list. Always left-align this type; never center it.
body-long-01
Type: IBM Plex Sans
Size: 14px / .875rem
Line-height: 20px / 1.25rem
Weight: 400 / Regular
Letter-spacing: .16px
This is for short paragraphs with no more than four lines and is commonly used in the expressive type theme for layouts.
body-short-02
Type: IBM Plex Sans
Size: 16px / 1rem
Line-height: 22px / 1.375rem
Weight: 400 / Regular
Letter-spacing: 0px
This is commonly used in the expressive type theme layouts for long paragraphs with more than four lines. The looser line height and larger size makes for comfortable, long-form reading, in mediums that allow for more space. This size type is rarely used for body copy in components. Always left-align type; never center it.
body-long-02
Type: IBM Plex Sans
Size: 16px / 1rem
Line-height: 24px / 1.5rem
Weight: 400 / Regular
Letter-spacing: 0px
Fluid type is applied to large headline and display type styles. We set up fixed type scales at the breakpoints and are fluid in between. This helps us to maintain the quality of typography. Display styles are reserved only for graphic/visual elements. These should be used sparingly and thoughtfully within a user journey. It is not suitable for complex messaging, does not need to appear on every page.
headings
This is for component and layout headings.
expressive-heading-01 (fixed)
Type: IBM Plex Sans
Size: 14px / .875rem
Line-height: 18px / 1.125rem
Weight: 600 / Semi-Bold
Letter-spacing: .16px
This is for component and layout headings.
expressive-heading-02 (fixed)
Type: IBM Plex Sans
Size: 16px / 1rem
Line-height: 22px / 1.375rem
Weight: 600 / Semi-Bold
Letter-spacing: 0px
This is for component and layout headings.
expressive-heading-03
Type: IBM Plex Sans
Size: 20px / 1.25rem
Line-height: 26px / 1.625rem
Weight: 400 / Regular
Letter-spacing: 0px
expressive-heading-04
Type: IBM Plex Sans
Size: 28px / 1.75rem
Line-height: 36px / 2.25rem
Weight: 400 / Regular
Letter-spacing: 0px
expressive-heading-05
Type: IBM Plex Sans
Size: 42px / 2.625rem
Line-height: 50px / 3.125rem
Weight: 300 / Light
Letter-spacing: 0px
expressive-heading-06
Type: IBM Plex Sans
Size: 42px / 2.625rem
Line-height: 50px / 3.125rem
Weight: 600 / Semi-Bold
Letter-spacing: 0px
paragraphs and quotes
expressive-paragraph-01
Type: IBM Plex Sans
Size: 28px / 1.75rem
Line-height: 36px / 2.25rem
Weight: 300 / Light
Letter-spacing: 0px
quotation-01
Type: IBM Plex Serif
Size: 24px / 1.5rem
Line-height: 30px / 1.875rem
Weight: 400 / Regular
Letter-spacing: 0px
quotation-02
Type: IBM Plex Serif
Size: 42px / 2.625rem
Line-height: 50px / 3.125rem
Weight: 300 / Light
Letter-spacing: 0px
display
display-01
Type: IBM Plex Sans
Size: 54px / 3.375rem
Line-height: 64px / 4rem
Weight: 300 / Light
Letter-spacing: 0px
warning: Never use this style as the main headline
display-02
Type: IBM Plex Sans
Size: 54px / 3.375rem
Line-height: 64px / 4rem
Weight: 600 / Semi-Bold
Letter-spacing: 0px
warning: Never use this style as the main headline
display-03
Type: IBM Plex Sans
Size: 92px / 5.75rem
Line-height: 102px / 6.375rem
Weight: 300 / Light
Letter-spacing: -.64px
warning: Never use this style as the main headline
display-04
Type: IBM Plex Sans
Size: 92px / 5.75rem
Line-height: 102px / 6.375rem
Weight: 600 / Semi-Bold
Letter-spacing: -.64px
warning: Never use this style as the main headline