> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/kapishdima/fonttrio/llms.txt
> Use this file to discover all available pages before exploring further.

# Friendly Collection

> Approachable and warm typography with rounded terminals and playful character for consumer apps and startups.

# 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

<CardGroup cols={2}>
  <Card title="Startup" icon="rocket">
    Nunito + Nunito Sans + Fira Code
  </Card>

  <Card title="Playful" icon="heart">
    Quicksand + Cabin + Inconsolata
  </Card>

  <Card title="Launch" icon="paper-plane">
    Sora + Public Sans + Fira Code
  </Card>
</CardGroup>

## Featured Pairing: Startup

Friendly and approachable — Nunito's rounded terminals give headings warmth, while Nunito Sans straightens out for professional body text.

### Installation

```bash theme={null}
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

<Accordion title="Heading Styles">
  * **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
</Accordion>

<Accordion title="Body Styles">
  * **Body/Paragraph**: Nunito Sans, line-height 1.6
  * **Code**: Fira Code with programming ligatures
</Accordion>

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

<CardGroup cols={3}>
  <Card title="Consumer Apps" icon="mobile-screen">
    Mobile and web apps for everyday users
  </Card>

  <Card title="Startup Landing" icon="rocket">
    Product launches and startup websites
  </Card>

  <Card title="SaaS Products" icon="window">
    User-friendly software products
  </Card>

  <Card title="Education" icon="book">
    Learning platforms and educational apps
  </Card>

  <Card title="Kids' Products" icon="child">
    Family-friendly and children's applications
  </Card>

  <Card title="Health Tech" icon="heart-pulse">
    Wellness and healthcare consumer apps
  </Card>
</CardGroup>

## Quick Comparison

| Pairing | Heading Font | Body Font   | Character                                  |
| ------- | ------------ | ----------- | ------------------------------------------ |
| Startup | Nunito       | Nunito Sans | Rounded warmth, grows with your product    |
| Playful | Quicksand    | Cabin       | Toy-like friendliness with professionalism |
| Launch  | Sora         | Public Sans | Confident geometry, accessible standards   |

## Typography Details

<AccordionGroup>
  <Accordion title="Playful Pairing">
    **Quicksand + Cabin + Inconsolata**

    Rounded 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-friendly

    **Use Cases**: Kids' apps, education, consumer products, playful brands

    ```bash theme={null}
    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
  </Accordion>

  <Accordion title="Launch Pairing">
    **Sora + Public Sans + Fira Code**

    Launch-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, accessible

    **Use Cases**: Startup launches, product pages, accessible applications

    ```bash theme={null}
    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
  </Accordion>
</AccordionGroup>

## Installation Commands

```bash theme={null}
# 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:

<CardGroup cols={2}>
  <Card title="Nunito" icon="circle">
    Fully rounded terminals create soft, approachable character
  </Card>

  <Card title="Quicksand" icon="circle-dot">
    Circular counters and geometric roundness
  </Card>

  <Card title="Sora" icon="adjust">
    Optical adjustments balance geometry with readability
  </Card>

  <Card title="Cabin" icon="house">
    Humanist proportions with subtle warmth
  </Card>
</CardGroup>

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

```css theme={null}
/* 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:

```css theme={null}
/* 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

<AccordionGroup>
  <Accordion title="Readability">
    Friendly typefaces with rounded terminals often have larger x-heights, improving readability at small sizes. This makes them excellent for mobile-first designs.
  </Accordion>

  <Accordion title="Dyslexia-Friendly">
    Many friendly typefaces (especially Quicksand and Nunito) have distinctive letterforms that help readers with dyslexia differentiate similar characters.
  </Accordion>

  <Accordion title="Color Contrast">
    While friendly designs often use softer colors, maintain WCAG AA standards (4.5:1 for body text, 3:1 for large text) for accessibility.
  </Accordion>
</AccordionGroup>

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

<Tip>
  Friendly pairings work best with playful microcopy, illustrations, and animations. The typography sets a warm tone — reinforce it throughout the entire experience.
</Tip>

<Note>
  Balance friendliness with professionalism. Use rounded typefaces for headings but pair with more neutral body text to maintain credibility.
</Note>