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

Typography (internationalized)

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

Internationalized typography examples. Note that, for these examples to work correctly, your Typekit needs to include the appropriate Han fonts.

Variants

Heading
Contribution

Headings for typography.

HeadingXXXL HeadingXXXL Emphasis Strong.

HeadingXXL HeadingXXL Emphasis Strong.

HeadingXL HeadingXL Emphasis Strong.

HeadingL HeadingL Emphasis Strong.

HeadingM HeadingM Emphasis Strong.

HeadingS HeadingS Emphasis Strong.

HeadingXS HeadingXS Emphasis Strong.
HeadingXXS HeadingXXS Emphasis Strong.

HeadingXXXL Serif Emphasis Strong.

HeadingXXL Serif Emphasis Strong.

HeadingXL Serif Emphasis Strong.

spectrum-Heading--serif

HeadingM Serif Emphasis Strong.

HeadingS Serif Emphasis Strong.

HeadingXS Serif Emphasis Strong.
HeadingXXS Serif Emphasis Strong.

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

見出しXL 見出しXL 重点 見出しXL 強い強調.

見出しL 見出しL 重点 見出しL 強い強調.

見出しM 見出しM 重点 見出しM 強い強調.

見出しS 見出しS 重点 見出しS 強い強調.

見出しXS 見出しXS 重点 見出しXS 強い強調.
見出しXXS 見出しXXS 重点 見出しXXS 強い強調.

XXXLالقسم XXXLالقسم تشديد XXXLالقسم تأكيد قو.

XXLالقسم XXLالقسم تشديد XXLالقسم تأكيد قو.

XLالقسم XLالقسم تشديد XLالقسم تأكيد قو.

Lالقسم Lالقسم تشديد Lالقسم تأكيد قو.

Mالقسم Mالقسم تشديد Mالقسم تأكيد قو.

Sالقسم Sالقسم تشديد Sالقسم تأكيد قو.

XSالقسم XSالقسم تشديد XSالقسم تأكيد قو.
XSSالقسم XSSالقسم تشديد XXSالقسم تأكيد قو.

XXXLדגש כותרת XXXLמאמר XXXLחזק.

XXLדגש כותרת XXLמאמר XXLחזק.

XLדגש כותרת XLמאמר XLחזק.

Lדגש כותרת Lמאמר Lחזק.

Mדגש כותרת Mמאמר Mחזק.

Sדגש כותרת Sמאמר Sחזק.

XSדגש כותרת XSמאמר XSחזק.
XXSדגש כותרת XXSמאמר XXSחזק.
Show markup
<div class="spectrum" lang="en">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">HeadingXXXL <em>HeadingXXXL Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">HeadingXXL <em>HeadingXXL Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL">HeadingXL <em>HeadingXL Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL">HeadingL <em>HeadingL Emphasis</em> <strong>Strong</strong>.</h2>
  <h3 class="spectrum-Heading spectrum-Heading--sizeM">HeadingM <em>HeadingM Emphasis</em> <strong>Strong</strong>.</h3>
  <h4 class="spectrum-Heading spectrum-Heading--sizeS">HeadingS <em>HeadingS Emphasis</em> <strong>Strong</strong>.</h4>
  <h5 class="spectrum-Heading spectrum-Heading--sizeXS">HeadingXS <em>HeadingXS Emphasis</em> <strong>Strong</strong>.</h5>
  <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">HeadingXXS <em>HeadingXXS Emphasis</em> <strong>Strong</strong>.</h6>
  <br/>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--serif"> spectrum-Heading--serif</h2>
  <h3 class="spectrum-Heading spectrum-Heading--sizeM spectrum-Heading--serif">HeadingM Serif <em>Emphasis</em> <strong>Strong</strong>.</h3>
  <h4 class="spectrum-Heading spectrum-Heading--sizeS spectrum-Heading--serif">HeadingS Serif <em>Emphasis</em> <strong>Strong</strong>.</h4>
  <h5 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Heading--serif">HeadingXS Serif <em>Emphasis</em> <strong>Strong</strong>.</h5>
  <h6 class="spectrum-Heading spectrum-Heading--sizeXXS spectrum-Heading--serif">HeadingXXS Serif <em>Emphasis</em> <strong>Strong</strong>.</h6>
