Typography

Typography tokens for consistent text across the design system.

Font Families

Fragment UI uses Geist as the primary font family with system fallbacks. The typography system supports both sans-serif and monospace fonts.

Font Sizes

The typography system provides a font-size scale driven by tokens:

Font Weights

Fragment UI supports five font weights for different text hierarchies and emphasis:

Display Styles

Large display text styles for headings and hero sections. These styles use tighter line heights and negative letter spacing for impact.

Text Styles

Body text styles for paragraphs and content. These styles use comfortable line heights for readability.

Semantic elements

In Fragment UI docs, semantic HTML elements (headings, paragraphs, lists, inline code, strong/emphasis) are styled by DocumentContent using DS typography tokens. This avoids duplicating (and potentially drifting) hardcoded values in the documentation.

Lists

List styles for ordered and unordered lists:

Code & Monospace

Monospace font styles for code blocks and inline code:

const fragment = "design system";
const tokens = { typography: "system" };
console.log(fragment, tokens);

Usage Examples

Here are practical examples of how to use typography tokens and styles in your components:

CSS Variables

/* Font families */
font-family: var(--typography-font-sans);
font-family: var(--typography-font-mono);

/* Font sizes */
font-size: var(--typography-size-xs); /* 12px */
font-size: var(--typography-size-intro); /* 15px */
font-size: var(--typography-size-sm); /* 14px */
font-size: var(--typography-size-md); /* 16px */
font-size: var(--typography-size-lg); /* 18px */
font-size: var(--typography-size-xl); /* 20px */
font-size: var(--typography-size-2xl); /* 22px */

/* Using with density multipliers */
font-size: calc(var(--typography-size-md) * var(--density-typography-size-multiplier));

Tailwind Classes

Note: Tailwind utilities like text-xs are fixed rem-based sizes. If you want typography to be driven by design tokens (and respond to Theme Builder / density), prefer text-[length:var(--typography-size-*)] (or inline styles with var(--typography-size-*)).

/* Display styles */
<h1 className="text-display-2xl">Display Heading</h1>
<h2 className="text-display-xl">Large Display</h2>

/* Text styles */
<p className="text-[length:var(--typography-size-lg)]">Large text</p>
<p className="text-[length:var(--typography-size-md)]">Medium text</p>
<p className="text-[length:var(--typography-size-sm)]">Small text</p>
<p className="text-[length:var(--typography-size-xs)]">Extra small text</p>

/* Font weights */
<p className="font-light">Light (300)</p>
<p className="font-normal">Regular (400)</p>
<p className="font-medium">Medium (500)</p>
<p className="font-semibold">Semibold (600)</p>
<p className="font-bold">Bold (700)</p>

/* Font families */
<p className="font-sans">Sans-serif text</p>
<code className="font-mono">Monospace code</code>

React Components

import { cn } from "@/lib/utils";

// Display heading
<h1 
  className={cn(
    "text-display-lg",
    "font-medium",
    "text-[color:var(--foreground-primary)]"
  )}
>
  Hero Title
</h1>

// Body text
<p 
  style={{
    fontFamily: "Geist, sans-serif",
    fontSize: "var(--typography-size-md)",
    fontWeight: 300,
    lineHeight: "160%",
  }}
>
  Body text content
</p>

// Code block
<pre className="font-mono text-[length:var(--typography-size-sm)] bg-[color:var(--color-surface-2)] p-[var(--space-4)] rounded-[var(--radius-md)]">
  <code>const code = "example";</code>
</pre>

Best Practices

• Use semantic HTML: Always use proper heading tags (h1-h6) instead of styled divs for accessibility
• Maintain hierarchy: Use heading levels in order (h1 → h2 → h3) without skipping levels
• Limit display styles: Use display styles sparingly for hero sections and major headings only
• Consistent line heights: Use the predefined line heights (110% for display, 150-160% for text) for optimal readability
• Font weights: Use medium (500) for headings and light (300) for body text to maintain visual hierarchy
• Responsive typography: Consider using smaller font sizes on mobile devices
• Density modes: Typography scales automatically with density modes (compact, normal, comfortable)

Density Modes

Typography scales automatically with density modes. See Density documentation for more details on how typography adapts to different density settings.