@gitlab/ui/src/scss/typescale/typeface_demo.html

GitLab UI Components

<table>
  <thead>
    <tr>
      <th class="gl-pb-5 gl-pr-10">
        <h4>Primary typeface</h4>
        <h1>GitLab Sans</h1>
      </th>
      <th class="gl-pb-5 monospace">
        <h4>Monospaced typeface</h4>
        <h1>GitLab Mono</h1>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="gl-pb-5 gl-pr-10">
        <p class="sm">
          UI Small Paragraph • 0.75rem (12px)<br />
          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
          abcdefghijklmnopqrstuvwxyz<br />
          1234567890
        </p>
      </td>
      <td class="gl-pb-5">
        <p class="monospace sm">
          UI Small Monospace • 0.75rem (12px)<br />
          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
          abcdefghijklmnopqrstuvwxyz<br />
          1234567890
        </p>
      </td>
    </tr>
    <tr>
      <td class="gl-pb-5 gl-pr-10">
        <p>
          UI Paragraph • 0.875rem (14px)<br />
          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
          abcdefghijklmnopqrstuvwxyz<br />
          1234567890
        </p>
      </td>
      <td class="gl-pb-5">
        <p class="monospace">
          UI Monospace • 0.875rem (14px)<br />
          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
          abcdefghijklmnopqrstuvwxyz<br />
          1234567890
        </p>
      </td>
    </tr>
    <tr>
      <td class="gl-pb-5 gl-pr-10">
        <p class="lg">
          UI Large Paragraph • 1rem (16px)<br />
          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
          abcdefghijklmnopqrstuvwxyz<br />
          1234567890
        </p>
      </td>
      <td class="gl-pb-5">
        <p class="monospace lg">
          UI Large Monospace • 1rem (16px)<br />
          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
          abcdefghijklmnopqrstuvwxyz<br />
          1234567890
        </p>
      </td>
    </tr>
  </tbody>
</table>