Skip to main content

​
Creative Collection

The Creative collection features distinctive, geometric pairings designed for design studios, creative agencies, and portfolio sites. These combinations balance geometric precision with artistic flair, creating memorable and curated typographic experiences.

​
Style Characteristics

Creative pairings are characterized by:
  • Creative & Distinctive: Typefaces with unique personality and character
  • Geometric: Circles, triangles, and mathematical proportions
  • Curated: Thoughtfully selected combinations that feel designed
  • Nordic: Scandinavian-inspired minimalism with character

​
Pairings in this Collection

Creative

Space Grotesk + DM Sans + Fira Code

Studio

Bricolage Grotesque + Figtree + Fira Code

Architect

Outfit + Libre Baskerville + IBM Plex Mono
Playful geometric pairing with Space Grotesk’s distinctive letterforms commanding attention in headlines, balanced by DM Sans’s friendly body text.

​
Installation

npx shadcn@latest add https://www.fonttrio.xyz/r/creative.json

​
Font Stack

  • Heading: Space Grotesk — Geometric grotesk with character
  • Body: DM Sans — Friendly, readable sans-serif
  • Mono: Fira Code — Developer-focused monospace

​
Typography Specs

  • H1: 2.5rem, line-height 1.15, letter-spacing -0.03em, weight 700
  • H2: 2rem, line-height 1.2, letter-spacing -0.02em, weight 600
  • H3: 1.5rem, line-height 1.3, letter-spacing -0.015em, weight 600
  • Body/Paragraph: DM Sans, line-height 1.6
  • Code: Fira Code with programming ligatures

​
Design Philosophy

Space Grotesk brings geometric playfulness without sacrificing readability. Its distinctive letterforms (especially the ‘a’ and ‘g’) create memorable headings, while DM Sans keeps body text approachable and professional.

​
Use Cases

Design Studios

Creative agency sites and design portfolios

Startups

Landing pages with personality and innovation

Portfolios

Personal branding for creatives and makers

Agencies

Marketing and branding agency websites

Architecture

Architectural firms and design-build companies

Innovation

Product design and innovation consultancies

​
Quick Comparison

PairingHeading FontBody FontCharacter
CreativeSpace GroteskDM SansPlayful geometric startup
StudioBricolage GrotesqueFigtreeDistinctive ink traps
ArchitectOutfitLibre BaskervilleStructured precision

​
Typography Details

Bricolage Grotesque + Figtree + Fira CodeDesign-forward pairing with distinctive ink traps and angular terminals that command attention, softened by Figtree’s friendly geometric body text.Personality: Creative, distinctive, design studio aestheticUse Cases: Design studios, creative agencies, experimental portfolios
npx shadcn@latest add https://www.fonttrio.xyz/r/studio.json
Outfit + Libre Baskerville + IBM Plex MonoStructured meets refined. Outfit’s geometric precision in headings contrasts beautifully with Libre Baskerville’s warm readability — like blueprints meeting handwritten notes.Personality: Structured, professional, architectural precisionUse Cases: Architecture firms, portfolio sites, professional services
npx shadcn@latest add https://www.fonttrio.xyz/r/architect.json

​
Installation Commands

# Install any pairing from this collection
npx shadcn@latest add https://www.fonttrio.xyz/r/creative.json
npx shadcn@latest add https://www.fonttrio.xyz/r/studio.json
npx shadcn@latest add https://www.fonttrio.xyz/r/architect.json

​
Design Characteristics

​
Geometric Foundations

Creative pairings are built on geometric principles — circles, squares, and triangles form the basis of letterforms. This mathematical foundation creates visual harmony while allowing for distinctive character.

​
Distinctive Features

Space Grotesk

Distinctive ‘a’ and ‘g’, geometric construction with humanist warmth

Bricolage Grotesque

Ink traps, angular terminals, architectural precision

Outfit

Perfect circles, geometric clarity, optical adjustments

DM Sans

Low contrast, friendly geometry, compact efficiency

​
Typography Best Practices

​
Scale and Hierarchy

Creative pairings benefit from dramatic scale differences between headings and body text: 
/* Recommended scale */
h1 { font-size: 2.5rem; }  /* 40px */
h2 { font-size: 2rem; }    /* 32px */
h3 { font-size: 1.5rem; }  /* 24px */
p  { font-size: 1rem; }     /* 16px */

​
Letter Spacing

Geometric typefaces often benefit from slight negative tracking in headings to create optical tightness:
  • H1: -0.03em
  • H2: -0.02em
  • H3: -0.015em
  • Body: default (0em)

​
Whitespace

Creative pairings need room to breathe. Use generous margins and padding to let the distinctive letterforms shine.
Creative pairings work best with bold color choices and strong visual identity. Don’t be afraid to use color, gradients, or patterns to enhance the geometric character.

​
When to Use Creative Pairings

✅ Do use when:
  • Building a portfolio or personal brand
  • Creating a design studio website
  • Launching an innovative product
  • Showcasing creative work
  • Building a startup landing page
❌ Avoid when:
  • Building enterprise software
  • Creating government or civic sites
  • Designing financial applications
  • Long-form reading (novels, articles)
  • Accessibility is the primary concern
While creative pairings have strong personality, they maintain professional readability. They’re distinctive without sacrificing usability.

Build docs developers (and LLMs) love

Get started for freeTalk to us