</div>

<div class="spectrum" lang="ja">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">見出しXXXL <em>見出しXXXL 重点</em> <strong>見出しXXXL 強い強調</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">見出しXXL <em>見出しXXL 重点</em> <strong>見出しXXL 強い強調</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL">見出しXL <em>見出しXL 重点</em> <strong>見出しXL 強い強調</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL">見出しL <em>見出しL 重点</em> <strong>見出しL 強い強調</strong>.</h2>
  <h3 class="spectrum-Heading spectrum-Heading--sizeM">見出しM <em>見出しM 重点</em> <strong>見出しM 強い強調</strong>.</h3>
  <h4 class="spectrum-Heading spectrum-Heading--sizeS">見出しS <em>見出しS 重点</em> <strong>見出しS 強い強調</strong>.</h4>
  <h5 class="spectrum-Heading spectrum-Heading--sizeXS">見出しXS <em>見出しXS 重点</em> <strong>見出しXS 強い強調</strong>.</h5>
  <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">見出しXXS <em>見出しXXS 重点</em> <strong>見出しXXS 強い強調</strong>.</h6>
</div>

<div class="spectrum" lang="ar">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">XXXLالقسم <em>XXXLالقسم  تشديد</em> <strong>XXXLالقسم  تأكيد قو</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">XXLالقسم <em>XXLالقسم  تشديد</em> <strong>XXLالقسم  تأكيد قو</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL">XLالقسم <em>XLالقسم  تشديد</em> <strong>XLالقسم  تأكيد قو</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL">Lالقسم <em>Lالقسم  تشديد</em> <strong>Lالقسم  تأكيد قو</strong>.</h2>
  <h3 class="spectrum-Heading spectrum-Heading--sizeM">Mالقسم <em>Mالقسم  تشديد</em> <strong>Mالقسم  تأكيد قو</strong>.</h3>
  <h4 class="spectrum-Heading spectrum-Heading--sizeS">Sالقسم <em>Sالقسم  تشديد</em> <strong>Sالقسم  تأكيد قو</strong>.</h4>
  <h5 class="spectrum-Heading spectrum-Heading--sizeXS">XSالقسم <em>XSالقسم  تشديد</em> <strong>XSالقسم  تأكيد قو</strong>.</h5>
  <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">XSSالقسم <em>XSSالقسم  تشديد</em> <strong>XXSالقسم  تأكيد قو</strong>.</h6>
</div>

<div class="spectrum" lang="he">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">XXXLדגש כותרת <em>XXXLמאמר</em> <strong>XXXLחזק</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">XXLדגש כותרת <em>XXLמאמר</em> <strong>XXLחזק</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL">XLדגש כותרת <em>XLמאמר</em> <strong>XLחזק</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL">Lדגש כותרת <em>Lמאמר</em> <strong>Lחזק</strong>.</h2>
  <h3 class="spectrum-Heading spectrum-Heading--sizeM">Mדגש כותרת <em>Mמאמר</em> <strong>Mחזק</strong>.</h3>
  <h4 class="spectrum-Heading spectrum-Heading--sizeS">Sדגש כותרת <em>Sמאמר</em> <strong>Sחזק</strong>.</h4>
  <h5 class="spectrum-Heading spectrum-Heading--sizeXS">XSדגש כותרת <em>XSמאמר</em> <strong>XSחזק</strong>.</h5>
  <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">XXSדגש כותרת <em>XXSמאמר</em> <strong>XXSחזק</strong>.</h6>
</div>

Heading (Heavy)
Contribution

Strong headings for typography.

HeadingXXXL Emphasis Strong.

HeadingXXL Emphasis Strong.

HeadingXL Emphasis Strong.

spectrum-Heading--heavy


HeadingXXXL Serif Emphasis Strong.

HeadingXXL Serif Emphasis Strong.

HeadingXL Serif Emphasis Strong.

spectrum-Heading--heavy spectrum-Heading--serif

見出しXXXL 見出し XXXL >見出しXXXL 強い強調.

見出しXXL 見出し XXL 重点 見出しXXL 強い強調.

見出しXL 見出しXL 重点 見出しXL強い強調.

