> ## 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.

# Customizing Typography

> Learn how to customize typography scales, override defaults, and create your own font combinations in Fonttrio.

While Fonttrio pairings come with carefully crafted typography scales, every project has unique design requirements. This guide shows you how to customize font sizes, weights, line heights, and create custom combinations.

## Understanding the Typography Scale

Each Fonttrio pairing includes a complete typography scale defined in CSS:

```css theme={null}
/* Default Editorial pairing scale */
h1 {
  font-family: var(--font-heading);
  font-size: 2.25rem;        /* 36px */
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 700;
}

h2 {
  font-family: var(--font-heading);
  font-size: 1.875rem;       /* 30px */
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
}

h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;         /* 24px */
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
}

/* h4, h5, h6, body, code... */
```

This scale is applied globally through your `globals.css` file.

## Customizing the Scale

You can customize any part of the typography scale by editing `globals.css`:

### Adjusting Font Sizes

Override specific heading sizes:

```css app/globals.css theme={null}
@layer base {
  /* Make h1 larger for landing pages */
  h1 {
    font-size: 3rem;          /* Changed from 2.25rem */
  }

  /* Reduce h2 size for tighter hierarchy */
  h2 {
    font-size: 1.75rem;       /* Changed from 1.875rem */
  }
}
```

### Adjusting Font Weights

Change weights for different emphasis:

```css app/globals.css theme={null}
@layer base {
  /* Lighter headings for a more elegant feel */
  h1 {
    font-weight: 600;         /* Changed from 700 */
  }

  /* Bolder body text for better readability */
  body, p {
    font-weight: 500;         /* Changed from 400 */
  }
}
```

### Adjusting Line Heights

Modify line heights for better readability:

```css app/globals.css theme={null}
@layer base {
  /* Tighter line height for display headings */
  h1 {
    line-height: 1.1;         /* Changed from 1.2 */
  }

  /* More spacious body text */
  body, p {
    line-height: 1.75;        /* Changed from 1.65 */
  }
}
```

### Adjusting Letter Spacing

Fine-tune letter spacing (tracking):

```css app/globals.css theme={null}
@layer base {
  /* Tighter tracking for bold headings */
  h1 {
    letter-spacing: -0.03em;  /* Changed from -0.025em */
  }

  /* Looser tracking for better legibility at small sizes */
  body, p {
    letter-spacing: 0.01em;   /* Added tracking */
  }
}
```

<Note>
  Changes to `globals.css` affect all instances of these elements throughout your app. For component-specific overrides, use Tailwind classes or CSS modules.
</Note>

## Using Tailwind Classes for Overrides

For component-specific customizations, use Tailwind utility classes:

### Override Font Size

```tsx theme={null}
<h1 className="text-5xl">       {/* Overrides default h1 size */}
  Large Hero Heading
</h1>

<h2 className="text-xl">        {/* Smaller h2 for cards */}
  Card Title
</h2>
```

### Override Font Weight

```tsx theme={null}
<h1 className="font-light">     {/* 300 instead of default 700 */}
  Light Heading
</h1>

<p className="font-semibold">   {/* 600 instead of default 400 */}
  Emphasized paragraph
</p>
```

### Override Line Height

```tsx theme={null}
<h1 className="leading-tight">  {/* Tighter than default */}
  Compact Heading
</h1>

<p className="leading-loose">   {/* More spacious */}
  Relaxed paragraph
</p>
```

### Override Letter Spacing

```tsx theme={null}
<h1 className="tracking-tighter">  {/* Tighter tracking */}
  Condensed Heading
</h1>

<p className="tracking-wide">      {/* Looser tracking */}
  Spaced paragraph
</p>
```

### Combining Overrides

```tsx theme={null}
<h1 className="text-6xl font-black leading-none tracking-tighter">
  Fully Custom Heading
</h1>
```

## Creating Responsive Typography

Use Tailwind's responsive prefixes to create adaptive typography:

```tsx theme={null}
<h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl">
  Responsive Heading
</h1>

<p className="text-sm md:text-base lg:text-lg">
  Responsive body text
</p>
```

Or use clamp() in CSS for fluid typography:

