Skip to main contentIBM 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.

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

Base type sizes

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

Style naming conventions

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 and expressive style names have a suffix of -02.

Two heading sets

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 productive type set uses fixed headings. Product pages have a higher density of information housed inside containers for space efficiency, and in these situations fixed type styles are a must.

  • The expressive type set has two fixed headings, for use where smaller headings are needed. The remaining headings are fluid. Web pages need to be able to flex and work at different breakpoints, and the fluid heading styles change size at different breakpoints, and can extrapolate/stretch in between sizes for smooth transitions.

Utility styles

The utility styles are for use 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 and expressive styles have a suffix of -02.

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
Type set: Productive

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
Type set: Expressive

This is a multipurpose type style that can be used for field labels in components, error messages, and captions. It should not be used for body copy.

label-01
Type: IBM Plex Sans
Size: 12px / .75rem
Line height: 16px / 1rem
Weight: 400 / Regular
Letter spacing: .32px
Type set: Productive

This is a multipurpose type style that can be used for field labels in components, error messages, and captions. It should not be used for body copy.

label-02
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 18px / 1.125rem
Weight: 400 / Regular
Letter spacing: .16px
Type set: Expressive

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
Type set: Productive

This is for explanatory helper text that appears below a field title within a component.

helper-text-02
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 18px / 1.125rem
Weight: 400 / Regular
Letter spacing: .16px
Type set: Expressive
legal-01
Type: IBM Plex Sans
Size: 12px / .75rem
Line height: 16px / 1rem
Weight: 400 / Regular
Letter spacing: .32px
Type set: Productive
legal-02
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 18px / 1.125rem
Weight: 400 / Regular
Letter spacing: .16px
Type set: Expressive

Body styles

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

This is for short paragraphs with no more than four lines and is commonly used in components.

body-compact-01
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 18px / 1.125rem
Weight: 400 / Regular
Letter spacing: .16px
Type set: Productive

This is for short paragraphs with no more than four lines. Use in expressive components, such as button and link.

body-compact-02
Type: IBM Plex Sans
Size: 16px / 1rem
Line height: 22px / 1.375rem
Weight: 400 / Regular
Letter spacing: 0px
Type set: Expressive

With a slightly taller line height than body-compact-01, this body style is used in productive layouts for long paragraphs with more than four lines. Use also for longer body copy in components such as accordion or structured list. It is always left-aligned. Body-long-01 can also be used for productive moments within expressive experiences.

body-01
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 20px / 1.25rem
Weight: 400 / Regular
Letter spacing: .16px
Type set: Productive

With a slightly taller line height than body-compact-02, this style is commonly used in expressive layouts for long paragraphs with four lines or more. It is always left-aligned.

body-02
Type: IBM Plex Sans
Size: 16px / 1rem
Line height: 24px / 1.5rem
Weight: 400 / Regular
Letter spacing: 0px
Type set: Expressive

Fixed heading styles

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 and -02 where smaller headings are needed.

This is for component and layout headings. It pairs with $body-compact-01.

heading-compact-01
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 18px / 1.125rem
Weight: 600 / Semi-Bold
Letter spacing: .16px
Type set: Productive

This is for smaller layout headings. It pairs with $body-compact-02.

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

This is for component and layout headings. It pairs with $body-01.

heading-01
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 20px / 1.25rem
Weight: 600 / Semi-Bold
Letter spacing: .16px
Type set: Productive

This is for smaller layout headings. It pairs with $body-02.

heading-02
Type: IBM Plex Sans
Size: 16px / 1rem
Line height: 24px / 1.5rem
Weight: 600 / Semi-Bold
Letter spacing: 0px
Type set: Expressive

This is for component and layout headings.

heading-03
Type: IBM Plex Sans
Size: 20px / 1.25rem
Line height: 28px / 1.75rem
Weight: 400 / Regular
Letter spacing: 0px
Type set: Productive

This is for layout headings.

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

This is for layout headings.

heading-05
Type: IBM Plex Sans
Size: 32px / 2rem
Line height: 40px / 2.5rem
Weight: 300 / Light
Letter spacing: 0px
Type set: Productive

This is for layout headings.

heading-06
Type: IBM Plex Sans
Size: 42px / 2.625rem
Line height: 50px / 3.125rem
Weight: 300 / Light
Letter spacing: 0px
Type set: Productive

This is for layout headings.

heading-07
Type: IBM Plex Sans
Size: 54px / 3.375rem
Line height: 64px / 4rem
Weight: 300 / Light
Letter spacing: 0px
Type set: Productive

Fluid heading styles

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 change size at different breakpoints.

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 Type usage.


Breakpoints
Screen width
3201584

This is for component and layout headings.

fluid-heading-03
Type: IBM Plex Sans
Size: 20px / 1.25rem
Line height: 28px / 1.75rem
Weight: 400 / Regular
Letter spacing: 0px
Type set: Expressive

This is for layout headings.

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

This is for layout headings.

fluid-heading-05
Type: IBM Plex Sans
Size: 42px / 2.625rem
Line height: 50px / 3.125rem
Weight: 300 / Light
Letter spacing: 0px
Type set: Expressive

This is for layout headings.

fluid-heading-06
Type: IBM Plex Sans
Size: 42px / 2.625rem
Line height: 50px / 3.125rem
Weight: 600 / Semi-Bold
Letter spacing: 0px
Type set: Expressive

Fluid display styles

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 Type usage.

Breakpoints
Screen width
3201584

This is for larger paragraphs of type that are usually three or more lines in length.

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

“Quote.”

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

“Quote.”

fluid-quotation-02
Type: IBM Plex Serif
Size: 42px / 2.625rem
Line height: 50px / 3.125rem
Weight: 300 / Light
Letter spacing: 0px
Type set: Expressive

Display

fluid-display-01
Type: IBM Plex Sans
Size: 54px / 3.375rem
Line height: 64px / 4rem
Weight: 300 / Light
Letter spacing: 0px
Type set: Expressive

Display

fluid-display-02
Type: IBM Plex Sans
Size: 54px / 3.375rem
Line height: 64px / 4rem
Weight: 600 / Semi-Bold
Letter spacing: 0px
Type set: Expressive

Display

fluid-display-03
Type: IBM Plex Sans
Size: 60px / 3.75rem
Line height: 70px / 4.375rem
Weight: 300 / Light
Letter spacing: -.64px
Type set: Expressive

Display

fluid-display-04
Type: IBM Plex Sans
Size: 92px / 5.75rem
Line height: 102px / 6.375rem
Weight: 300 / Light
Letter spacing: -.64px
Type set: Expressive

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.

Do use neutral color for text
I'm a magenta sentence for no reason
Do use neutral text color
Color is not for decoration.

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.

Do use text color to differentiate code