Skip to main content
The Fonttrio website provides an interactive preview experience to help you find the perfect font pairing for your shadcn/ui project. With 49 curated combinations spanning from editorial to corporate styles, you can browse, filter, and test each pairing before installing.

​
Preview Site Features

Visit fonttrio.xyz to explore all available pairings. Each pairing includes:
  • Live preview with actual fonts loaded from Google Fonts
  • Complete typography scale visualization (h1 through body text)
  • Interactive type tester for custom text
  • Context previews showing the pairing in blog, landing page, and documentation layouts
  • One-click install command

​
Filtering Pairings

The preview site includes powerful filtering options to help you narrow down your search:

​
Filter by Type

Pairings are organized by their heading font category:
Traditional, editorial, and elegant pairings featuring serif heading fonts like Playfair Display, Merriweather, and Crimson Text.

​
Filter by Style

Pairings are grouped by mood and use case:
  • Editorial — Sophisticated combinations for content-heavy sites (blogs, magazines, editorial content)
  • Clean — Minimal, modern combinations for apps and SaaS products
  • Bold — High-impact combinations for marketing and landing pages
  • Corporate — Professional combinations for business and enterprise applications
  • Creative — Unique combinations for portfolios and creative work

​
Active Filters

When filters are active, the site displays:
  • The current number of matching pairings
  • A “Clear” button to reset all filters
  • Filtered results in a responsive grid layout
The filter bar is sticky and remains visible as you scroll through results, making it easy to refine your search without losing your place.

​
Pairing Cards

Each pairing is displayed as a card in the grid, showing: 
// Each card displays:
- Pairing name (e.g., "Editorial", "Minimal")
- Description of the combination
- Heading font sample
- Body font sample
- Monospace font sample
- Quick copy install command

​
Card Layout

Cards are organized in a responsive grid:
  • Mobile: Single column
  • Tablet: 2 columns
  • Desktop: 3 columns
Click any card to view the full pairing detail page.

​
Using the Type Tester

The type tester allows you to preview fonts with your own text before installing.
1

Navigate to a Pairing

Click any pairing card to open the detailed pairing page.
2

Access the Type Tester Section

Scroll down to the “Type Tester” section on the pairing detail page.
3

Select Font Target

Choose which font to preview: heading, body, or mono.
4

Adjust Size

Select from preset sizes: 14, 18, 24, 32, 48, 64, 96, or 128px.
5

Try Different Weights

Click through available weights: Light (300), Regular (400), Medium (500), SemiBold (600), and Bold (700).
6

Test Custom Text

Use the editable specimen area to type your own text and see it rendered in real-time.

​
Type Tester Interface

The type tester provides a comprehensive preview experience: 
// Type tester features:
const DEFAULT_TEXT = "The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.";

const WEIGHTS = [
  { value: 300, label: "Light" },
  { value: 400, label: "Regular" },
  { value: 500, label: "Medium" },
  { value: 600, label: "SemiBold" },
  { value: 700, label: "Bold" },
];

const SIZES = [14, 18, 24, 32, 48, 64, 96, 128];
Each weight displays:
  • Weight label and numeric value
  • Full specimen text at selected size
  • Hover effects for better interaction
Not all fonts support all weight values. If a weight isn’t available for a specific font, the browser will use the closest available weight.

​
Context Previews

The context preview section shows how your chosen pairing looks in real-world scenarios:

​
Blog Context

Shows the pairing in an article layout with:
  • Article title and date
  • Multiple heading levels (h1, h2)
  • Body paragraphs
  • Blockquotes
  • Code blocks

​
Landing Page Context

Demonstrates the pairing in a marketing layout with:
  • Large hero heading
  • Subheading and call-to-action
  • Feature cards
  • Buttons and interactive elements

​
Documentation Context

Previews the pairing in a docs layout featuring:
  • Sidebar navigation
  • Multiple heading levels
  • Lists and inline code
  • Installation commands
Context previews use the actual typography scale defined in the pairing, giving you an accurate representation of how the fonts will look in your project.

​
Typography Scale Preview

Each pairing detail page includes a complete typography scale preview showing:
  • h1 through h6: All heading levels with their configured size, weight, line height, and letter spacing
  • Body text: Paragraph styling with appropriate line height
  • Monospace: Code and preformatted text styling
The scale preview displays: 
/* Example scale values */
h1: { 
  size: "2.25rem", 
  weight: 700, 
  lineHeight: "1.2", 
  letterSpacing: "-0.025em" 
}

h2: { 
  size: "1.875rem", 
  weight: 600, 
  lineHeight: "1.25", 
  letterSpacing: "-0.02em" 
}

body: { 
  size: "1rem", 
  lineHeight: "1.65", 
  weight: 400 
}

​
Search and Discovery

While there’s no dedicated search box, you can quickly find pairings by:
  1. Using filters to narrow by type and style
  2. Scrolling through the grid to visually scan options
  3. Reading descriptions on each card for use case guidance
The grid displays all pairings sorted alphabetically, with animated loading for a smooth browsing experience.

​
Mobile Experience

The preview site is fully responsive:
  • Touch-friendly filter buttons with proper hit areas (min 44px height)
  • Horizontal scroll for style filters on narrow screens
  • Optimized font sizes that scale with viewport
  • Single-column layout on mobile devices
  • Sticky filter bar that adapts to mobile layout

​
Next Steps

Once you’ve found the perfect pairing:

Install the Pairing

Learn how to add the pairing to your project using the shadcn CLI.

Customize Typography

Adjust the typography scale to match your design requirements.

Build docs developers (and LLMs) love

Get started for freeTalk to us