Typography (Internationalized, Deprecated)

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

Variants#


Typography#
Deprecated

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.

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.

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-Heading1">Aliquet Mauris Eu</h1>
  <p class="spectrum-Body1">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-Body1">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-Heading2">Aliquet Mauris Eu</h1>
  <p class="spectrum-Body2">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-Body2">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-Heading2">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body2">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-Body2">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-Heading3">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body3">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-Body3">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-Heading4">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body4">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-Body4">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-Heading5">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body5">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-Body5">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-Heading6">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body5">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-Body5">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-Subheading">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body4">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-Body4">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#
Deprecated

Headings for typography.

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

Heading3 Heading3 Emphasis Heading3 Strong.

Heading4 Heading4 Emphasis Heading4 Strong.

Heading5 Heading5 Emphasis Heading5 Strong.

Article Heading1 Emphasis Strong.

Article Heading2 Emphasis Strong.

Article Heading3 Emphasis Strong.

Article Heading4 Emphasis Strong.

Article Heading5 Emphasis Strong.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="spectrum" lang="en">
  <p class="spectrum-Heading1">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
  <p class="spectrum-Heading2">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
  <p class="spectrum-Heading3">Heading3 <em>Heading3 Emphasis</em> <strong>Heading3 Strong</strong>.</p>
  <p class="spectrum-Heading4">Heading4 <em>Heading4 Emphasis</em> <strong>Heading4 Strong</strong>.</p>
  <p class="spectrum-Heading5">Heading5 <em>Heading5 Emphasis</em> <strong>Heading5 Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Heading1">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading3">Article Heading3 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading4">Article Heading4 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading5">Article Heading5 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2">見出し2 <em>見出し2 重点</em> <strong>見出し2 強い強調</strong>.</p>
  <p class="spectrum-Heading3">見出し3 <em>見出し3 重点</em> <strong>見出し3 強い強調</strong>.</p>
  <p class="spectrum-Heading4">見出し4 <em>見出し4 重点</em> <strong>見出し4 強い強調</strong>.</p>
  <p class="spectrum-Heading5">見出し5 <em>見出し5 重点</em> <strong>見出し5 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
  <p class="spectrum-Heading3">القسم 3 <em>القسم 3 تشديد</em> <strong>القسم 3 تأكيد قو</strong>.</p>
  <p class="spectrum-Heading4">القسم 4 <em>القسم 4 تشديد</em> <strong>القسم 4 تأكيد قو</strong>.</p>
  <p class="spectrum-Heading5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
  <p class="spectrum-Heading1">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
  <p class="spectrum-Heading2">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
  <p class="spectrum-Heading3">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
  <p class="spectrum-Heading4">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
  <p class="spectrum-Heading5">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>
Show markup

Heading (Strong)#
Deprecated

Strong headings for typography.

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

Article Heading1 Emphasis Strong.

Article Heading2 Emphasis Strong.

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

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

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

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

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

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

<div class="spectrum" lang="en">
  <p class="spectrum-Heading1--strong">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
  <p class="spectrum-Heading2--strong">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Heading1--strong">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--strong">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1--strong">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2--strong">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1--strong">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2--strong">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
  <p class="spectrum-Heading1--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
  <p class="spectrum-Heading2--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>
Show markup

Heading (Quiet)#
Deprecated

Quiet headings for typography.

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

Article Heading1 Emphasis Strong.

Article Heading2 Emphasis Strong.

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

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

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

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

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

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

<div class="spectrum" lang="en">
  <p class="spectrum-Heading1--quiet">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
  <p class="spectrum-Heading2--quiet">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1--quiet">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2--quiet">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1--quiet">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2--quiet">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
  <p class="spectrum-Heading1--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
  <p class="spectrum-Heading2--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>
Show markup

Display#
Deprecated

Display headings for typography.

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

Article Heading1 Emphasis Strong.

Article Heading2 Emphasis Strong.

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

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

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

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

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

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

<div class="spectrum" lang="en">
  <p class="spectrum-Heading1--display">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--display">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Heading1--display">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--display">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1--display">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2--display">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1--display">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2--display">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
  <p class="spectrum-Heading1--display">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
  <p class="spectrum-Heading2--display">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>
Show markup

Display (Strong)#
Deprecated

Strong display headings for typography.

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

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

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

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

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

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

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

<div class="spectrum" lang="en">
  <p class="spectrum-Heading1--display spectrum-Heading1--strong">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--strong">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1--display spectrum-Heading1--strong">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--strong">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1--display spectrum-Heading1--strong">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--strong">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
  <p class="spectrum-Heading1--display spectrum-Heading1--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>
Show markup

Display (Quiet)#
Deprecated

Quiet display headings for typography.

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

Article Heading1 Emphasis Strong.

Article Heading2 Emphasis Strong.

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

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

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

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

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

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

<div class="spectrum" lang="en">
  <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1--display spectrum-Heading1--quiet">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--quiet">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1--display spectrum-Heading1--quiet">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--quiet">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
  <p class="spectrum-Heading1--display spectrum-Heading1--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>
Show markup

Body#
Deprecated

Default body text sizes.

Body1 Text Body1 Emphasis Body1 Strong.

Body2 text Body2 Emphasis Body2 Strong.

Body3 Text Body3 Emphasis Body3 Strong.

Body4 Text Body4 Emphasis Body4 Strong.

Body5 Text Body5 Emphasis Body5 Strong.

Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

