shadcn-html / typography

Built with: CSS

Typography

Styles for headings, paragraphs, lists, blockquotes, and inline code. Built on native HTML text elements with utility classes. No JavaScript required.

Component Skill — components/typography/component-skill.md

Native basis

Native HTML text elements: <h1>–<h4>, <p>, <blockquote>, <code>, <small>.

Web Platform APIs

<h1>–<h6> <blockquote> <code> <small> text-wrap: balance text-wrap: pretty hanging-punctuation Logical properties prefers-contrast forced-colors

Classes

.h1 .h2 .h3 .h4 .p .lead .large .small .muted .blockquote .code

Accessibility

• Use heading levels in order (h1 → h2 → h3). Do not skip levels.

• Headings create the document outline used by screen readers for navigation.

• <blockquote> is announced as a quote by assistive technology — no extra ARIA needed.

• <code> is announced as code — no extra ARIA needed.

• prefers-contrast: more — removes tight letter-spacing, adds outline to inline code, thickens blockquote border, promotes muted text to foreground color.

• forced-colors: active — blockquote border and inline code adapt to system colors.

Notes

• These are utility classes for prose content — not a component with variants/sizes.

• The .h1–.h4 classes allow applying heading styles to non-heading elements when semantic headings aren't appropriate.

• Typography classes compose freely with other components (Card content, Dialog body, Alert description).

• text-wrap: balance is used on all headings (h1–h4) for better visual line distribution.

• text-wrap: pretty is used on paragraphs and lead text for orphan prevention.

• hanging-punctuation is used on blockquotes for optical quote alignment.

• Blockquote uses logical properties (border-inline-start, padding-inline-start) for automatic RTL support.

• For lists, use the List component (list.css) — typography does not ship its own list styles.

• For prose tables, use the Table component (table.css) — typography does not ship its own table styles.

Headings

Four heading levels — h1 is extrabold, h2 includes a bottom border, h3 and h4 are semibold.

h1 — Taxing Laughter

h2 — The People of the Kingdom

h3 — The Joke Tax

h4 — People stopped telling jokes

<h1 class="h1">Taxing Laughter</h1>
<h2 class="h2">The People of the Kingdom</h2>
<h3 class="h3">The Joke Tax</h3>
<h4 class="h4">People stopped telling jokes</h4>

Paragraph

Standard body text with generous line height.

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

<p class="p">The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.</p>

Lead

Larger, muted intro paragraph.

A modal dialog that interrupts the user with important content and expects a response.

<p class="lead">A modal dialog that interrupts the user...</p>

Large / Small / Muted

Text size variations.

Are you absolutely sure?

Email address

Enter your email address.

<div class="large">Are you absolutely sure?</div>
<small class="small">Email address</small>
<p class="muted">Enter your email address.</p>

Blockquote

Quoted block with left border and italic style.

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

<blockquote class="blockquote">
  <p>"After all," he said, "everyone enjoys a good joke..."</p>
</blockquote>

Inline code

Monospace code snippet within text.

Edit the default-semantic-tokens.css file to customize your theme.

<code class="code">default-semantic-tokens.css</code>

Prose Composition

All typography classes combined in a full prose layout — matching the shadcn/ui demo.

Taxing Laughter: The Joke Tax Chronicles

Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.

The King's Plan

The king thought long and hard, and finally came up with a brilliant plan: he would tax the jokes in the kingdom.

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

The Joke Tax

The king's subjects were not amused. They grumbled and complained, but the king was firm:

1st level of puns: 5 gold coins
2nd level of jokes: 10 gold coins
3rd level of one-liners: 20 gold coins

As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester.

Jokester's Revolt

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.

And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.

The People's Rebellion

The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke.

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after.

The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.

<h1 class="h1" style="text-align:center;">Taxing Laughter</h1>
<p class="p">Once upon a time...</p>
<h2 class="h2">The King's Plan</h2>
<p class="p">The king thought long and hard...</p>
<blockquote class="blockquote">
  <p>"After all," he said...</p>
</blockquote>
<h3 class="h3">The Joke Tax</h3>
<ul class="list">
  <li>1st level of puns: 5 gold coins</li>
  <li>2nd level of jokes: 10 gold coins</li>
</ul>

RTL support

Blockquotes use logical properties (border-inline-start, padding-inline-start) — they flip automatically in RTL contexts.

ضريبة النكتة

فكر الملك طويلاً وبجد، وأخيراً توصل إلى خطة عبقرية: سيفرض ضريبة على النكات في المملكة.

"في النهاية،" قال، "الجميع يستمتع بنكتة جيدة، لذا من العدل أن يدفعوا مقابل هذا الامتياز."

<div dir="rtl">
  <h3 class="h3">ضريبة النكتة</h3>
  <p class="p">فكر الملك طويلاً وبجد...</p>
  <blockquote class="blockquote">
    <p>"في النهاية،" قال...</p>
  </blockquote>
</div>

CSS view file

/* -- Typography component --------------------------------------- */

/* -- Base text ---------------------------------------------- */
/* Sets the default font size for the entire page.            */
/* All typography classes are sized relative to this baseline. */
@layer base {
  body {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

@layer components {
  /* -- Headings ---------------------------------------------- */
  .h1 {
    scroll-margin-top: 5rem;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
    color: var(--foreground);
  }

  .h2 {
    scroll-margin-top: 5rem;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-wrap: balance;
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;

    &:first-child { margin-top: 0; }
  }

  .h3 {
    scroll-margin-top: 5rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-wrap: balance;
    color: var(--foreground);
  }

  .h4 {
    scroll-margin-top: 5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    text-wrap: balance;
    color: var(--foreground);
  }

  /* -- Paragraph --------------------------------------------- */
  .p {
    font-size: 0.875rem;
    line-height: 1.75;
    text-wrap: pretty;
    color: var(--foreground);

    &:not(:first-child) { margin-top: 1.5rem; }
  }

  /* -- Lead --------------------------------------------------- */
  .lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    text-wrap: pretty;
  }

  /* -- Large -------------------------------------------------- */
  .large {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
  }

  /* -- Small -------------------------------------------------- */
  .small {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--foreground);
  }

  /* -- Muted -------------------------------------------------- */
  .muted {
    font-size: 0.875rem;
    color: var(--muted-foreground);
  }

  /* -- Blockquote --------------------------------------------- */
  .blockquote {
    margin-top: 1.5rem;
    border-inline-start: 2px solid var(--border);
    padding-inline-start: 1.5rem;
    font-style: italic;
    hanging-punctuation: first last;
    color: var(--foreground);

    & p { margin: 0; }
  }

  /* -- Inline code -------------------------------------------- */
  .code {
    position: relative;
    border-radius: var(--radius-sm);
    background: var(--muted);
    padding: 0.2rem 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.875em;
    font-weight: 600;
    color: var(--foreground);
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-contrast: more) {
    .h1, .h2, .h3, .h4 {
      letter-spacing: 0;
    }

    .blockquote {
      border-inline-start-width: 3px;
    }

    .code {
      outline: 1px solid var(--border);
    }

    .muted {
      color: var(--foreground);
    }
  }

  @media (forced-colors: active) {
    .blockquote {
      border-inline-start-color: CanvasText;
    }

    .code {
      background: Canvas;
      outline: 1px solid CanvasText;
      color: CanvasText;
    }
  }
}