Skip to main content

​
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:
lib/pairings.ts
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: 
{
  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
  }
}

​
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
Using rem units ensures your typography scales proportionally when users adjust their browser’s font size, improving accessibility.

​
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
// 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
// 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:
Use case: Balanced, versatileThis 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
Use case: Strong hierarchyCreates 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
Use case: Subtle, refinedGentle 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

​
Responsive Scales

While Fonttrio’s base scales work great across devices, you can adjust them for mobile: 
/* 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:

Editorial

Purpose: Long-form reading
  • Generous line height (1.65+)
  • Moderate font sizes
  • High contrast between h1 and body

Dashboard

Purpose: Data-dense interfaces
  • Compact line heights
  • Smaller size jumps
  • Consistent weights for scanning

Landing Page

Purpose: Marketing impact
  • Large, bold h1 (2.5rem+)
  • Dramatic size progression
  • Tight line heights for hero text

Documentation

Purpose: Technical content
  • Readable body text (1rem, 1.65 line height)
  • Clear hierarchy for nested sections
  • Monospace integration for code

​
Accessing Scale Data

You can access typography scale data programmatically: 
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:
lib/constants.ts
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

Readability First: Body text should be at least 16px (1rem) with line height of 1.5 or greater for comfortable reading.
Optical Adjustments: Large headings benefit from negative letter spacing and tighter line heights to maintain visual balance.
Consistent Rhythm: Use the same scale ratio throughout your design to maintain visual harmony.
Test at Scale: Always preview your typography at actual size on real devices—what looks good in Figma might need adjustment in production.

​
Next Steps

Font Pairings

Learn about Fonttrio’s three-font pairing system

CSS Variables

Apply typography scales using CSS variables

Customization

Learn how to customize scales for your project

Browse Pairings

Explore scales across all font pairings

Build docs developers (and LLMs) love

Get started for freeTalk to us