Typography

Overview

The Antilles pairing separates display (Zodiak, serif) from interface (Plus Jakarta Sans, sans-serif). Sizes, line heights, and letter-spacing are exposed as CSS variables and component classes utility classes, the same tokens power buttons, forms, and alerts.

Prerequisites

• PimentCSS stylesheet, Installation (imports typography tokens automatically).
• Font files (recommended), npm run build:fonts for local woff2; otherwise CDN fallbacks apply.
• Semantic text colors, pair type with --text-heading, --text-body, --text-muted from Colors.

CSS tokens

Canonical definitions live in tokens/typography.css (compiled from scss/tokens/_typography.scss). Override Sass variables before @use "pimentcss-design-system", see Customization.

:root {
  --font-family-heading: "Zodiak", Georgia, serif;
  --font-family-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-size-heading-h1: 3.75rem;
  --line-height-heading-h1: 4.5rem;
  --font-size-body-medium: 1rem;
  --line-height-body-medium: 1.6rem;
}

Heading scale

Apply .heading-h1 … .heading-h6 on any element (usually <h1>–<h6>). Negative letter-spacing keeps large display type tight.

<h1 class="heading-h1">Dashboard</h1>

Body scale

Three body steps cover UI density: small (metadata), medium (default), large (intro / lead). Add .body-medium--semibold for emphasis without changing size.

Semantic text colors

Always set color with semantic tokens so light/dark modes stay readable (RGAA / WCAG).

Caption tokens

Labels and helper text use caption tokens (--font-size-caption) inside components such as .label and field hints, no separate utility class required.

<div class="input">
  <label class="label" for="email"><span class="label__text">Email</span></label>
  <div class="field">
    <input class="field__input" id="email" type="email">
  </div>
  <p class="input__hint">Helper uses caption tokens.</p>
</div>

Composition patterns

Combine heading + body utilities with layout tokens. Long-form copy should respect --copy-block-max-width (33rem) for comfortable line length.

Typography in components

Buttons, alerts, and form labels inherit body tokens automatically. Use the Input block (.input → .label + .field + optional .input__hint), not class="input" on the <input> itself. Place the primary action below the field group for a clear tab order (label → field → hint → button).

Sass customization

Override families and scale before compiling your theme.

@use "pimentcss-design-system" with (
  $font-family-heading: "Zodiak", Georgia, serif,
  $font-family-body: "Plus Jakarta Sans", system-ui, sans-serif,
  $font-size-heading-h1: 3.25rem,
  $font-size-body-medium: 1rem,
  $enable-local-fonts: true,
);

Accessibility

Next steps