Typography

Utility classes for font size, font weight, and text alignment.

Font size

Use fs-* classes to set font size. The scale goes from xs to 4xl.

Class Sample
.fs-xs The quick brown fox
.fs-s The quick brown fox
.fs-m The quick brown fox
.fs-l The quick brown fox
.fs-xl The quick brown fox
.fs-2xl The quick brown fox
.fs-3xl The quick brown fox
.fs-4xl The quick brown fox
Show editor
<table class="v-table">
  <thead>
    <tr>
      <th>Class</th>
      <th>Sample</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>.fs-xs</code></td>
      <td class="fs-xs">The quick brown fox</td>
    </tr>
    <tr>
      <td><code>.fs-s</code></td>
      <td class="fs-s">The quick brown fox</td>
    </tr>
    <tr>
      <td><code>.fs-m</code></td>
      <td class="fs-m">The quick brown fox</td>
    </tr>
    <tr>
      <td><code>.fs-l</code></td>
      <td class="fs-l">The quick brown fox</td>
    </tr>
    <tr>
      <td><code>.fs-xl</code></td>
      <td class="fs-xl">The quick brown fox</td>
    </tr>
    <tr>
      <td><code>.fs-2xl</code></td>
      <td class="fs-2xl">The quick brown fox</td>
    </tr>
    <tr>
      <td><code>.fs-3xl</code></td>
      <td class="fs-3xl">The quick brown fox</td>
    </tr>
    <tr>
      <td><code>.fs-4xl</code></td>
      <td class="fs-4xl">The quick brown fox</td>
    </tr>
  </tbody>
</table>

Font weight

Use fw-regular, fw-medium, and fw-bold to control font weight.

Class Sample
.fw-regular The quick brown fox (400)
.fw-medium The quick brown fox (500)
.fw-bold The quick brown fox (600)
Show editor
<table class="v-table">
  <thead>
    <tr>
      <th>Class</th>
      <th>Sample</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>.fw-regular</code></td>
      <td class="fs-l fw-regular">
        The quick brown fox
        <span class="fs-xs ink-subtle fw-regular">(400)</span>
      </td>
    </tr>
    <tr>
      <td><code>.fw-medium</code></td>
      <td class="fs-l fw-medium">
        The quick brown fox
        <span class="fs-xs ink-subtle fw-regular">(500)</span>
      </td>
    </tr>
    <tr>
      <td><code>.fw-bold</code></td>
      <td class="fs-l fw-bold">
        The quick brown fox
        <span class="fs-xs ink-subtle fw-regular">(600)</span>
      </td>
    </tr>
  </tbody>
</table>

Text alignment

Use ta-left, ta-center, and ta-right to control text alignment.

.ta-left
The quick brown fox jumps over the lazy dog
.ta-center
The quick brown fox jumps over the lazy dog
.ta-right
The quick brown fox jumps over the lazy dog
Show editor
<div class="stack-v gap-2xs">
  <code class="fs-xs ink-subtle">.ta-left</code>
  <div class="ta-left p-s b-all bc-default br-m">
    The quick brown fox jumps over the lazy dog
  </div>
</div>
<div class="stack-v gap-2xs">
  <code class="fs-xs ink-subtle">.ta-center</code>
  <div class="ta-center p-s b-all bc-default br-m">
    The quick brown fox jumps over the lazy dog
  </div>
</div>
<div class="stack-v gap-2xs">
  <code class="fs-xs ink-subtle">.ta-right</code>
  <div class="ta-right p-s b-all bc-default br-m">
    The quick brown fox jumps over the lazy dog
  </div>
</div>