spectrum-Heading--heavy

القسمXXXL القسم XXXL تشديد القسم 2XXXL تأكيد قو.

القسمXXL القسم 1XXL تشديد Emphasis القسم XXL تأكيد قو.

القسمXLالقسم 1XL تشديد القسم XL تأكيد قو.

spectrum-Heading--heavy

XXXLדגש כותרת XXXLמאמר XXXLחזק.

XXLדגש כותרת XXLמאמר XXLחזק.

XLדגש כותרת XLמאמר XLחזק.

spectrum-Heading--heavy

Show markup
<div class="spectrum" lang="en">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
  <br/>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy spectrum-Heading--serif"> spectrum-Heading--heavy spectrum-Heading--serif</h2>
</div>

<div class="spectrum" lang="ja">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy">見出しXXXL <em>見出し XXXL </em> <strong>>見出しXXXL 強い強調</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy">見出しXXL <em>見出し XXL 重点</em> <strong>見出しXXL 強い強調</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy">見出しXL <em>見出しXL  重点</em> <strong>見出しXL強い強調</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
</div>

<div class="spectrum" lang="ar">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy">القسمXXXL <em>القسم XXXL  تشديد</em> <strong>القسم 2XXXL تأكيد قو</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy">القسمXXL <em>القسم 1XXL  تشديد Emphasis</em> <strong>القسم XXL تأكيد قو</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy">القسمXL<em>القسم 1XL  تشديد</em> <strong>القسم XL تأكيد قو</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
</div>

<div class="spectrum" lang="he">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy">XXXLדגש כותרת <em>XXXLמאמר</em> <strong>XXXLחזק</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy">XXLדגש כותרת <em>XXLמאמר</em> <strong>XXLחזק</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy">XLדגש כותרת <em>XLמאמר</em> <strong>XLחזק</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
</div>

Heading (Light)
Contribution

Light headings for typography.

HeadingXXXL Emphasis Strong.

HeadingXXL Emphasis Strong.

HeadingXL Emphasis Strong.

spectrum-Heading--light


HeadingXXXL Serif Emphasis Strong.

HeadingXXL Serif Emphasis Strong.

HeadingXL Serif Emphasis Strong.

spectrum-Heading--light spectrum-Heading--serif

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

見出しXL 見出しXL 重点 見出しXL 強い強調.

spectrum-Heading--light

XXXLالقسم القسم XXXL تشديد XXXLالقسم تأكيد قو.

XXLالقسم القسم XXL تشديد XXLالقسم تأكيد قو.

XLالقسم القسم XL تشديد XLالقسم تأكيد قو.

spectrum-Heading--light

XXXLדגש כותרת XXXLמאמר XXXLחזק.

XXLדגש כותרת XXLמאמר XXLחזק.

XLדגש כותרת XLמאמר XLחזק.

Lדגש כותרת Lמאמר Lחזק.

Show markup
<div class="spectrum" lang="en">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light"> spectrum-Heading--light</h2>
  <br/>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-Heading--serif"> spectrum-Heading--light spectrum-Heading--serif</h2>
</div>

<div class="spectrum" lang="ja">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light">見出しXXXL <em>見出しXXXL 重点</em> <strong>見出しXXXL 強い強調</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light">見出しXXL <em>見出しXXL 重点</em> <strong>見出しXXL 強い強調</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light">見出しXL <em>見出しXL 重点</em> <strong>見出しXL 強い強調</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light"> spectrum-Heading--light</h2>
</div>

<div class="spectrum" lang="ar">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light">XXXLالقسم <em>القسم XXXL  تشديد</em> <strong>XXXLالقسم  تأكيد قو</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light">XXLالقسم <em>القسم XXL  تشديد</em> <strong>XXLالقسم  تأكيد قو</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light">XLالقسم <em>القسم XL  تشديد</em> <strong>XLالقسم  تأكيد قو</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light"> spectrum-Heading--light</h2>
</div>

