Typography

Supported fonts and weights #

Existing marketing rule: use The Seasons bold for headlines, Switzer for body copy, controls, labels, and stat values, and JetBrains Mono for small uppercase, tracked eyebrow and stat labels. The Seasons ships regular 400 and bold 700; it has no semibold face. Switzer ships 400, 500, 600, and 700. All bundled faces are normal style, not italic.

The package stylesheet maps font-display, font-sans, and font-mono to the font stacks below. Its Google Fonts import requests JetBrains Mono 400 and 500; when that external request is unavailable the declared monospace fallbacks apply. The six local faces below are derived from the installed @font-face definitions.

Bundled brand fonts are restricted to internal CoreUX brand use. See installation and font-use guidance before redistribution. Do not request unsupported weights or depend on synthetic bold or italic; the library sets font-synthesis: none.

'The Seasons', 'Times New Roman', Georgia, serif

Switzer, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace

Exported video typography scale #

Import typographyTokens from @coreux/ui. This is the separate video foundation scale used by inline-style primitives: display uses The Seasons at regular 400, and its label uses Switzer, unlike the marketing headline and eyebrow rules. A component may use only selected fields or its own sizing rules. These values are not a universal responsive type scale.

The specimens render the exact sizes, weights, line heights, and label tracking below. Large samples scroll inside their own region on a narrow screen; they are not silently reduced to fit.

{
  "family": "The Seasons",
  "size": 72,
  "lineHeight": 0.94,
  "weight": 400
}

{
  "family": "Switzer",
  "size": 42,
  "lineHeight": 1.05,
  "weight": 600
}

{
  "family": "Switzer",
  "size": 24,
  "lineHeight": 1.3,
  "weight": 600
}

{
  "family": "Switzer",
  "size": 18,
  "lineHeight": 1.45,
  "weight": 400
}

{
  "family": "Switzer",
  "size": 13,
  "lineHeight": 1.2,
  "weight": 600,
  "letterSpacing": 1.5
}

Readable hierarchy and documentation conventions #

Proposed documentation conventions: keep long reading passages around 60 characters per line, give body copy generous line spacing, and use a local monospace stack for code. These are this reference site’s choices, not additional exported CoreUX tokens or rules. Use semantic headings in a logical order; font size alone does not supply heading structure.

Both samples remain readable; the poor sample demonstrates the wrong font role. For code, preserve indentation and allow horizontal scrolling rather than shrinking text until it becomes illegible.

Apply a text hierarchy #

'use client';

import { coreuxPalette, spacingTokens } from '@coreux/ui';

export default function TextHierarchy() {
  return (
    <div style={{ background: coreuxPalette.warmIvory, color: coreuxPalette.inkNavy, padding: spacingTokens.lg }}>
      <p className="font-mono" style={{ fontSize: 12, fontWeight: 400, letterSpacing: '0.15em', textTransform: 'uppercase', margin: 0 }}>A clearer system</p>
      <h2 className="font-display" style={{ fontSize: 36, fontWeight: 700, lineHeight: 1.15, margin: '16px 0' }}>Give every idea room.</h2>
      <p className="font-sans" style={{ fontSize: 18, fontWeight: 400, lineHeight: 1.6, maxWidth: '60ch', margin: 0 }}>Use Switzer for an explanation people can read comfortably. Keep display type in the headline, and let the supporting text describe one clear idea.</p>
      <p className="font-sans" style={{ fontSize: 13, lineHeight: 1.6, margin: '16px 0 0', color: coreuxPalette.slate }}>The sizes, 60ch reading measure, and line spacing here are documentation conventions, not an exported marketing type scale.</p>
    </div>
  );
}

Values generated from @coreux/ui at 06f42fd: public foundation tokens, marketing stylesheet, bundled font definitions, and marketing conventions. Source links require repository access. Install the package and styles once.