> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/kapishdima/fonttrio/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography Scale

> Understanding Fonttrio's typography scale system for creating visual hierarchy

# Typography Scale

Typography scales are the backbone of visual hierarchy in web design. Fonttrio includes carefully crafted scales for each pairing, ensuring consistent and harmonious sizing across all text elements.

## What is a Typography Scale?

A typography scale defines the size, weight, line height, and letter spacing for all text elements in your design system. It creates a predictable rhythm and hierarchy that guides readers through your content.

In Fonttrio, every pairing includes a complete scale with settings for:

* Six heading levels (h1 through h6)
* Body text
* Line heights optimized for readability
* Letter spacing (tracking) for optical balance
* Font weights for proper emphasis

## Scale Structure

Each typography scale in Fonttrio follows this TypeScript interface from `/home/daytona/workspace/source/lib/pairings.ts:3-11`:

```typescript lib/pairings.ts theme={null}
export interface TypographyScale {
  h1: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  h2: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  h3: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  h4: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  h5: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  h6: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  body: { size: string; lineHeight: string; weight: number };
}
```

## Scale Examples

Different pairings use different scales to match their personality and use case. Here are real examples from Fonttrio's registry:

<CodeGroup>
  ```typescript Editorial Scale theme={null}
  {
    h1: {
      size: "2.25rem",      // 36px
      weight: 700,
      lineHeight: "1.2",
      letterSpacing: "-0.025em"
    },
    h2: {
      size: "1.875rem",     // 30px
      weight: 600,
      lineHeight: "1.25",
      letterSpacing: "-0.02em"
    },
    h3: {
      size: "1.5rem",       // 24px
      weight: 600,
      lineHeight: "1.3",
      letterSpacing: "-0.015em"
    },
    h4: {
      size: "1.25rem",      // 20px
      weight: 500,
      lineHeight: "1.35",
      letterSpacing: "-0.01em"
    },
    h5: {
      size: "1.125rem",     // 18px
      weight: 500,
      lineHeight: "1.4",
      letterSpacing: "0em"
    },
    h6: {
      size: "1rem",         // 16px
      weight: 500,
      lineHeight: "1.5",
      letterSpacing: "0em"
    },
    body: {
      size: "1rem",         // 16px
      lineHeight: "1.65",
      weight: 400
    }
  }
  ```

  ```typescript Brutalist Scale theme={null}
  {
    h1: {
      size: "2.75rem",      // 44px - Larger, bolder
      weight: 800,
      lineHeight: "1.05",   // Tighter for impact
      letterSpacing: "-0.035em"
    },
    h2: {
      size: "2.25rem",      // 36px
      weight: 700,
      lineHeight: "1.1",
      letterSpacing: "-0.025em"
    },
    h3: {
      size: "1.75rem",      // 28px
      weight: 700,
      lineHeight: "1.2",
      letterSpacing: "-0.02em"
    },
    h4: {
      size: "1.25rem",
      weight: 500,
      lineHeight: "1.35",
      letterSpacing: "-0.01em"
    },
    h5: {
      size: "1.125rem",
      weight: 500,
      lineHeight: "1.4",
      letterSpacing: "0em"
    },
    h6: {
      size: "1rem",
      weight: 500,
      lineHeight: "1.5",
      letterSpacing: "0em"
    },
    body: {
      size: "1rem",
      lineHeight: "1.6",    // Slightly tighter
      weight: 400
    }
  }
  ```

  ```typescript Minimal Scale theme={null}
  {
    h1: {
      size: "2.25rem",
      weight: 700,
      lineHeight: "1.15",   // Very tight, modern
      letterSpacing: "-0.025em"
    },
    h2: {
      size: "1.875rem",
      weight: 600,
      lineHeight: "1.2",
      letterSpacing: "-0.02em"
    },
    h3: {
      size: "1.5rem",
      weight: 500,          // Lighter weight
      lineHeight: "1.3",
      letterSpacing: "-0.015em"
    },
    h4: {
      size: "1.25rem",
      weight: 500,
      lineHeight: "1.35",
      letterSpacing: "-0.01em"
    },
    h5: {
      size: "1.125rem",
      weight: 500,
      lineHeight: "1.4",
      letterSpacing: "0em"
    },
    h6: {
      size: "1rem",
      weight: 500,
      lineHeight: "1.5",
      letterSpacing: "0em"
    },
    body: {
      size: "1rem",
      lineHeight: "1.6",
      weight: 400
    }
  }
  ```
</CodeGroup>

## Scale Anatomy

Let's break down the components of a typography scale:

### Font Size

Font sizes in Fonttrio use `rem` units, which scale relative to the root font size (typically 16px):

* **h1**: 2.25rem - 2.75rem (36px - 44px) - Large, attention-grabbing
* **h2**: 1.875rem - 2.25rem (30px - 36px) - Section headers
* **h3**: 1.5rem - 1.75rem (24px - 28px) - Subsection headers
* **h4-h6**: 1rem - 1.25rem (16px - 20px) - Minor headings
* **body**: 1rem (16px) - Optimal reading size

<Note>
  Using `rem` units ensures your typography scales proportionally when users adjust their browser's font size, improving accessibility.
</Note>

### Line Height

Line height (leading) affects readability and visual rhythm:

* **Headings**: 1.05 - 1.4 - Tighter for impact and compactness
* **Body text**: 1.6 - 1.75 - Looser for comfortable reading

```typescript theme={null}
// Tight line height for bold impact
h1: { lineHeight: "1.05" }  // Brutalist style

// Generous line height for readability
body: { lineHeight: "1.75" }  // Gazette style
```

