Skip to main content

​
Friendly Collection

The Friendly collection features approachable, warm pairings designed for consumer applications, startup landing pages, and products targeting everyday users. These combinations use rounded terminals, humanist proportions, and playful geometry to create inviting, accessible experiences.

​
Style Characteristics

Friendly pairings are characterized by:
  • Friendly & Approachable: Rounded terminals and warm letterforms
  • Warm: Humanist proportions that feel inviting rather than mechanical
  • Playful: Geometric character with toy-like friendliness
  • Startup: Modern but approachable, innovative but accessible

​
Pairings in this Collection

Startup

Nunito + Nunito Sans + Fira Code

Playful

Quicksand + Cabin + Inconsolata

Launch

Sora + Public Sans + Fira Code
Friendly and approachable — Nunito’s rounded terminals give headings warmth, while Nunito Sans straightens out for professional body text.

​
Installation

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

​
Font Stack

  • Heading: Nunito — Rounded, friendly sans-serif
  • Body: Nunito Sans — Straighter companion for readability
  • Mono: Fira Code — Modern monospace with ligatures

​
Typography Specs

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

​
Design Philosophy

Nunito’s rounded terminals create immediate warmth and approachability. The superfamily approach ensures visual cohesion — headlines feel friendly, while body text remains professional and readable.

​
Use Cases

Consumer Apps

Mobile and web apps for everyday users

Startup Landing

Product launches and startup websites

SaaS Products

User-friendly software products

Education

Learning platforms and educational apps

Kids' Products

Family-friendly and children’s applications

Health Tech

Wellness and healthcare consumer apps

​
Quick Comparison

PairingHeading FontBody FontCharacter
StartupNunitoNunito SansRounded warmth, grows with your product
PlayfulQuicksandCabinToy-like friendliness with professionalism
LaunchSoraPublic SansConfident geometry, accessible standards

​
Typography Details

Quicksand + Cabin + InconsolataRounded and inviting. Quicksand’s perfectly circular counters give headings a toy-like friendliness, while Cabin’s humanist proportions keep body text grounded and professional.Personality: Playful, approachable, consumer-friendlyUse Cases: Kids’ apps, education, consumer products, playful brands
npx shadcn@latest add https://www.fonttrio.xyz/r/playful.json
Typography Specs:
  • H1: 2.25rem, weight 600, letter-spacing -0.02em
  • Body: line-height 1.65 for comfortable reading
Sora + Public Sans + Fira CodeLaunch-ready confidence. Sora’s geometric precision with optical adjustments makes bold headlines pop, while Public Sans — born from US government accessibility standards — ensures every word lands clearly.Personality: Modern, confident, accessibleUse Cases: Startup launches, product pages, accessible applications
npx shadcn@latest add https://www.fonttrio.xyz/r/launch.json
Typography Specs:
  • H1: 2.5rem, weight 700, letter-spacing -0.03em
  • Body: line-height 1.6, optimized for accessibility

​
Installation Commands

# Install any pairing from this collection
npx shadcn@latest add https://www.fonttrio.xyz/r/startup.json
npx shadcn@latest add https://www.fonttrio.xyz/r/playful.json
npx shadcn@latest add https://www.fonttrio.xyz/r/launch.json

​
Design Characteristics

​
Rounded Terminals

The defining feature of friendly typography is rounded terminals — where strokes end in gentle curves rather than sharp angles:

Nunito

Fully rounded terminals create soft, approachable character

Quicksand

Circular counters and geometric roundness

Sora

Optical adjustments balance geometry with readability

Cabin

Humanist proportions with subtle warmth

​
Humanist Proportions

Friendly typefaces often incorporate humanist features:
  • Slight variations in stroke width
  • Open apertures for better legibility
  • Calligraphic influence in letter shapes
  • Organic rather than mechanical feeling

​
Typography Best Practices

​
Font Weight Selection

Friendly pairings work best with moderate weights: 
/* Recommended weights */
h1 { font-weight: 700; } /* Bold but not heavy */
h2 { font-weight: 600; } /* Semi-bold */
h3 { font-weight: 600; } /* Semi-bold */
body { font-weight: 400; } /* Regular */
Avoid ultra-heavy weights (800-900) which can make rounded typefaces feel cartoonish.

​
Color and Contrast

Friendly typography pairs well with:
  • Warm color palettes (oranges, yellows, soft blues)
  • Medium contrast (avoid pure black on white)
  • Gradient backgrounds
  • Playful illustrations

​
Line Height and Spacing

Generous spacing enhances approachability: 
/* Friendly spacing */
body {
  line-height: 1.65; /* More generous than corporate */
  letter-spacing: 0em; /* No negative tracking */
}

h1 {
  line-height: 1.1; /* Tight but not cramped */
  letter-spacing: -0.02em; /* Subtle negative tracking */
}

​
Accessibility Considerations

Friendly typefaces with rounded terminals often have larger x-heights, improving readability at small sizes. This makes them excellent for mobile-first designs.
Many friendly typefaces (especially Quicksand and Nunito) have distinctive letterforms that help readers with dyslexia differentiate similar characters.
While friendly designs often use softer colors, maintain WCAG AA standards (4.5:1 for body text, 3:1 for large text) for accessibility.

​
When to Use Friendly Pairings

✅ Do use when:
  • Targeting consumer audiences
  • Building educational products
  • Creating family-friendly applications
  • Launching startup products
  • Emphasizing approachability over authority
❌ Avoid when:
  • Building financial/banking applications
  • Creating legal or government sites
  • Designing luxury/premium brands
  • Targeting corporate/B2B audiences
  • Emphasizing security and trust
Friendly pairings work best with playful microcopy, illustrations, and animations. The typography sets a warm tone — reinforce it throughout the entire experience.
Balance friendliness with professionalism. Use rounded typefaces for headings but pair with more neutral body text to maintain credibility.

Build docs developers (and LLMs) love

Get started for freeTalk to us