Typography
Type is a core part of any offering and critical to how brands express and communicate throughout any experience. Use the Carbon type package to leverage IBM Plex and create effective typography across your products more easily.
Get started
To install @carbon/type in your project, you will need to run the following
command using npm:
npm install -S @carbon/type
If you prefer Yarn, use the following command instead:
yarn add @carbon/type
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:
@use '@carbon/type';// Include type reset@include type.reset();// Include default type styles, targets h1, h2, h3, etc@include type.default-type();// Include utility classes for type-related properties@include type.type-classes();
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.
@mixin type-classes;
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 token in your Sass file by writing:
@use '@carbon/type';@include type.type-style('productive-heading-01');
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 |
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:
@use '@carbon/type';@include type.reset();
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:
@use '@carbon/type';
You can access a specific step in the type scale by using the type-scale
function:
@use '@carbon/type';.my-selector {font-size: type.type-scale(1);}