Typography

Empathy DS uses the system font stack for optimal performance and native feel across platforms.

Font Stack

font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

This stack ensures:

• Apple devices: San Francisco
• Windows: Segoe UI
• Android: Roboto
• Linux: Liberation Sans or similar

Text Sizes

Use Tailwind's text utilities based on a consistent scale:

Class	Size	Line Height	Usage
text-xs	0.75rem (12px)	1rem	Labels, captions
text-sm	0.875rem (14px)	1.25rem	Secondary text, small UI
text-base	1rem (16px)	1.5rem	Body text (default)
text-lg	1.125rem (18px)	1.75rem	Lead paragraphs
text-xl	1.25rem (20px)	1.75rem	Small headings
text-2xl	1.5rem (24px)	2rem	Section headings
text-3xl	1.875rem (30px)	2.25rem	Page titles
text-4xl	2.25rem (36px)	2.5rem	Hero text

Font Weights

Class	Weight	Usage
font-normal	400	Body text
font-medium	500	Emphasis, buttons
font-semibold	600	Headings, labels
font-bold	700	Strong emphasis

Usage Examples

Headings

<template>
  <h1 class="text-3xl font-bold tracking-tight">Page Title</h1>
  <h2 class="text-2xl font-semibold">Section Heading</h2>
  <h3 class="text-xl font-semibold">Subsection</h3>
</template>

Body Text

<template>
  <p class="text-base text-foreground">
    Primary body text uses the default size and foreground color.
  </p>
  
  <p class="text-sm text-muted-foreground">
    Secondary or supporting text uses smaller size and muted color.
  </p>
</template>

Labels and Captions

<template>
  <label class="text-sm font-medium">Input Label</label>
  <p class="text-xs text-muted-foreground">Helper text or caption</p>
</template>

Component Typography

Components have built-in typography that follows these conventions:

Component	Text Classes
Button	text-sm font-medium
Label	text-sm font-medium
CardTitle	text-2xl font-semibold
CardDescription	text-sm text-muted-foreground
DialogTitle	text-lg font-semibold
DialogDescription	text-sm text-muted-foreground
AlertTitle	font-medium
AlertDescription	text-sm

Letter Spacing

Class	Value	Usage
tracking-tight	-0.025em	Large headings
tracking-normal	0	Body text (default)
tracking-wide	0.025em	All caps, labels

<template>
  <h1 class="text-4xl font-bold tracking-tight">Hero Title</h1>
  <span class="text-xs font-medium tracking-wide uppercase">Label</span>
</template>

Best Practices

1. Use semantic color tokens for text:

   • text-foreground for primary text
   • text-muted-foreground for secondary text
   • text-destructive for error messages

2. Maintain hierarchy with consistent size jumps

3. Don't skip heading levels (h1 → h2 → h3)

4. Use font-medium for interactive elements (buttons, links)

5. Keep line lengths readable (50-75 characters for body text)

<template>
  <div class="max-w-prose">
    <p>This paragraph will have a comfortable reading width...</p>
  </div>
</template>