Carbon Design System

Color

Heading text color is inherited from Carbon’s theme tokens:

Element	Property	Token
Text	color	$text-primary

For more on color usage, see Typography overview.

The Heading component renders semantic HTML elements (h1-h6) with default browser styling. Apply Carbon type tokens via

className

for visual styling independent of semantic level.

For detailed information on type tokens and their usage, see Type sets.

To use type token classes like

cds--type-heading-05

, ensure you’ve included the Carbon type styles in your SCSS:

@use '@carbon/type';
@include type.type-classes();
Copy to clipboard

Then apply the class to your Heading component:

<Heading className="cds--type-heading-05">
  Visually styled as heading-05
</Heading>
Copy to clipboard

Learn more about applying type tokens in Type sets.

Fixed sizes for product interfaces:

Token	Size (px/rem)	Weight	Line-height (px/rem)
heading-01	14 / 0.875	SemiBold / 600	18 / 1.125
heading-02	16 / 1	SemiBold / 600	22 / 1.375
heading-03	20 / 1.25	Regular / 400	28 / 1.75
heading-04	28 / 1.75	Regular / 400	36 / 2.25
heading-05	32 / 2	Regular / 400	40 / 2.5
heading-06	42 / 2.625	Light / 300	50 / 3.125
heading-07	54 / 3.375	Light / 300	64 / 4

Fluid sizes for responsive layouts:

Token	Min (px/rem)	Max (px/rem)	Weight
fluid-heading-03	20 / 1.25	24 / 1.5	Regular / 400
fluid-heading-04	28 / 1.75	32 / 2	Regular / 400
fluid-heading-05	32 / 2	40 / 2.5	Regular / 400
fluid-heading-06	42 / 2.625	54 / 3.375	Light / 300

For more on typography layout and spacing, see Type basics.