```css app/globals.css theme={null}
@layer base {
  h1 {
    font-size: clamp(2rem, 5vw, 4rem);
  }

  body, p {
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  }
}
```

<Warning>
  Be careful with `clamp()` values. Test across multiple screen sizes to ensure text remains readable on both mobile and desktop.
</Warning>

## Customizing CSS Variables

You can override the font family variables to create custom combinations:

### Swap Fonts Within a Pairing

```css app/globals.css theme={null}
@layer base {
  :root {
    /* Use body font for headings instead */
    --font-heading: var(--font-source-serif-4);
    
    /* Use heading font for body */
    --font-body: var(--font-playfair-display);
  }
}
```

### Create Dark Mode Font Variations

```css app/globals.css theme={null}
@layer base {
  :root {
    --font-heading: var(--font-playfair-display);
    --font-body: var(--font-source-serif-4);
  }

  .dark {
    /* Lighter weights for dark mode */
    --font-heading-weight: 600;  /* Custom variable */
    --font-body-weight: 300;
  }
}
```

Then reference in your components:

```tsx theme={null}
<h1 className="font-[family-name:var(--font-heading)] dark:font-semibold">
  Adapts to dark mode
</h1>
```

## Creating Custom Font Pairings

You can mix and match individual fonts from different pairings:

<Steps>
  <Step title="Install Multiple Pairings">
    Install pairings that contain the fonts you want to mix.

    ```bash theme={null}
    npx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
    npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json
    ```
  </Step>

  <Step title="Create Custom Variables">
    Override the CSS variables to create your custom combination.

    ```css app/globals.css theme={null}
    @layer base {
      :root {
        /* Playfair Display from Editorial */
        --font-heading: var(--font-playfair-display);
        
        /* Inter from Minimal */
        --font-body: var(--font-inter);
        
        /* Keep JetBrains Mono from either */
        --font-mono: var(--font-jetbrains-mono);
      }
    }
    ```
  </Step>

  <Step title="Apply to Layout">
    Import the fonts in your layout.

    ```tsx app/layout.tsx theme={null}
    import { playfairDisplay } from "@/registry/fonts/playfair-display";
    import { inter } from "@/registry/fonts/inter";
    import { jetbrainsMono } from "@/registry/fonts/jetbrains-mono";

    export default function RootLayout({ children }) {
      return (
        <html className={`
          ${playfairDisplay.variable} 
          ${inter.variable} 
          ${jetbrainsMono.variable}
        `}>
          <body>{children}</body>
        </html>
      );
    }
    ```
  </Step>

  <Step title="Customize the Scale">
    Adjust typography scale to match your custom pairing.

    ```css app/globals.css theme={null}
    @layer base {
      h1 {
        font-family: var(--font-heading);
        font-size: 3rem;
        font-weight: 700;          /* Playfair works well at 700 */
        line-height: 1.1;
        letter-spacing: -0.03em;
      }

      body, p {
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 400;          /* Inter default weight */
        line-height: 1.6;
      }
    }
    ```
  </Step>
</Steps>

<Note>
  When creating custom pairings, test thoroughly to ensure the fonts complement each other. Consider contrast (serif vs sans), weight, and x-height compatibility.
</Note>

## Using the Typography Customizer (Preview Site)

The Fonttrio preview site includes an interactive typography customizer:

```tsx theme={null}
// The customizer lets you adjust:
interface TypographyScale {
  h1: { 
    size: string;          // e.g., "2.25rem"
    weight: number;        // 100-900
    lineHeight: string;    // e.g., "1.2"
    letterSpacing: string; // e.g., "-0.025em"
  };
  // h2-h6, body...
}
```

Experiment with the customizer, then copy the resulting CSS to your project.

<Warning>
  The customizer on the preview site is for experimentation only. Changes are not saved or exported automatically. Note your preferred values and apply them manually to `globals.css`.
</Warning>

## Advanced Customization Techniques

### Creating Context-Specific Scales

Define different scales for different sections:

```css app/globals.css theme={null}
@layer components {
  /* Landing page hero scale */
  .hero h1 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  /* Blog content scale */
  .article h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  /* Documentation scale */
  .docs h1 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
  }
}
```

