Type specs UI

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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.

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.