• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Typography

Component status
Contribution
Current version@spectrum-css/typography@5.1.5
ReleasedMarch 7, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

Spectrum Typography is broken out into several separate components.

In addition, the previous deprecated Typogaphy implementations (legacy, depreacted) are still shipped, but their usage is discouraged.

Components

Body
Contribution

Body is primarily used for Spectrum components and for blocks of text.

View the Body typography component

Spectrum is based on real-world situations.

<p class="spectrum-Body spectrum-Body--sizeM">Spectrum is based on real-world situations.</p>

Detail
Contribution

Detail is used for disclosing extra information or smaller items in hierarchical relationships of text.

View the Detail typography component

Our recommendations

<p class="spectrum-Detail spectrum-Detail--sizeXL">Our recommendations</p>

Code
Contribution

Code is used for text that represents code.

View the Code typography component

alert("Hello world"); 
<code class="spectrum-Code spectrum-Code--sizeS">alert("Hello world");</code>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Applying margins

By default, Typography components do not include outer margins. If you would like to add margins, simply add the .spectrum-Typography class to your container, and every typography component inside of your container will have the correct margins.

Aliquet Mauris Eu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Show markup
<div class="spectrum-Typography">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL">Aliquet Mauris Eu</h1>
  <p class="spectrum-Body spectrum-Body--sizeXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
</div>

Migrating from deprecated Typography

See the table below to reference what will need to change when migrating to the new Typography API. Cells with a dash indicate the typography style did not exist in the previous API.

Note that all instances of typography now require the component class in addition to the modifier class. For example, to get a large Heading, you will need the .spectrum-Heading--sizeL modifier class as well as the .spectrum-Heading component class.

Heading

Deprecated Classname New Classname
.spectrum-Heading1--display .spectrum-Heading.spectrum-Heading--sizeXXXL
.spectrum-Heading1--display.spectrum-Heading1--quiet .spectrum-Heading.spectrum-Heading--sizeXXXL.spectrum-Heading--light
.spectrum-Heading1--display.spectrum-Heading1--strong .spectrum-Heading.spectrum-Heading--sizeXXXL.spectrum-Heading--heavy
.spectrum-Heading2--display .spectrum-Heading.spectrum-Heading--sizeXXL
.spectrum-Heading2--display.spectrum-Heading2--quiet .spectrum-Heading.spectrum-Heading--sizeXXL.spectrum-Heading--light
.spectrum-Heading2--display.spectrum-Heading2--strong .spectrum-Heading.spectrum-Heading--sizeXXL.spectrum-Heading--heavy
.spectrum-Heading1 .spectrum-Heading.spectrum-Heading--sizeXL
.spectrum-Heading1--quiet .spectrum-Heading.spectrum-Heading--sizeXL.spectrum-Heading--light
.spectrum-Heading1--strong .spectrum-Heading.spectrum-Heading--sizeXL.spectrum-Heading--heavy
.spectrum-Heading2 .spectrum-Heading.spectrum-Heading--sizeL
.spectrum-Heading1--quiet .spectrum-Heading.spectrum-Heading--sizeL.spectrum-Heading--light
.spectrum-Heading2--strong .spectrum-Heading.spectrum-Heading--sizeL.spectrum-Heading--heavy
.spectrum-Heading3 .spectrum-Heading.spectrum-Heading--sizeM
.spectrum-Heading4 .spectrum-Heading.spectrum-Heading--sizeS
.spectrum-Heading5 .spectrum-Heading.spectrum-Heading--sizeXS
.spectrum-Heading6 .spectrum-Heading.spectrum-Heading--sizeXXS

Body

Deprecated Classname New Classname
- .spectrum-Body.spectrum-Body--sizeXXXL
- .spectrum-Body.spectrum-Body--sizeXXL
.spectrum-Body1 .spectrum-Body.spectrum-Body--sizeXL
.spectrum-Body2 .spectrum-Body.spectrum-Body--sizeL
.spectrum-Body3 .spectrum-Body.spectrum-Body--sizeM
.spectrum-Body4 .spectrum-Body.spectrum-Body--sizeS
.spectrum-Body5 .spectrum-Body.spectrum-Body--sizeXS

