Type specs UI

With our new bespoke corporate typeface, IBM Plex™, comes a new set of guidance and best practices. Type Specs helps to set up a start point to apply typography—type scales, styles and alignment on screens.

Resources

Typeface

The IBM Plex™ family comes in sans, serif, condensed and monospaced versions to serve a variety of needs across all experiences. It has been specifically designed to work well in digital environments and small or large scales. It comes in extended Latin and non-Latin scripts. See the Typeface page to learn more.

IBM Plex SansIBM Plex SerifIBM Plex MonoIBM Plex Condensed
<span class="bx--type">IBM Plex Sans</span>
<span class="bx--type-serif">IBM Plex Serif</span>
<span class="bx--type-mono">IBM Plex Mono</span>
<span class="bx--type-condensed">IBM Plex Condensed</span>

Scales

The IBM type scale is built on a single equation. The formula for our scale was created to provide hierarchy for all types of experiences. The formula assumes that y₀=12px:

rempx
0.75Plex 12
0.875Plex 14
1Plex 16
1.125Plex 18
1.25Plex 20
1.5Plex 24
1.75Plex 28
2Plex 32
2.25Plex 36
2.625Plex 42
3Plex 48
3.375Plex 54
3.75Plex 60
4.25Plex 68
4.75Plex 76
5.25Plex 84
5.75Plex 92
Xn = Xn-1 + {INT[(n-2)/4] + 1} * 2
Xn: step n type size Xn-1: step n-1 type size

Style

Typography creates purposeful texture. It guides users to read and understand the hierarchy of information. The right typographic treatment and the controlled usage of type styles helps manage the display of content, keeping it useful, simple and effective.

Weights

We suggest to use IBM Plex Light, Regular, and SemiBold for digital experiences. The semibold weight is ideal for section headers, but should not be used for long text.

SemiboldRegularLight
<span class="bx--type-semibold">Semibold</span>
<span class="bx--type-regular">Regular</span>
<span class="bx--type-light">Light</span>

Italic

Each weight has an Italic style, which should only be used when you need to emphasize certain words in a sentence (titles of works, technical terms, names of devices, captions).

SemiboldRegularLight
<span class="bx--type-semibold bx--type-italic">Semibold</span>
<span class="bx--type-regular bx--type-italic">Regular</span>
<span class="bx--type-light bx--type-italic">Light</span>

Fluid type

To create a better experience along with our fluid grid, fluid type is an option for large display type. We set up our fixed type scales for the breakpoints and have them being fluid in between. This helps us to maintain the quality of typography.

Play

Type set

Even though IBM Plex contains a wide range of scales, it’s important to use a curated type set. For a clear and focused reading experience, consider content needs and how type works across various screen sizes. The IBM type set includes a Productive set designed primarily for product use and an Expressive set which adds a series scales and fluid behavior.

Productive

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 / Italic
Letter-spacing: .32px

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

This is for component and layout headings.

heading-01
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.

heading-02
Type: IBM Plex Sans
Size: 16px / 1rem
Line-height: 22px / 1.375rem
Weight: 600 / Semi-Bold
Letter-spacing: 0px
Expressive
Breakpoints
Screen width
3201584

Heading style

expressive-heading-04
Type: IBM Plex Sans
Size: 28px / 1.75rem
Line-height: 36px / 2.25rem
Weight: 400 / Regular
Letter-spacing: 0px

Heading style

expressive-heading-05
Type: IBM Plex Sans
Size: 42px / 2.625rem
Line-height: 50px / 3.125rem
Weight: 400 / Regular
Letter-spacing: 0px

Paragraph

expressive-paragraph-01
Type: IBM Plex Sans
Size: 28px / 1.75rem
Line-height: 36px / 2.25rem
Weight: 300 / Light
Letter-spacing: 0px

“Quote.”

quotation-01
Type: IBM Plex Serif
Size: 24px / 1.5rem
Line-height: 30px / 1.875rem
Weight: 400 / Regular
Letter-spacing: 0px

“Quote.”

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

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

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

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

Type color

Careful consideration of color maintains quality and recognition for users. Legibility and accessibility are two keys. Keep colored type neutral when in paragraphs. Use primary blue for primary actions.

Core blue colors are used for text links and primary actions.

interactive texts dont

Secondary actions use gray 100 and icons.

Other use cases for colored type are code snippets, warnings, alerts, etc.