# Text Size

Text size utilities provide a consistent set of typography scales for text elements. These utilities handle three key aspects of typography: **font size**, **line height**, and **letter spacing** to ensure optimal readability across all text scales.

> **Note:** Font weight and font style (italic, bold) are intentionally not included in these utilities. These stylistic properties should be applied separately using appropriate CSS classes or inline styles based on the specific context and semantic meaning of your content.

## Visual Structure

```
ga-text-[helper|caption|body|heading|title|headline|display]
```

## Available Classes

- `ga-text-helper` - Helper text (xs)
- `ga-text-caption` - Caption text (sm)
- `ga-text-body` - Body text (md, default body size)
- `ga-text-heading` - Heading text (lg)
- `ga-text-title` - Title text (xl, responsive)
- `ga-text-headline` - Headline text (2xl, responsive)
- `ga-text-display` - Display text (3xl, responsive)

## Responsive Typography

The `title`, `headline`, and `display` sizes are responsive — they use smaller values on mobile and scale up at the desktop breakpoint (≥768px). This ensures large text remains readable on small screens without manual overrides.

## Usage

Text size utilities can be applied to any text element to override the default font size:

```html
<p class="ga-text-caption">Small paragraph text</p>
<h2 class="ga-text-title">Large heading</h2>
<span class="ga-text-helper">Fine print or metadata</span>
```

## Examples

```html
<div class="space-y-4">
  <div class="ga-text-helper">
    Helper - The quick brown fox jumps over the lazy dog
  </div>
  <div class="ga-text-caption">
    Caption - The quick brown fox jumps over the lazy dog
  </div>
  <div class="ga-text-body">
    Body - The quick brown fox jumps over the lazy dog
  </div>
  <div class="ga-text-heading">
    Heading - The quick brown fox jumps over the lazy dog
  </div>
  <div class="ga-text-title">
    Title - The quick brown fox jumps over the lazy dog
  </div>
  <div class="ga-text-headline">
    Headline - The quick brown fox jumps over the lazy dog
  </div>
  <div class="ga-text-display">
    Display - The quick brown fox jumps over the lazy dog
  </div>
</div>
```