### Letter Spacing

Letter spacing (tracking) adjusts the space between characters:

* **Negative tracking** (-0.035em to -0.01em) - Tightens large headings for optical balance
* **Neutral tracking** (0em) - Natural spacing for smaller text
* **Positive tracking** (rare) - Opens up compressed fonts

```typescript theme={null}
// Large headings need negative tracking
h1: { letterSpacing: "-0.035em" }

// Smaller text uses neutral spacing
h5: { letterSpacing: "0em" }
```

### Font Weight

Font weights create hierarchy through visual emphasis:

* **800**: Extra bold - Used in brutalist and impact styles
* **700**: Bold - Common for h1 and strong emphasis
* **600**: Semi-bold - Versatile for h2-h3
* **500**: Medium - Subtle emphasis for h4-h6
* **400**: Regular - Standard body text weight

## Scale Patterns

Fonttrio uses different scale ratios depending on the pairing's personality:

<Accordion title="Major Third (1.25)">
  **Use case**: Balanced, versatile

  This scale provides moderate contrast between sizes, suitable for most applications.

  ```
  16px → 20px → 25px → 31px → 39px
  1rem → 1.25rem → 1.56rem → 1.95rem → 2.44rem
  ```

  Used in: Editorial, Modern Clean, Dashboard
</Accordion>

<Accordion title="Perfect Fourth (1.33)">
  **Use case**: Strong hierarchy

  Creates more dramatic size differences for better visual separation.

  ```
  16px → 21px → 28px → 37px → 49px
  1rem → 1.31rem → 1.75rem → 2.31rem → 3.06rem
  ```

  Used in: Brutalist, Impact, Headline
</Accordion>

<Accordion title="Minor Third (1.2)">
  **Use case**: Subtle, refined

  Gentle size progression for sophisticated, minimalist designs.

  ```
  16px → 19px → 23px → 28px → 33px
  1rem → 1.19rem → 1.44rem → 1.73rem → 2.07rem
  ```

  Used in: Minimal, Handbook, Document
</Accordion>

## Responsive Scales

While Fonttrio's base scales work great across devices, you can adjust them for mobile:

```css theme={null}
/* Base scale */
h1 {
  font-size: 2.25rem;
  line-height: 1.2;
}

/* Mobile optimization */
@media (max-width: 768px) {
  h1 {
    font-size: 1.875rem;  /* Slightly smaller */
    line-height: 1.25;     /* Slightly looser */
  }
}
```

## Real-World Examples

Here's how different pairings use scales to match their purpose:

<CardGroup cols={2}>
  <Card title="Editorial" icon="newspaper">
    **Purpose**: Long-form reading

    * Generous line height (1.65+)
    * Moderate font sizes
    * High contrast between h1 and body
  </Card>

  <Card title="Dashboard" icon="chart-line">
    **Purpose**: Data-dense interfaces

    * Compact line heights
    * Smaller size jumps
    * Consistent weights for scanning
  </Card>

  <Card title="Landing Page" icon="rocket">
    **Purpose**: Marketing impact

    * Large, bold h1 (2.5rem+)
    * Dramatic size progression
    * Tight line heights for hero text
  </Card>

  <Card title="Documentation" icon="book">
    **Purpose**: Technical content

    * Readable body text (1rem, 1.65 line height)
    * Clear hierarchy for nested sections
    * Monospace integration for code
  </Card>
</CardGroup>

## Accessing Scale Data

You can access typography scale data programmatically:

```typescript theme={null}
import { getPairing } from '@/lib/pairings';

const editorial = getPairing('editorial');

if (editorial) {
  console.log(editorial.scale.h1);
  // {
  //   size: "2.25rem",
  //   weight: 700,
  //   lineHeight: "1.2",
  //   letterSpacing: "-0.025em"
  // }
}
```

## Scale Constants

Fonttrio provides predefined size options for customization in `/home/daytona/workspace/source/lib/constants.ts:19-28`:

```typescript lib/constants.ts theme={null}
export const FONT_SIZES = [
  { value: 14, label: "14" },
  { value: 18, label: "18" },
  { value: 24, label: "24" },
  { value: 32, label: "32" },
  { value: 48, label: "48" },
  { value: 64, label: "64" },
  { value: 96, label: "96" },
  { value: 128, label: "128" },
] as const;
```

## Best Practices

<Note>
  **Readability First**: Body text should be at least 16px (1rem) with line height of 1.5 or greater for comfortable reading.
</Note>

<Note>
  **Optical Adjustments**: Large headings benefit from negative letter spacing and tighter line heights to maintain visual balance.
</Note>

<Note>
  **Consistent Rhythm**: Use the same scale ratio throughout your design to maintain visual harmony.
</Note>

<Note>
  **Test at Scale**: Always preview your typography at actual size on real devices—what looks good in Figma might need adjustment in production.
</Note>

## Next Steps

<CardGroup cols={2}>
  <Card title="Font Pairings" href="/concepts/font-pairings" icon="layer-group">
    Learn about Fonttrio's three-font pairing system
  </Card>

  <Card title="CSS Variables" href="/concepts/css-variables" icon="code">
    Apply typography scales using CSS variables
  </Card>

  <Card title="Customization" href="/guides/customizing-typography" icon="sliders">
    Learn how to customize scales for your project
  </Card>

  <Card title="Browse Pairings" href="https://www.fonttrio.xyz" icon="grid">
    Explore scales across all font pairings
  </Card>
</CardGroup>