Carbon Design System

Typography

Last updated Sep 29, 2026

Carbon’s typography system uses IBM Plex with carefully designed scales, styles, and weights to create hierarchy, organize information, and guide users.

Typography

Usage

The @carbon/type package enables you to use typography from the IBM Design Language, including the type scale and fonts, along with typography design tokens from the Carbon Design System. It also comes with opinionated defaults for type styles on common elements like h1, h2, p, etc.

You can use this package by writing the following:

Type-styles

Unless there are specific exceptions, always use Carbon helpers to style your fonts. This ensures your code stays consistent and maintainable. Avoid directly setting individual CSS properties like font-weight or font-size; instead, rely on Carbon to handle all typography styling.

Type classes

The type-classes mixin will output a collection of utility CSS that you can use to style a given HTML element with type-related styles.

In particular, you can use the following classes:

Class

Description

.cds--type-{font-family}

Set the font-family property for the given font. This can include mono, sans, sans-condensed, sans-arabic, sans-devanagari, sans-hebrew, sans-jp, sans-kr, sans-thai-looped, sans-thai, serif

.cds--type-{font-weight}

Set the font-weight property

.cds--type-italic

Set the font-style property to italic

.cds--type-{token}

Style the HTML element with the given type token

Type styles

Instead of using a type scale, @carbon/type provides tokens that represent what we call type styles. These tokens have a variety of properties for styling how text is rendered on a page.

You can find a full reference of the type styles that are available on the Carbon Design System website .

You can include a type token in your Sass file by using the type-style mixin from the Carbon type package.

Standard type tokens

Standard type tokens apply fixed font sizes that remain constant across all viewport sizes.

Fluid type tokens

Fluid type tokens scale responsively between minimum and maximum font sizes based on the viewport width. The second parameter (true) is required to enable fluid behavior for these tokens.

Reset

An optional type reset is provided under the type.reset() mixin. You can include this mixin by writing the following in your Sass file:

This reset sets some top-level properties on html and body, namely font-size, font-family, and some text-rendering options. We also map the strong tag to the semibold font weight.

Type scale

A type scale is provided through the $type-scale variable and corresponding type-scale function and mixin. However, for specifying type styles, the recommendation is to use type styles .

If you are looking to use the type scale, you can include all the scale-related utilities and variables by writing the following in your Sass file:

You can access a specific step in the type scale by using the type-scale function:

Resources

Carbon type package
GitHub icon
Type package demo
IBM bee icon