Typography

Default document rhythm for content written with plain HTML.

MDN: Heading elements

MDN: <blockquote>

MDN: <code>

MDN: <pre>

Typography

Content should read well before you start tuning utilities.

Getting started

Import typography.css alongside the base tokens and write normal HTML content inside the PaleUI scope.

Good defaults matter most on the pages you write the least custom CSS for.

<div data-header>
  <section style="max-width: 28rem; width: 100%;">
    <h1>
      Typography
    </h1>
    <p class="lead">
      Content should read well before you start tuning utilities.
    </p>
    <h2>
      Getting started
    </h2>
    <p>
      Import
      <code>
        typography.css
      </code>
      alongside the base tokens and write normal HTML content inside the PaleUI scope.
    </p>
    <blockquote>
      Good defaults matter most on the pages you write the least custom CSS for.
    </blockquote>
  </section>
</div>

Typography styles headings, paragraphs, lists, code, and quotes inside the [data-paleui] scope.

Helper classes like .lead, .large, .small, and .muted are included for common text treatments.

Usage

Heading

Heading elements inside the typography scope.

<h1>
  Typography
</h1>

Text

Paragraphs, blockquotes, and lists use the same document rhythm.

<p>
  Typography sets readable defaults for long-form content.
</p>

Code

Inline code and code blocks use the monospace palette.

<p>
  Install
  <code>
    paleui
  </code>
  and import
  <code>
    main.css
  </code>
  before any component or typography stylesheet.
</p>

Utility

Helper classes cover lead, large, small, and muted text.

<p class="lead">
  Lead text is useful below a page title or section heading.
</p>

Examples

Heading

Heading levels use a fixed scale and spacing.

Typography

Getting started

Default content

Consistent spacing

<div data-component="heading" data-dimension="level">
  <div data-component="heading" data-example="level" data-variant="h1">
    <h1>
      Typography
    </h1>
  </div>
  <div data-component="heading" data-example="level" data-variant="h2">
    <h2>
      Getting started
    </h2>
  </div>
  <div data-component="heading" data-example="level" data-variant="h3">
    <h3>
      Default content
    </h3>
  </div>
  <div data-component="heading" data-example="level" data-variant="h4">
    <h4>
      Consistent spacing
    </h4>
  </div>
</div>

Text

Paragraphs, quotes, and lists share the same spacing.

Typography sets readable defaults for long-form content.

Good defaults matter most on the pages you write the least custom CSS for.

Import the base token file.
Add the typography stylesheet.
Write normal HTML content.

<div data-component="text" data-dimension="kind">
  <div data-component="text" data-example="kind" data-variant="paragraph">
    <p style="max-width: 28rem;">
      Typography sets readable defaults for long-form content.
    </p>
  </div>
  <div data-component="text" data-example="kind" data-variant="blockquote">
    <blockquote style="max-width: 28rem;">
      Good defaults matter most on the pages you write the least custom CSS for.
    </blockquote>
  </div>
  <div data-component="text" data-example="kind" data-variant="list">
    <ul style="max-width: 28rem;">
      <li>
        Import the base token file.
      </li>
      <li>
        Add the typography stylesheet.
      </li>
      <li>
        Write normal HTML content.
      </li>
    </ul>
  </div>
</div>

Code

Use inline code for references and preformatted blocks for longer snippets.

Install paleui and import main.css before any component or typography stylesheet.

@import "paleui/lib/main.css";
@import "paleui/lib/typography.css";

<div data-component="code" data-dimension="kind">
  <div data-component="code" data-example="kind" data-variant="inlineCode">
    <p style="max-width: 28rem;">
      Install
      <code>
        paleui
      </code>
      and import
      <code>
        main.css
      </code>
      before any component or typography stylesheet.
    </p>
  </div>
  <div data-component="code" data-example="kind" data-variant="codeBlock">
    <pre style="max-width: 28rem;">
      <code>
        @import "paleui/lib/main.css";
@import "paleui/lib/typography.css";
      </code>
    </pre>
  </div>
</div>

Utility

Use the helper classes for common text treatments.

Lead text is useful below a page title or section heading.

Large text adds emphasis without becoming a heading.

Small text works for labels and metadata.

Muted text works well for secondary explanations and notes.

<div data-component="utility" data-dimension="style">
  <div data-component="utility" data-example="style" data-variant="lead">
    <p class="lead" style="max-width: 28rem;">
      Lead text is useful below a page title or section heading.
    </p>
  </div>
  <div data-component="utility" data-example="style" data-variant="large">
    <div class="large" style="max-width: 28rem;">
      Large text adds emphasis without becoming a heading.
    </div>
  </div>
  <div data-component="utility" data-example="style" data-variant="small">
    <div class="small" style="max-width: 28rem;">
      Small text works for labels and metadata.
    </div>
  </div>
  <div data-component="utility" data-example="style" data-variant="muted">
    <p class="muted" style="max-width: 28rem;">
      Muted text works well for secondary explanations and notes.
    </p>
  </div>
</div>