<div class="spectrum" lang="he">
  <p class="spectrum-Heading spectrum-HeadingXXXL--light">XXXLדגש כותרת <em>XXXLמאמר</em> <strong>XXXLחזק</strong>.</p>
  <p class="spectrum-Heading spectrum-HeadingXXL--light">XXLדגש כותרת <em>XXLמאמר</em> <strong>XXLחזק</strong>.</p>
  <p class="spectrum-Heading spectrum-HeadingXL--light">XLדגש כותרת <em>XLמאמר</em> <strong>XLחזק</strong>.</p>
  <p class="spectrum-Heading spectrum-HeadingL--light">Lדגש כותרת <em>Lמאמר</em> <strong>Lחזק</strong>.</p>
</div>

Body
Contribution

Default body text sizes.

BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

BodyXL Text BodyXL Emphasis BodyXL Strong.

BodyL text BodyL Emphasis BodyL Strong.

BodyM Text BodyM Emphasis BodyM Strong.

BodyS Text BodyS Emphasis BodyS Strong.

BodyXS Text BodyXS Emphasis BodyXS Strong.


BodyXXXL Text Serif BodyXXXL Emphasis BodyXXXL Strong.

BodyXXL Text Serif BodyXXL Emphasis BodyXXL Strong.

BodyXL Text Serif BodyXL Emphasis BodyXL Strong.

BodyL text Serif BodyL Emphasis BodyL Strong.

BodyM Text Serif BodyM Emphasis BodyM Strong.

BodyS Text Serif BodyS Emphasis BodyS Strong.

BodyXS Text Serif BodyXS Emphasis BodyXS Strong.

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

見出しXL 見出しXL 重点 見出しXL 強い強調.

見出しL 見出しL 重点 見出しL 強い強調.

見出しM 見出しM 重点 見出しM 強い強調.

見出しS 見出しS 重点 見出しS 強い強調.

見出しXS 見出しXS 重点 見出しXS 強い強調.

القسم XXXL القسم XXXL تشديد القسم XXXL تأكيد قو.

القسم XXL القسم XXL تشديد القسم XXL تأكيد قو.

القسم XL القسم XL تشديد القسم XL تأكيد قو.

القسم L القسم L تشديد القسم L تأكيد قو.

القسم M القسم M تشديد القسم M تأكيد قو.

القسم S القسم S تشديد القسم S تأكيد قو.

القسم XS القسم XS تشديد القسم XS تأكيد قو.

XXXLטקסט גוף הדגשות XXXLגוף חזק XXXLגוף חזק.

XXLטקסט גוף הדגשות XXLגוף חזק XXLגוף חזק.

XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

Mטקסט גוף הדגשות Mגוף חזק Mגוף חזק.

Sטקסט גוף הדגשות Sגוף חזק Sגוף חזק.

XSטקסט גוף הדגשות XSגוף חזק XSגוף חזק.

Show markup
<div class="spectrum" lang="en">
  <p class="spectrum-Body spectrum-Body--sizeXXXL">BodyXXXL Text <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXXL">BodyXXL Text <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXL">BodyXL Text <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeL">BodyL text <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeM">BodyM Text <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeS">BodyS Text <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXS">BodyXS Text <em>BodyXS Emphasis</em> <strong>BodyXS Strong</strong>.</p>
  <br/>
  <p class="spectrum-Body spectrum-Body--sizeXXXL spectrum-Body--serif">BodyXXXL Text Serif <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXXL spectrum-Body--serif">BodyXXL Text Serif <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXL spectrum-Body--serif">BodyXL Text Serif <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeL spectrum-Body--serif">BodyL text Serif <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeM spectrum-Body--serif">BodyM Text Serif <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeS spectrum-Body--serif">BodyS Text Serif <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXS spectrum-Body--serif">BodyXS Text Serif <em>BodyXS Emphasis</em> <strong>BodyXS Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Body spectrum-Body--sizeXXXL">見出しXXXL <em>見出しXXXL 重点</em> <strong>見出しXXXL 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXXL">見出しXXL <em>見出しXXL 重点</em> <strong>見出しXXL 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXL">見出しXL <em>見出しXL 重点</em> <strong>見出しXL 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeL">見出しL <em>見出しL 重点</em> <strong>見出しL 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeM">見出しM <em>見出しM 重点</em> <strong>見出しM 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeS">見出しS <em>見出しS 重点</em> <strong>見出しS 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXS">見出しXS <em>見出しXS 重点</em> <strong>見出しXS 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Body spectrum-Body--sizeXXXL">القسم XXXL <em>القسم XXXL تشديد</em> <strong>القسم XXXL تأكيد قو</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXXL">القسم XXL <em>القسم XXL تشديد</em> <strong>القسم XXL تأكيد قو</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXL">القسم XL <em>القسم XL تشديد</em> <strong>القسم XL تأكيد قو</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeL">القسم L <em>القسم L تشديد</em> <strong>القسم L تأكيد قو</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeM">القسم M <em>القسم M تشديد</em> <strong>القسم M تأكيد قو</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeS">القسم S <em>القسم S تشديد</em> <strong>القسم S تأكيد قو</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXS">القسم XS <em>القسم XS تشديد</em> <strong>القسم XS تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
  <p class="spectrum-Body spectrum-Body--sizeXXXL">XXXLטקסט גוף הדגשות <em>XXXLגוף חזק</em> <strong>XXXLגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXXL">XXLטקסט גוף הדגשות <em>XXLגוף חזק</em> <strong>XXLגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXL">XLטקסט גוף הדגשות <em>XLגוף חזק</em> <strong>XLגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeL">Lטקסט גוף הדגשות <em>Lגוף חזק</em> <strong>Lגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeM">Mטקסט גוף הדגשות <em>Mגוף חזק</em> <strong>Mגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeS">Sטקסט גוף הדגשות <em>Sגוף חזק</em> <strong>Sגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--sizeXS">XSטקסט גוף הדגשות <em>XSגוף חזק</em> <strong>XSגוף חזק</strong>.</p>
