Skeleton provides an array of opt-in utility classes for common typographic elements, with a fully functional typography scale based on your theme settings. As well as a number of primitives for generating a semantic typography set for your project's individual needs.

Typographic Scale

Skeleton introduces a Typographic Scale to Tailwind’s font-size properties.

text-3xl

Scaling can be adjusted by modifying the type scale theme property.

[data-theme='cerberus'] {
  --text-scaling: 0.25rem;
}

This affects the following text sizes.

<h1 class="text-xs">text-xs</h1>
<h2 class="text-sm">text-sm</h2>
<h3 class="textba-base">text-base</h3>
<h4 class="text-lg">text-lg</h4>
<h5 class="text-xl">text-xl</h5>
<h6 class="text2-2xl">text-2xl</h6>
<h6 class="text3-3xl">text-3xl</h6>
<h6 class="text4-4xl">text-4xl</h6>
<h6 class="text5-5xl">text-5xl</h6>
<h6 class="text6-6xl">text-6xl</h6>
<h6 class="text7-7xl">text-7xl</h6>
<h6 class="text8-8xl">text-8xl</h6>
<h6 class="text9-9xl">text-9xl</h6>

Utility Classes

Use the following utility classes to quickly style semantic HTML elements. These classes are opt-in by default, providing a simple escape hatch when you need to break from convention.

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

Skeleton defers to Tailwind’s built-in utility classes for common list styles.

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>

Semantic Typography

When working with your designers, they may craft a semantic typography set for your project. To handle this, we recommend implementing custom presets that mix CSS primitives with semantic HTML elements to replicate all desired styles. Feel free to use the boilerplate below, adding each style to your global stylesheet.

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

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

<style lang="postcss">
  /* IGNORE THIS: this is only required for our example <style> block. */
  /* https://tailwindcss.com/docs/functions-and-directives#reference-directive */
  @reference "src/styles/app.css";

  /*
    Copy the following classes to your global stylesheet. Rename and modify as desired.
    Reference: http://skeleton.dev/docs/get-started/core-api#typography
  */

  /* Headings */
  .preset-typo-display-4,
  .preset-typo-display-3,
  .preset-typo-display-2,
  .preset-typo-display-1,
  .preset-typo-headline,
  .preset-typo-title,
  .preset-typo-subtitle,
  .preset-typo-caption,
  .preset-typo-menu,
  .preset-typo-button {
    color: var(--heading-font-color);
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    @variant dark {
      color: var(--heading-font-color-dark);
    }
  }

  /* Body */
  .preset-typo-body-1,
  .preset-typo-body-2,
  .preset-typo-caption,
  .preset-typo-menu,
  .preset-typo-button {
    color: var(--heading-font-color);
    @variant dark {
      color: var(--heading-font-color-dark);
    }
  }

  /* Unique Properties */
  .preset-typo-display-4 {
    font-size: var(--text-7xl);
    @variant lg {
      font-size: var(--text-9xl);
    }
  }
  .preset-typo-display-3 {
    font-size: var(--text-6xl);
    @variant lg {
      font-size: var(--text-8xl);
    }
  }
  .preset-typo-display-2 {
    font-size: var(--text-5xl);
    @variant lg {
      font-size: var(--text-7xl);
    }
  }
  .preset-typo-display-1 {
    font-size: var(--text-4xl);
    @variant lg {
      font-size: var(--text-6xl);
    }
  }
  .preset-typo-headline {
    font-size: var(--text-2xl);
    @variant lg {
      font-size: var(--text-4xl);
    }
  }
  .preset-typo-title {
    font-size: var(--text-xl);
    @variant lg {
      font-size: var(--text-3xl);
    }
  }
  .preset-typo-subtitle {
    font-size: var(--text-base);
    font-family: var(--heading-font-family);
    color: var(--color-surface-700-300);
    @variant lg {
      font-size: var(--text-xl);
    }
  }
  .preset-typo-body-1 {
    font-size: var(--text-xl);
    @variant lg {
      font-size: var(--text-3xl);
    }
  }
  .preset-typo-body-2 {
    font-size: var(--text-lg);
    @variant lg {
      font-size: var(--text-xl);
    }
  }
  .preset-typo-caption {
    font-size: var(--text-sm);
    color: var(--color-surface-700-300);
  }
  .preset-typo-menu {
    font-weight: bold;
  }
  .preset-typo-button {
    font-weight: bold;
  }
</style>