Skeleton provides an array of opt-in utility classes for common typographic elements. As well as a number of primitives for extending and generating semantic typography sets. Use theme settings to provide the perfect typographic scale.

Utlity Classes

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<div class="space-y-4">
  <h1 class="h1">Heading 1</h1>
  <h2 class="h2">Heading 2</h2>
  <h3 class="h3">Heading 3</h3>
  <h4 class="h4">Heading 4</h4>
  <h5 class="h5">Heading 5</h5>
  <h6 class="h6">Heading 6</h6>
</div>

Paragraphs

The quick brown fox jumps over the lazy dog

Blockquotes

"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem est unde aspernatur veniam pariatur fuga distinctio esse in quas, repellendus neque reiciendis!"

<blockquote class="blockquote">
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem
  est unde aspernatur veniam pariatur fuga distinctio esse in quas, repellendus neque reiciendis!"
</blockquote>

Anchor

Pre-Formatted

The quick brown fox jumps over the lazy dog.

Code

Insert the .example class here.

Keyboard

Press ⌘ + C to copy.

Insert & Delete

~~~~Always~~ Gonna Give You Up~~ Never Gonna Give You Up

Lists

Unordered

Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

<ul class="list-inside list-disc space-y-2">
  <li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
  <li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

Ordered

Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

<ul class="list-inside list-decimal space-y-2">
  <li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
  <li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

Basic

Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

<ul class="list-inside list-none space-y-2">
  <li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
  <li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

Description

Item A: Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Item B: Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Item C: Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

<dl class="space-y-2">
  <div>
    <dt class="font-bold">Item A</dt>
    <dd class="opacity-60">Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</dd>
  </div>
  <div>
    <dt class="font-bold">Item B</dt>
    <dd class="opacity-60">Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</dd>
  </div>
  <div>
    <dt class="font-bold">Item C</dt>
    <dd class="opacity-60">Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</dd>
  </div>
</dl>

Navigation

<nav>
  <!-- (optional header text here) -->
  <ul class="space-y-2">
    <li>
      <a class="anchor" href="#">Home</a>
    </li>
    <li>
      <a class="anchor" href="#">About</a>
    </li>
    <li>
      <a class="anchor" href="#">Blog</a>
    </li>
  </ul>
</nav>

Primitives

The basic building blocks that Skeleton typography is built upon.

Typographic Scale

Primimtive font sizes based on your theme’s typographic scale, via the --type-scale-factor theme property.

Type Scale 7

<h1 class="type-scale-1">Type Scale 1</h1>
<h2 class="type-scale-2">Type Scale 2</h2>
<h3 class="type-scale-3">Type Scale 3</h3>
<h4 class="type-scale-4">Type Scale 4</h4>
<h5 class="type-scale-5">Type Scale 5</h5>
<h6 class="type-scale-6">Type Scale 6</h6>
<h6 class="type-scale-7">Type Scale 7</h6>
<h6 class="type-scale-8">Type Scale 8</h6>
<h6 class="type-scale-9">Type Scale 9</h6>
<h6 class="type-scale-10">Type Scale 10</h6>
<h6 class="type-scale-11">Type Scale 11</h6>
<h6 class="type-scale-12">Type Scale 12</h6>
<h6 class="type-scale-13">Type Scale 13</h6>

Semantic Typography

Given that typography can differ wildly from project to project, we’ve provided an opinionated boilerplate for generating a set of semantic typography. These classes are constructed using a combination of Skelton and Tailwind primitives. Tap the code view, copy the styles to your global stylesheet, then modify as desired. Use the type-{foo} prefix to help keep things standarized.

Class	Preview
`type-display-4`	Aa
`type-display-3`	Aa
`type-display-2`	Aa
`type-display-1`	Aa
`type-headline`	Headline
`type-title`	Title
`type-subtitle`	Subtitle
`type-body-1`	Body 1
`type-body-2`	Body 2
`type-caption`	Caption
`type-menu`	Menu
`type-button`	Button

<!-- All HTML markup is a suggestion. -->
<div class="table-wrap">
  <table class="table">
    <thead>
      <tr>
        <th>Class</th>
        <th>Preview</th>
      </tr>
    </thead>
    <tbody>
      <!-- type-display-4 -->
      <tr>
        <td><code class="code">type-display-4</code></td>
        <td><h1 class="type-display-4">Aa</h1></td>
      </tr>
      <!-- type-display-3 -->
      <tr>
        <td><code class="code">type-display-3</code></td>
        <td><h2 class="type-display-3">Aa</h2></td>
      </tr>
      <!-- type-display-2 -->
      <tr>
        <td><code class="code">type-display-2</code></td>
        <td><h3 class="type-display-2">Aa</h3></td>
      </tr>
      <!-- type-display-1 -->
      <tr>
        <td><code class="code">type-display-1</code></td>
        <td><h4 class="type-display-1">Aa</h4></td>
      </tr>
      <!-- type-headline -->
      <tr>
        <td><code class="code">type-headline</code></td>
        <td><p class="type-headline">Headline</p></td>
      </tr>
      <!-- type-title -->
      <tr>
        <td><code class="code">type-title</code></td>
        <td><p class="type-title">Title</p></td>
      </tr>
      <!-- type-subtitle -->
      <tr>
        <td><code class="code">type-subtitle</code></td>
        <td><p class="type-subtitle">Subtitle</p></td>
      </tr>
      <!-- type-body-1 -->
      <tr>
        <td><code class="code">type-body-1</code></td>
        <td>
          <p class="type-body-1">Body 1</p>
        </td>
      </tr>
      <!-- type-body-2 -->
      <tr>
        <td><code class="code">type-body-2</code></td>
        <td>
          <p class="type-body-2">Body 2</p>
        </td>
      </tr>
      <!-- type-caption -->
      <tr>
        <td><code class="code">type-caption</code></td>
        <td><span class="type-caption">Caption</span></td>
      </tr>
      <!-- type-menu -->
      <tr>
        <td><code class="code">type-menu</code></td>
        <td><span class="type-menu">Menu</span></td>
      </tr>
      <!-- type-button -->
      <tr>
        <td><code class="code">type-button</code></td>
        <td><span class="type-button">Button</span></td>
      </tr>
    </tbody>
  </table>
</div>

<!--
  Copy the following classes to your global stylesheet. Rename and modify as desired.
  Reference: http://skeleton.dev/docs/get-started/plugin#typography
-->
<style lang="postcss">
  .type-display-4 {
    @apply type-scale-11 md:type-scale-12 lg:type-scale-13;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-display-3 {
    @apply type-scale-10 md:type-scale-11 lg:type-scale-12;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-display-2 {
    @apply type-scale-9 md:type-scale-10 lg:type-scale-11;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-display-1 {
    @apply type-scale-8 md:type-scale-9 lg:type-scale-10;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-headline {
    @apply type-scale-6 md:type-scale-7 lg:type-scale-8;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-title {
    @apply type-scale-5 md:type-scale-6 lg:type-scale-7;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-subtitle {
    @apply type-scale-3 md:type-scale-4 lg:type-scale-5;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family;
    @apply opacity-60;
  }
  /* --- */
  .type-body-1 {
    @apply type-scale-5 md:type-scale-6 lg:type-scale-7;
  }
  .type-body-2 {
    @apply type-scale-4 lg:type-scale-5;
  }
  .type-caption {
    @apply type-scale-2;
    @apply italic opacity-60;
  }
  .type-menu {
    @apply type-scale-3;
    @apply font-bold;
  }
  .type-button {
    @apply type-scale-3;
  }
</style>