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:

/* 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:

app/globals.css

@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:

app/globals.css

@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:

app/globals.css

@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):

app/globals.css

@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 */
  }
}

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

Using Tailwind Classes for Overrides

For component-specific customizations, use Tailwind utility classes:

Override Font Size

<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

<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

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

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

Override Letter Spacing

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

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

Combining Overrides

<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:

<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:

app/globals.css

@layer base {
  h1 {
    font-size: clamp(2rem, 5vw, 4rem);
  }

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

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

Customizing CSS Variables

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

Swap Fonts Within a Pairing

app/globals.css

@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

app/globals.css

@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:

<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:

1. Install Multiple Pairings

   Install pairings that contain the fonts you want to mix.

   npx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
   npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json
   
2. Create Custom Variables

   Override the CSS variables to create your custom combination.

   app/globals.css

   @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);
     }
   }
   
3. Apply to Layout

   Import the fonts in your layout.

   app/layout.tsx

   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>
     );
   }
   
4. Customize the Scale

   Adjust typography scale to match your custom pairing.

   app/globals.css

   @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;
     }
   }
   

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

Using the Typography Customizer (Preview Site)

The Fonttrio preview site includes an interactive typography customizer:

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

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.

Advanced Customization Techniques

Creating Context-Specific Scales

Define different scales for different sections:

app/globals.css

@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:

app/globals.css

@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:

@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:

tailwind.config.js

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:

<h1 className="font-heading text-display-1">
  Custom Display Heading
</h1>

Best Practices

1. Start with Defaults

   Use the pairing’s default scale first. Only customize after seeing how it works in your actual content.

2. Maintain Hierarchy

   Ensure h1 is always larger than h2, h2 larger than h3, etc. Keep a clear visual hierarchy.

3. Test Across Viewports

   Verify your customizations work on mobile, tablet, and desktop. Use responsive utilities or clamp().

4. 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).

5. Test with Real Content

   Don’t just test with “Lorem ipsum”. Use actual headings and paragraphs from your content.

6. Document Your Changes

   Add comments in globals.css explaining why you customized specific values.

Common Customization Patterns

Marketing Landing Pages

/* 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

/* 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

/* 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

/* 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

Mix Multiple Pairings

Learn how to install and switch between multiple font pairings.

Use with shadcn/ui

Apply your custom typography to shadcn/ui components.