</div>

Detail
Contribution

Subheadings for typography.

DetailXL DetailXL Emphasis DetailXL Strong.

DetailL DetailL Emphasis DetailL Strong.

DetailL DetailM Emphasis DetailM Strong.

DetailL DetailS Emphasis DetailS Strong.


DetailXL DetailXL Emphasis DetailXL Strong.

DetailL DetailL Emphasis DetailL Strong.

DetailL DetailM Emphasis DetailM Strong.

DetailL DetailS Emphasis DetailS Strong.

見出しXL 見出しXL 見出しXL.

見出しL 見出しL 見出しL.

見出しM 見出しM 見出しM.

見出しS 見出しS 見出しS.

القسم XL القسم XL تشديد القسم XL تأكيد قو.

L L تشديد L تأكيد قو.

القسم M القسم M تشديد القسم M تأكيد قو.

القسم S القسم S تشديد القسم S تأكيد قو.

XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

Mالقسم טקסט גוף הדגשות Mגוף חזק Mגוף חזק.

Sالقسم טקסט גוף הדגשות Sגוף חזק Sגוף חזק.

Show markup
<div class="spectrum" lang="en">
  <p class="spectrum-Detail spectrum-Detail--sizeXL">DetailXL <em>DetailXL Emphasis</em> <strong>DetailXL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeL">DetailL <em>DetailL Emphasis</em> <strong>DetailL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeM">DetailL <em>DetailM Emphasis</em> <strong>DetailM Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeS">DetailL <em>DetailS Emphasis</em> <strong>DetailS Strong</strong>.</p>
  <br/>
  <p class="spectrum-Detail spectrum-Detail--sizeXL spectrum-Detail--serif">DetailXL <em>DetailXL Emphasis</em> <strong>DetailXL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeL spectrum-Detail--serif">DetailL <em>DetailL Emphasis</em> <strong>DetailL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeM spectrum-Detail--serif">DetailL <em>DetailM Emphasis</em> <strong>DetailM Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeS spectrum-Detail--serif">DetailL <em>DetailS Emphasis</em> <strong>DetailS Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Detail spectrum-Detail--sizeXL">見出しXL  <em>見出しXL</em> <strong>見出しXL</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeL">見出しL  <em>見出しL</em> <strong>見出しL</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeM">見出しM  <em>見出しM</em> <strong>見出しM</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeS">見出しS  <em>見出しS</em> <strong>見出しS</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Detail spectrum-Detail--sizeXL">القسم XL <em>القسم XL تشديد</em> <strong>القسم XL تأكيد قو</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeL">L <em>L تشديد</em> <strong>L تأكيد قو</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeM">القسم M  <em>القسم M تشديد</em> <strong>القسم M تأكيد قو</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeS">القسم S <em>القسم S تشديد</em> <strong>القسم S تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
  <p class="spectrum-Detail spectrum-Detail--sizeXL">XLטקסט גוף הדגשות <em>XLגוף חזק</em> <strong>XLגוף חזק</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeL">Lטקסט גוף הדגשות <em>Lגוף חזק</em> <strong>Lגוף חזק</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeM">Mالقسم טקסט גוף הדגשות <em>Mגוף חזק</em> <strong>Mגוף חזק</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeS">Sالقسم טקסט גוף הדגשות <em>Sגוף חזק</em> <strong>Sגוף חזק</strong>.</p>