Article Body2 text Article Body2 Emphasis Article Body2 Strong.

Article Body3 Text Article Body3 Emphasis Article Body3 Strong.

Article Body4 Text Article Body4 Emphasis Article Body4 Strong.

Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="spectrum" lang="en">
  <p class="spectrum-Body1">Body1 Text <em>Body1 Emphasis</em> <strong>Body1 Strong</strong>.</p>
  <p class="spectrum-Body2">Body2 text <em>Body2 Emphasis</em> <strong>Body2 Strong</strong>.</p>
  <p class="spectrum-Body3">Body3 Text <em>Body3 Emphasis</em> <strong>Body3 Strong</strong>.</p>
  <p class="spectrum-Body4">Body4 Text <em>Body4 Emphasis</em> <strong>Body4 Strong</strong>.</p>
  <p class="spectrum-Body5">Body5 Text <em>Body5 Emphasis</em> <strong>Body5 Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Body1">Article Body1 Text <em>Article Body1 Emphasis</em> <strong>Article Body1 Strong</strong>.</p>
  <p class="spectrum-Body2">Article Body2 text <em>Article Body2 Emphasis</em> <strong>Article Body2 Strong</strong>.</p>
  <p class="spectrum-Body3">Article Body3 Text <em>Article Body3 Emphasis</em> <strong>Article Body3 Strong</strong>.</p>
  <p class="spectrum-Body4">Article Body4 Text <em>Article Body4 Emphasis</em> <strong>Article Body4 Strong</strong>.</p>
  <p class="spectrum-Body5">Article Body5 Text <em>Article Body5 Emphasis</em> <strong>Article Body5 Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Body1">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Body2">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
  <p class="spectrum-Body3">見出し3 <em>見出し3 重点</em> <strong>見出し3 強い強調</strong>.</p>
  <p class="spectrum-Body4">見出し4 <em>見出し4 重点</em> <strong>見出し4 強い強調</strong>.</p>
  <p class="spectrum-Body5">見出し5 <em>見出し5 重点</em> <strong>見出し5 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Body1">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Body2">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
  <p class="spectrum-Body3">القسم 3 <em>القسم 3 تشديد</em> <strong>القسم 3 تأكيد قو</strong>.</p>
  <p class="spectrum-Body4">القسم 4 <em>القسم 4 تشديد</em> <strong>القسم 4 تأكيد قو</strong>.</p>
  <p class="spectrum-Body5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
  <p class="spectrum-Body1">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
  <p class="spectrum-Body2">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
  <p class="spectrum-Body3">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
  <p class="spectrum-Body4">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
  <p class="spectrum-Body5">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
</div>
Show markup

Han#
Deprecated

Typographic pairings for Adobe Clean Han.

見出し1

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

見出し2

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

見出し13

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

見出し14

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

見出し15

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

<div lang="ja">
  <h1 class="spectrum-Heading1">見出し1</h1>
  <p class="spectrum-Body1">見出しとよく対になる本文。</p>

  <h2 class="spectrum-Heading2">見出し2</h1>
  <p class="spectrum-Body2">見出しとよく対になる本文。</p>

  <h3 class="spectrum-Heading3">見出し13</h1>
  <p class="spectrum-Body3">見出しとよく対になる本文。</p>

  <h4 class="spectrum-Heading4">見出し14</h4>
  <p class="spectrum-Body4">見出しとよく対になる本文。</p>

  <h5 class="spectrum-Heading5">見出し15</h5>
  <p class="spectrum-Body5">見出しとよく対になる本文。</p>
</div>
Show markup

Article#
Deprecated

Typography elements paired to display clear content hierarchies in long form articles.

Heading 1

Body copy that pairs with heading 1

Heading 2

Body copy that pairs with heading 2

Heading 3

Body copy that pairs with heading 3

Heading 4

Body copy that pairs with heading 4

Heading 5

Body copy that pairs with heading 5

<div class="spectrum-Article">
  <h1 class="spectrum-Heading1">Heading 1</h1>
  <p class="spectrum-Body1">Body copy that pairs with heading 1</p>

  <h2 class="spectrum-Heading2">Heading 2</h1>
  <p class="spectrum-Body2">Body copy that pairs with heading 2</p>

  <h3 class="spectrum-Heading3">Heading 3</h1>
  <p class="spectrum-Body3">Body copy that pairs with heading 3</p>

  <h4 class="spectrum-Heading4">Heading 4</h4>
  <p class="spectrum-Body4">Body copy that pairs with heading 4</p>

  <h5 class="spectrum-Heading5">Heading 5</h5>
  <p class="spectrum-Body5">Body copy that pairs with heading 5</p>
</div>
Show markup

Typography - Code#
Deprecated

Typographic styles for computer code.

Code1 Text Strong Code2 Text Strong Code3 Text Strong Code4 Text Strong Code5 Text Strong
Code3 Text Wrapped in:
pre tags for
multiline
goodness
<code class="spectrum-Code1">Code1 Text <strong>Strong</strong></code>
<code class="spectrum-Code2">Code2 Text <strong>Strong</strong></code>
<code class="spectrum-Code3">Code3 Text <strong>Strong</strong></code>
<code class="spectrum-Code4">Code4 Text <strong>Strong</strong></code>
<code class="spectrum-Code5">Code5 Text <strong>Strong</strong></code>
<pre><code class="spectrum-Code3">Code3 Text Wrapped in:
pre tags for
multiline
goodness</code></pre>
Show markup