Typography (Internationalized)

Component status
Verified
Last releasedOctober 8, 2019
Current version@spectrum-css/typography@2.0.0

Usage notes#


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

Variants#


Typography#
Verified

Typography elements paired to display clear content hierarchies.

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.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum Dolor

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.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum Dolor

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.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum Dolor

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.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum Dolor

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.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="spectrum-Typography">
  <h1 class="spectrum-Heading spectrum-Heading--XXXL">Aliquet Mauris Eu</h1>
  <p class="spectrum-Body spectrum-Body--XXXL">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>
  <p class="spectrum-Body spectrum-Body--XXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <h1 class="spectrum-Heading spectrum-Heading--XXL">Aliquet Mauris Eu</h1>
  <p class="spectrum-Body spectrum-Body--XXL">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>
  <p class="spectrum-Body spectrum-Body--XXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <h1 class="spectrum-Heading spectrum-Heading--XL">Aliquet Mauris Eu</h1>
  <p class="spectrum-Body spectrum-Body--XL">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>
  <p class="spectrum-Body spectrum-Body--XL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <h2 class="spectrum-Heading spectrum-Heading--L">Aliquet Mauris Eu</h1>
  <p class="spectrum-Body spectrum-Body--L">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>
  <p class="spectrum-Body spectrum-Body--L">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <h3 class="spectrum-Heading spectrum-Heading--M">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body spectrum-Body--M">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>
  <p class="spectrum-Body spectrum-Body--M">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <h4 class="spectrum-Heading spectrum-Heading--S">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body spectrum-Body--S">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>
  <p class="spectrum-Body spectrum-Body--S">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <h5 class="spectrum-Heading spectrum-Heading--XS">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body spectrum-Body--XS">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>
  <p class="spectrum-Body spectrum-Body--XS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <h6 class="spectrum-Heading spectrum-Heading--XXS">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body spectrum-Body--XS">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>
  <p class="spectrum-Body spectrum-Body--XS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
Show markup

Heading#
Verified

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חזק.
<div class="spectrum" lang="en">
  <h1 class="spectrum-Heading spectrum-Heading--XXXL">HeadingXXXL <em>HeadingXXXL Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XXL">HeadingXXL <em>HeadingXXL Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XL">HeadingXL <em>HeadingXL Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--L">HeadingL <em>HeadingL Emphasis</em> <strong>Strong</strong>.</h2>
  <h3 class="spectrum-Heading spectrum-Heading--M">HeadingM <em>HeadingM Emphasis</em> <strong>Strong</strong>.</h3>
  <h4 class="spectrum-Heading spectrum-Heading--S">HeadingS <em>HeadingS Emphasis</em> <strong>Strong</strong>.</h4>
  <h5 class="spectrum-Heading spectrum-Heading--XS">HeadingXS <em>HeadingXS Emphasis</em> <strong>Strong</strong>.</h5>
  <h6 class="spectrum-Heading spectrum-Heading--XXS">HeadingXXS <em>HeadingXXS Emphasis</em> <strong>Strong</strong>.</h6>
  <br/>
  <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--serif"> spectrum-Heading--serif</h2>
  <h3 class="spectrum-Heading spectrum-Heading--M spectrum-Heading--serif">HeadingM Serif <em>Emphasis</em> <strong>Strong</strong>.</h3>
  <h4 class="spectrum-Heading spectrum-Heading--S spectrum-Heading--serif">HeadingS Serif <em>Emphasis</em> <strong>Strong</strong>.</h4>
  <h5 class="spectrum-Heading spectrum-Heading--XS spectrum-Heading--serif">HeadingXS Serif <em>Emphasis</em> <strong>Strong</strong>.</h5>
  <h6 class="spectrum-Heading spectrum-Heading--XXS spectrum-Heading--serif">HeadingXXS Serif <em>Emphasis</em> <strong>Strong</strong>.</h6>
</div>

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

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

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

Heading (Heavy)#
Verified

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

<div class="spectrum" lang="en">
  <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--heavy">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--heavy">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--heavy">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
  <br/>
  <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--L 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--XXXL spectrum-Heading--heavy">見出しXXXL <em>見出し XXXL </em> <strong>>見出しXXXL 強い強調</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--heavy">見出しXXL <em>見出し XXL 重点</em> <strong>見出しXXL 強い強調</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--heavy">見出しXL <em>見出しXL  重点</em> <strong>見出しXL強い強調</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
</div>

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

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

Heading (Light)#
Verified

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חזק.

<div class="spectrum" lang="en">
  <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--light">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--light">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--light">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light"> spectrum-Heading--light</h2>
  <br/>
  <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--light spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--L 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--XXXL spectrum-Heading--light">見出しXXXL <em>見出しXXXL 重点</em> <strong>見出しXXXL 強い強調</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--light">見出しXXL <em>見出しXXL 重点</em> <strong>見出しXXL 強い強調</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--light">見出しXL <em>見出しXL 重点</em> <strong>見出しXL 強い強調</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light"> spectrum-Heading--light</h2>
</div>

