Design

Typography

A complete type scale from 12px to 60px with weight, alignment, and line-height utilities. Semantic HTML elements are styled automatically.

Scale

Text Sizes

<p class="text-5xl font-bold">Heading</p>
<p class="text-base">Body text at 16px</p>
<p class="text-sm">Small text at 14px</p>

Headings

Heading Elements & Classes

Native heading elements are styled automatically. Use .h1 through .h6 classes to apply heading styles to any element.

Lead Text

Use lead (alias: lead-subhead) for introductory text with larger font size and relaxed line-height.

Heading Elements

<p class="h1">Looks like an H1 but is a paragraph</p>
<span class="h3">Span with H3 styling</span>

Weight

Font Weights

<p class="font-bold text-xl">Bold and extra large</p>
<p class="font-normal text-sm">Normal weight, small</p>

Styles

Text Styles

Alignment

Text Alignment

<p class="text-center">Centered paragraph</p>
<p class="text-right">Right-aligned text</p>

Line Height

Leading

Semantic

Native HTML Elements

These elements are styled automatically without classes.

// Preformatted code block
function hello() {
  console.log("Hello, ply!");
}

Theming

Typography Custom Properties

Override font families across your entire theme with three CSS custom properties. These work the same way as color variables — one override propagates everywhere.

[data-theme="brand"] {
  --ply-font-body: "Palatino Linotype", Palatino, Georgia, serif;
  --ply-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ply-font-mono: "Fira Code", "Source Code Pro", monospace;
}