Typography Scale

Typography scale tokens provide consistent font sizes and letter spacing across your application. Use them to customize component text styling while maintaining visual hierarchy.

Font Sizes

Fourteen size levels from minimal to display, designed for flexible text scaling.

// Font size classes
<Text className="text-cn-size-0">Minimum text</Text>
<Text className="text-cn-size-2">Small text</Text>
<Text className="text-cn-size-4">Body text</Text>
<Text className="text-cn-size-6">Large text</Text>
<Text className="text-cn-size-9">Heading text</Text>
<Text className="text-cn-size-13">Display text</Text>

// Special sizes
<Text className="text-cn-size-min">Absolute minimum</Text>
<Text className="text-cn-size-half">Half size</Text>

Common size usage:

• text-cn-size-0 to text-cn-size-2 - Small text, captions, metadata
• text-cn-size-3 to text-cn-size-5 - Body text, default content
• text-cn-size-6 to text-cn-size-8 - Large text, subheadings
• text-cn-size-9 to text-cn-size-13 - Headings, hero text, display

Text Component

The Text component handles font sizing through its variant prop. Combine font size class names with leading- class names when you need to override the variant’s default size or when working with native HTML elements.

Letter Spacing

Six tracking levels for adjusting character spacing. Use sparingly to refine text appearance.

// Letter spacing classes
<Text className="tracking-cn-tighter">Tightest spacing</Text>
<Text className="tracking-cn-tight">Tight spacing</Text>
<Text className="tracking-cn-normal">Normal spacing (default)</Text>
<Text className="tracking-cn-wide">Wide spacing</Text>
<Text className="tracking-cn-wider">Wider spacing</Text>
<Text className="tracking-cn-widest">Widest spacing</Text>

Tracking guidelines:

• tracking-cn-tighter / tracking-cn-tight - Large headings, display text
• tracking-cn-normal - Default, body text (rarely needs override)
• tracking-cn-wide / tracking-cn-wider / tracking-cn-widest - All caps, labels, buttons

Common Customization Patterns

Button Text Sizing

<Button className="text-cn-size-2">Smaller button text</Button>
<Button className="text-cn-size-5">Larger button text</Button>

All Caps with Tracking

// Labels and section headers
<Text className="uppercase tracking-cn-wide">Label</Text>
<Text className="uppercase tracking-cn-wider">Section Header</Text>

// Buttons with uppercase text
<Button className="uppercase tracking-cn-widest">Action</Button>

Display Text

// Hero text with tighter tracking
<h1 className="text-cn-size-13 tracking-cn-tight">Hero Heading</h1>

// Large headings
<h2 className="text-cn-size-9 tracking-cn-tighter">Subheading</h2>

Combining Size and Tracking

// Stat card with custom sizing and tracking
<div className="bg-cn-2 rounded-3 p-cn-lg">
  <Text className="text-cn-size-1 uppercase tracking-cn-wide text-cn-3">
    Metric Label
  </Text>
  <Text className="text-cn-size-8 tracking-cn-tight font-bold">1,234</Text>
</div>

Best Practices

1. Use Text component variants first - Only override with size classes when necessary
2. Tighter tracking for large text - Improves readability at display sizes
3. Wider tracking for small caps - Enhances legibility of uppercase text
4. Avoid extreme combinations - Don’t use widest tracking with tiny text or tightest with small sizes
5. Consider line height - Combine with Tailwind’s leading-* utilities when needed
6. Test readability - Ensure custom sizes maintain sufficient contrast and legibility

Quick Reference

Token Type	Classes	Usage
Font Size	text-cn-size-0 through text-cn-size-13	Progressive sizing scale
Special Sizes	text-cn-size-min, text-cn-size-half	Edge cases
Letter Spacing	tracking-cn-tighter through tracking-cn-widest	Character spacing adjustment

Size recommendations:

• 0-2: Small text, captions
• 3-5: Body text
• 6-8: Subheadings
• 9-13: Headings, display

Tracking recommendations:

• Tighter/Tight: Large headings
• Normal: Body text
• Wide/Wider/Widest: All caps, labels