<div class="spectrum" lang="ar">
  <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--light">XXXLالقسم <em>القسم XXXL  تشديد</em> <strong>XXXLالقسم  تأكيد قو</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--light">XXLالقسم <em>القسم XXL  تشديد</em> <strong>XXLالقسم  تأكيد قو</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--light">XLالقسم <em>القسم XL  تشديد</em> <strong>XLالقسم  تأكيد قو</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--L 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>
Show markup

Body#
Verified

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גוף חזק.

<div class="spectrum" lang="en">
  <p class="spectrum-Body spectrum-Body--XXXL">BodyXXXL Text <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XXL">BodyXXL Text <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XL">BodyXL Text <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--L">BodyL text <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--M">BodyM Text <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--S">BodyS Text <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XS">BodyXS Text <em>BodyXS Emphasis</em> <strong>BodyXS Strong</strong>.</p>
  <br/>
  <p class="spectrum-Body spectrum-Body--XXXL spectrum-Body--serif">BodyXXXL Text Serif <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XXL spectrum-Body--serif">BodyXXL Text Serif <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XL spectrum-Body--serif">BodyXL Text Serif <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--L spectrum-Body--serif">BodyL text Serif <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--M spectrum-Body--serif">BodyM Text Serif <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--S spectrum-Body--serif">BodyS Text Serif <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XS 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--XXXL">見出しXXXL <em>見出しXXXL 重点</em> <strong>見出しXXXL 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XXL">見出しXXL <em>見出しXXL 重点</em> <strong>見出しXXL 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XL">見出しXL <em>見出しXL 重点</em> <strong>見出しXL 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--L">見出しL <em>見出しL 重点</em> <strong>見出しL 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--M">見出しM <em>見出しM 重点</em> <strong>見出しM 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--S">見出しS <em>見出しS 重点</em> <strong>見出しS 強い強調</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XS">見出しXS <em>見出しXS 重点</em> <strong>見出しXS 強い強調</strong>.</p>
</div>

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

<div class="spectrum" lang="he">
  <p class="spectrum-Body spectrum-Body--XXXL">XXXLטקסט גוף הדגשות <em>XXXLגוף חזק</em> <strong>XXXLגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XXL">XXLטקסט גוף הדגשות <em>XXLגוף חזק</em> <strong>XXLגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XL">XLטקסט גוף הדגשות <em>XLגוף חזק</em> <strong>XLגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--L">Lטקסט גוף הדגשות <em>Lגוף חזק</em> <strong>Lגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--M">Mטקסט גוף הדגשות <em>Mגוף חזק</em> <strong>Mגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--S">Sטקסט גוף הדגשות <em>Sגוף חזק</em> <strong>Sגוף חזק</strong>.</p>
  <p class="spectrum-Body spectrum-Body--XS">XSטקסט גוף הדגשות <em>XSגוף חזק</em> <strong>XSגוף חזק</strong>.</p>
</div>
Show markup

Detail#
Verified

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גוף חזק.

<div class="spectrum" lang="en">
  <p class="spectrum-Detail spectrum-Detail--XL">DetailXL <em>DetailXL Emphasis</em> <strong>DetailXL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--L">DetailL <em>DetailL Emphasis</em> <strong>DetailL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--M">DetailL <em>DetailM Emphasis</em> <strong>DetailM Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--S">DetailL <em>DetailS Emphasis</em> <strong>DetailS Strong</strong>.</p>
  <br/>
  <p class="spectrum-Detail spectrum-Detail--XL spectrum-Detail--serif">DetailXL <em>DetailXL Emphasis</em> <strong>DetailXL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--L spectrum-Detail--serif">DetailL <em>DetailL Emphasis</em> <strong>DetailL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--M spectrum-Detail--serif">DetailL <em>DetailM Emphasis</em> <strong>DetailM Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--S 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--XL">見出しXL  <em>見出しXL</em> <strong>見出しXL</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--L">見出しL  <em>見出しL</em> <strong>見出しL</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--M">見出しM  <em>見出しM</em> <strong>見出しM</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--S">見出しS  <em>見出しS</em> <strong>見出しS</strong>.</p>
</div>

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

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

Han#
Verified

Typographic pairings for Adobe Clean Han.

見出しXXXL

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

見出しXXL

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

見出しXL

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

見出しL

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

見出しM

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

見出しS

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

見出しXS

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

見出しXXS

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

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

Typography - Code#
Verified

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
<div class="spectrum" lang="ja">
  <code class="spectrum-Code spectrum-Code--XL">暗号 XL Code <strong>Strong</strong> </code>
  <code class="spectrum-Code spectrum-Code--L">暗号 L Code <strong>Strong</strong> </code>
  <code class="spectrum-Code spectrum-Code--M">暗号 M Code <strong>Strong</strong> </code>
  <code class="spectrum-Code spectrum-Code--S">暗号 S Code <strong>Strong</strong> </code>
  <code class="spectrum-Code spectrum-Code--XS">暗号 XS Code <strong>Strong</strong> </code>
  <pre><code class="spectrum-Code spectrum-Code--M">暗号 M Code Wrapped in:
  pre tags for
  goodness</code></pre>
</div>
Show markup