Detail

Deprecated Classname New Classname
- .spectrum-Detail--sizeXL
- .spectrum-Detail--sizeXL.spectrum-Detail--light
- .spectrum-Detail--sizeL
- .spectrum-Detail--sizeL.spectrum-Detail--light
- .spectrum-Detail--sizeM
- .spectrum-Detail--sizeM.spectrum-Detail--light
.spectrum-Subheading .spectrum-Detail--sizeS
.spectrum-Detail .spectrum-Detail--sizeS.spectrum-Detail--light

Code

Deprecated Classname New Classname
.spectrum-Code-1 .spectrum-Code--sizeXL
.spectrum-Code-2 .spectrum-Code--sizeL
.spectrum-Code-3 .spectrum-Code--sizeM
.spectrum-Code-4 .spectrum-Code--sizeS
.spectrum-Code-5 .spectrum-Code--sizeXS

Updating sizing syntax

To be more consistent with other t-shirt sizing syntax, the Typography components now use the word size in the class name syntax.

Heading

Deprecated Classname New Classname
.spectrum-Heading.spectrum-Heading--XXXL .spectrum-Heading.spectrum-Heading--sizeXXXL
.spectrum-Heading.spectrum-Heading--XXL .spectrum-Heading.spectrum-Heading--sizeXXL
.spectrum-Heading.spectrum-Heading--XL .spectrum-Heading.spectrum-Heading--sizeXL
.spectrum-Heading.spectrum-Heading--L .spectrum-Heading.spectrum-Heading--sizeL
.spectrum-Heading.spectrum-Heading--M .spectrum-Heading.spectrum-Heading--sizeM
.spectrum-Heading.spectrum-Heading--S .spectrum-Heading.spectrum-Heading--sizeS
.spectrum-Heading.spectrum-Heading--XS .spectrum-Heading.spectrum-Heading--sizeXS
.spectrum-Heading.spectrum-Heading--XXS .spectrum-Heading.spectrum-Heading--sizeXXS

Body

Deprecated Classname New Classname
.spectrum-Body.spectrum-Body--XXXL .spectrum-Body.spectrum-Body--sizeXXXL
.spectrum-Body.spectrum-Body--XXL .spectrum-Body.spectrum-Body--sizeXXL
.spectrum-Body.spectrum-Body--XL .spectrum-Body.spectrum-Body--sizeXL
.spectrum-Body.spectrum-Body--L .spectrum-Body.spectrum-Body--sizeL
.spectrum-Body.spectrum-Body--M .spectrum-Body.spectrum-Body--sizeM
.spectrum-Body.spectrum-Body--S .spectrum-Body.spectrum-Body--sizeS
.spectrum-Body.spectrum-Body--XS .spectrum-Body.spectrum-Body--sizeXS
.spectrum-Body.spectrum-Body--XXS .spectrum-Body.spectrum-Body--sizeXXS

Detail

Deprecated Classname New Classname
.spectrum-Detail.spectrum-Detail--XL .spectrum-Detail.spectrum-Detail--sizeXL
.spectrum-Detail.spectrum-Detail--L .spectrum-Detail.spectrum-Detail--sizeL
.spectrum-Detail.spectrum-Detail--M .spectrum-Detail.spectrum-Detail--sizeM
.spectrum-Detail.spectrum-Detail--S .spectrum-Detail.spectrum-Detail--sizeS

Code

Deprecated Classname New Classname
.spectrum-Detail.spectrum-Code--XL .spectrum-Detail.spectrum-Code--sizeXL
.spectrum-Detail.spectrum-Code--L .spectrum-Detail.spectrum-Code--sizeL
.spectrum-Detail.spectrum-Code--M .spectrum-Detail.spectrum-Code--sizeM
.spectrum-Detail.spectrum-Code--S .spectrum-Detail.spectrum-Code--sizeS
.spectrum-Detail.spectrum-Code--XS .spectrum-Detail.spectrum-Code--sizeXS