Typography
Our approach to the typographic system uses IBM Plex as its typeface. It has been carefully engineered with suitable scales, styles, and weights to help create clear hierarchies and organize information that guides users through IBM products or experiences.
Type tokens and sets
Carbon uses type tokens across two type sets to manage typography. Type tokens are pre-set configurations of typographic elements such as font size, weight, or leading (line height) that are specifically calibrated for use alongside IBM Plex in product. Selecting the appropriate type style is determined by layout or template structure. Layouts may have several levels of architecture or areas that require varying typographic hierarchies.
Productive and expressive type sets
The productive type set is primarily used within product spaces, where users benefit from a more condensed treatment of content to maintain focus on tasks. The productive styles work together to support the hierarchy of information and set user expectations. On the other hand, the larger expressive type styles allow for a more dramatic, graphic use of type in editorial and marketing design. These type styles are excellent for long form reading and scanning, but would be distracting if used in product.
Within Body styles and Utility styles, the same set of styles are
offered. Productive styles are named with a suffix of -01
and expressive style
names have a suffix of -02
.
There are two heading sets and the major difference between them is in how they are implemented in code. The productive type set uses fixed headings. Expressive headings are responsive and the type styles change size at different breakpoints.
For more detail, see Style strategies and Type sets.
Typeface: IBM Plex
Carbon uses the open-source typeface IBM Plex. It has been carefully designed to meet IBM’s needs as a global technology company and reflect IBM’s spirit, beliefs, and design principles. IBM Plex can be accessed and downloaded from the Plex GitHub Repo.
IBM Plex Sans
IBM Plex Serif
IBM Plex Mono
Sans-serif font stack
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
Serif font stack
font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
Mono font stack
font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono','Bitstream Vera Sans Mono', Courier, monospace;