### Using CSS Custom Properties for Dynamic Scales

Create adjustable scales with CSS variables:

```css app/globals.css theme={null}
@layer base {
  :root {
    --scale-ratio: 1.25;  /* Major third */
    --base-size: 1rem;
    
    --text-xs: calc(var(--base-size) / var(--scale-ratio) / var(--scale-ratio));
    --text-sm: calc(var(--base-size) / var(--scale-ratio));
    --text-base: var(--base-size);
    --text-lg: calc(var(--base-size) * var(--scale-ratio));
    --text-xl: calc(var(--base-size) * var(--scale-ratio) * var(--scale-ratio));
  }

  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-lg); }
  body { font-size: var(--text-base); }
}
```

Change the entire scale by adjusting one variable:

```css theme={null}
@layer base {
  /* Larger scale for marketing */
  .marketing {
    --scale-ratio: 1.414;  /* Augmented fourth */
  }

  /* Compact scale for dense interfaces */
  .app {
    --scale-ratio: 1.125;  /* Major second */
  }
}
```

### Extending Tailwind Config

Add custom font sizes to Tailwind:

```js tailwind.config.js theme={null}
module.exports = {
  theme: {
    extend: {
      fontSize: {
        'display-1': ['4.5rem', { lineHeight: '1', letterSpacing: '-0.04em' }],
        'display-2': ['3.75rem', { lineHeight: '1.05', letterSpacing: '-0.035em' }],
        'heading-1': ['3rem', { lineHeight: '1.1', letterSpacing: '-0.03em' }],
      },
      fontFamily: {
        heading: 'var(--font-heading)',
        body: 'var(--font-body)',
        mono: 'var(--font-mono)',
      },
    },
  },
}
```

Use in components:

```tsx theme={null}
<h1 className="font-heading text-display-1">
  Custom Display Heading
</h1>
```

## Best Practices

<Steps>
  <Step title="Start with Defaults">
    Use the pairing's default scale first. Only customize after seeing how it works in your actual content.
  </Step>

  <Step title="Maintain Hierarchy">
    Ensure h1 is always larger than h2, h2 larger than h3, etc. Keep a clear visual hierarchy.
  </Step>

  <Step title="Test Across Viewports">
    Verify your customizations work on mobile, tablet, and desktop. Use responsive utilities or clamp().
  </Step>

  <Step title="Consider Line Length">
    Adjust line height based on line length. Longer lines need more line height (1.6-1.8), shorter lines can be tighter (1.4-1.5).
  </Step>

  <Step title="Test with Real Content">
    Don't just test with "Lorem ipsum". Use actual headings and paragraphs from your content.
  </Step>

  <Step title="Document Your Changes">
    Add comments in `globals.css` explaining why you customized specific values.
  </Step>
</Steps>

## Common Customization Patterns

### Marketing Landing Pages

```css theme={null}
/* Larger, bolder headings with tight spacing */
h1 { font-size: 4rem; font-weight: 800; line-height: 1; }
h2 { font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
body { font-size: 1.125rem; line-height: 1.6; }
```

### Blog and Editorial

```css theme={null}
/* Comfortable reading with generous spacing */
h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
body { font-size: 1.125rem; line-height: 1.75; }
```

### Documentation Sites

```css theme={null}
/* Clear hierarchy with moderate sizes */
h1 { font-size: 2rem; font-weight: 600; line-height: 1.25; }
h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
body { font-size: 1rem; line-height: 1.65; }
code { font-size: 0.875rem; }
```

### SaaS Dashboards

```css theme={null}
/* Compact, efficient use of space */
h1 { font-size: 1.75rem; font-weight: 600; line-height: 1.25; }
h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
body { font-size: 0.875rem; line-height: 1.5; }
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Mix Multiple Pairings" icon="layer-group" href="/guides/mixing-pairings">
    Learn how to install and switch between multiple font pairings.
  </Card>

  <Card title="Use with shadcn/ui" icon="puzzle-piece" href="/guides/using-with-shadcn">
    Apply your custom typography to shadcn/ui components.
  </Card>
</CardGroup>