IBM Design Language – Type specs UI

Our bespoke corporate typeface, IBM Plex®, brings its own set of guidance and best practices. Type specs help to set a starting point to apply typography—type scales, styles and alignment on screens.

Typeface
Scales
Style
Fluid type
Type set
Type color

Resources

IBM Plex® latest typeface release

IBM Design Language library

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.

rem	px
0.75	Plex 12
0.875	Plex 14
1	Plex 16
1.125	Plex 18
1.25	Plex 20
1.5	Plex 24
1.75	Plex 28
2	Plex 32
2.25	Plex 36
2.625	Plex 42
3	Plex 48
3.375	Plex 54
3.75	Plex 60
4.25	Plex 68
4.75	Plex 76
5.25	Plex 84
5.75	Plex 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 use of 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

320

1584

1056

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.

Secondary actions use gray 100 and icons.

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

Edit this page on GitHub

Typography: Type basics

Color