</div>

Han
Contribution

Typographic pairings for Adobe Clean Han.

見出しXXXL

見出しとよく対になる本文。

見出しXXL

見出しとよく対になる本文。

見出しXL

見出しとよく対になる本文。

見出しL

見出しとよく対になる本文。

見出しM

見出しとよく対になる本文。

見出しS

見出しとよく対になる本文。

見出しXS

見出しとよく対になる本文。

見出しXXS

見出しとよく対になる本文。

Show markup
<div class="spectrum" lang="ja">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--serif">見出しXXXL</h4>
  <p class="spectrum-Body spectrum-Body--sizeXXXL spectrum-Body--serif">見出しとよく対になる本文。</p>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--serif">見出しXXL</h4>
  <p class="spectrum-Body spectrum-Body--sizeXXL spectrum-Body--serif">見出しとよく対になる本文。</p>
  <h1 class="spectrum-Heading spectrum-HeadingXL spectrum-Heading--serif">見出しXL</h4>
  <p class="spectrum-Body spectrum-Body--sizeXL spectrum-Body--serif">見出しとよく対になる本文。</p>
  <h2 class="spectrum-Heading spectrum-HeadingL spectrum-Heading--serif">見出しL</h4>
  <p class="spectrum-Body spectrum-Body--sizeL spectrum-Body--serif">見出しとよく対になる本文。</p>
  <h3 class="spectrum-Heading spectrum-HeadingM spectrum-Heading--serif">見出しM</h4>
  <p class="spectrum-Body spectrum-Body--sizeM spectrum-Body--serif">見出しとよく対になる本文。</p>
  <h4 class="spectrum-Heading spectrum-HeadingS spectrum-Heading--serif">見出しS</h4>
  <p class="spectrum-Body spectrum-Body--sizeS spectrum-Body--serif">見出しとよく対になる本文。</p>
  <h5 class="spectrum-Heading spectrum-HeadingXS spectrum-Heading--serif">見出しXS</h4>
  <p class="spectrum-Body spectrum-Body--sizeXS spectrum-Body--serif">見出しとよく対になる本文。</p>
  <h5 class="spectrum-Heading spectrum-HeadingXXS spectrum-Heading--serif">見出しXXS</h4>
  <p class="spectrum-Body spectrum-Body--sizeXS spectrum-Body--serif">見出しとよく対になる本文。</p>
</div>

Typography - Code
Contribution

Typographic styles for computer code.

暗号 XL Code Strong 暗号 L Code Strong 暗号 M Code Strong 暗号 S Code Strong 暗号 XS Code Strong 
暗号 M Code Wrapped in:
  pre tags for
  goodness
Show markup
<div class="spectrum" lang="ja">
  <code class="spectrum-Code spectrum-Code--sizeXL">暗号 XL Code <strong>Strong</strong> </code>
  <code class="spectrum-Code spectrum-Code--sizeL">暗号 L Code <strong>Strong</strong> </code>
  <code class="spectrum-Code spectrum-Code--sizeM">暗号 M Code <strong>Strong</strong> </code>
  <code class="spectrum-Code spectrum-Code--sizeS">暗号 S Code <strong>Strong</strong> </code>
  <code class="spectrum-Code spectrum-Code--sizeXS">暗号 XS Code <strong>Strong</strong> </code>
  <pre><code class="spectrum-Code spectrum-Code--sizeM">暗号 M Code Wrapped in:
  pre tags for
  goodness</code></pre>
</div>