Typography
<p class="tng-text-body">…</p>Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
The default ordinal is 6. Use ordinals 1 through 8 to match typography tokens directly.
<p class="tng-text-body is-1">…</p><p class="tng-text-body is-2">…</p><p class="tng-text-body is-3">…</p><p class="tng-text-body is-4">…</p><p class="tng-text-body is-5">…</p><p class="tng-text-body is-6">…</p><p class="tng-text-body is-7">…</p><p class="tng-text-body is-8">…</p>Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Emphasis
Section titled “Emphasis”Use is-emphasis for any size to increase its font weight.
<p class="tng-text-body">…</p><p class="tng-text-body is-emphasis">…</p>Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Use is-heavy for bodies 6 through 8 to increase font weight even further.
<p class="tng-text-body is-6">…</p><p class="tng-text-body is-6 is-heavy">…</p><p class="tng-text-body is-7">…</p><p class="tng-text-body is-7 is-heavy">…</p><p class="tng-text-body is-8">…</p><p class="tng-text-body is-8 is-heavy">…</p>Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Supports responsive sizing for titles on mobile, tablet, and desktop breakpoints.
Inferred Sizes
Section titled “Inferred Sizes”Omit size modifier to match the size to the HTML heading level.
<h1 class="tng-text-title">Title 1</h1><h2 class="tng-text-title">Title 2</h2><h3 class="tng-text-title">Title 3</h3><h4 class="tng-text-title">Title 4</h4><h5 class="tng-text-title">Title 5</h5><h6 class="tng-text-title">Title 6</h6>Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Explicit Sizes
Section titled “Explicit Sizes”Use ordinals 1 through 10 to match typography tokens directly.
<p class="tng-text-title is-1">Title 1</p><p class="tng-text-title is-2">Title 2</p><p class="tng-text-title is-3">Title 3</p><p class="tng-text-title is-4">Title 4</p><p class="tng-text-title is-5">Title 5</p><p class="tng-text-title is-6">Title 6</p><p class="tng-text-title is-7">Title 7</p><p class="tng-text-title is-8">Title 8</p><p class="tng-text-title is-9">Title 9</p><p class="tng-text-title is-10">Title 10</p>Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Title 7
Title 8
Title 9
Title 10
Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Title 7
Title 8
Title 9
Title 10
Emphasis
Section titled “Emphasis”Use is-emphasis for titles 6 through 10 to increase font weight.
<p class="tng-text-title is-6">Title 6</p><p class="tng-text-title is-6 is-emphasis">Title 6 Emphasis</p><p class="tng-text-title is-7">Title 7</p><p class="tng-text-title is-7 is-emphasis">Title 7 Emphasis</p><p class="tng-text-title is-8">Title 8</p><p class="tng-text-title is-8 is-emphasis">Title 8 Emphasis</p><p class="tng-text-title is-9">Title 9</p><p class="tng-text-title is-9 is-emphasis">Title 9 Emphasis</p><p class="tng-text-title is-10">Title 10</p><p class="tng-text-title is-10 is-emphasis">Title 10 Emphasis</p>Title 6
Title 6 Emphasis
Title 7
Title 7 Emphasis
Title 8
Title 8 Emphasis
Title 9
Title 9 Emphasis
Title 10
Title 10 Emphasis
Title 6
Title 6 Emphasis
Title 7
Title 7 Emphasis
Title 8
Title 8 Emphasis
Title 9
Title 9 Emphasis
Title 10
Title 10 Emphasis