> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Font families, weights, scale, and line-height. Inter by default; swap fonts with one prompt.

Typography in vly is configured in two places: the Tailwind config (`fontFamily`) and the CSS variables (`--font-sans`, `--font-mono`). The defaults are Inter (sans) and JetBrains Mono (mono).

## Changing the font

The fastest path:

```text theme={null}
Use Geist as the body font and JetBrains Mono for code blocks.
```

vly:

1. Adds the `<link>` tag (or `next/font` import) for the font.
2. Updates `tailwind.config.ts` to use it.
3. Updates global CSS variables.

## Where to add fonts manually

<Tabs>
  <Tab title="Google Fonts">
    Add to `app/layout.tsx`:

    ```html theme={null}
    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap" rel="stylesheet" />
    ```

    Then `tailwind.config.ts`:

    ```ts theme={null}
    fontFamily: { sans: ["Geist", "ui-sans-serif"] }
    ```
  </Tab>

  <Tab title="Self-hosted">
    Drop fonts in `public/fonts/`, define `@font-face` in `globals.css`, reference in Tailwind config.
  </Tab>

  <Tab title="Variable fonts">
    Same setup; ensure your `font-weight` Tailwind classes match the variable axis range.
  </Tab>
</Tabs>

## Type scale

Tailwind's default type scale is sensible for most apps. The defaults:

| Class | Size | Use for |
| - | - | - |
| `text-xs` | 12px | Captions, labels |
| `text-sm` | 14px | Secondary body, UI labels |
| `text-base` | 16px | Body |
| `text-lg` | 18px | Lead paragraphs |
| `text-xl` | 20px | Section subheadings |
| `text-2xl` | 24px | Card titles |
| `text-3xl` | 30px | Page titles |
| `text-4xl` | 36px | Hero secondary |
| `text-5xl` | 48px | Hero primary |

Customize in `tailwind.config.ts` if you need a tighter or looser scale.

## Line height

Tailwind's `leading-*` classes control line-height. Defaults:

* `leading-tight` (1.25) — for headings.
* `leading-normal` (1.5) — for body.
* `leading-relaxed` (1.625) — for long-form content (blog posts, docs).

## Font features

For nicer typography on screens that support it:

```css globals.css theme={null}
body {
  font-feature-settings: "cv11", "ss01", "ss03";  /* Inter optical features */
  font-variant-numeric: tabular-nums;             /* aligned number columns */
}
```

vly adds these by default for Inter. Adjust per font.

## Tips

<Tip>
  **Pair fonts deliberately.** A common mistake is using three or more font families. Two (one sans, optional one display) is plenty.
</Tip>

<Tip>
  **Test on slow connections.** Custom fonts add a lot of weight. Use `font-display: swap` and consider variable fonts to ship one file instead of many.
</Tip>

## Related

<CardGroup cols={3}>
  <Card title="Tailwind config" icon="settings-2" href="/features/design/tailwind-config">
    The font config lives here.
  </Card>

  <Card title="Themes" icon="palette" href="/features/design/themes">
    Color and spacing tokens.
  </Card>

  <Card title="Icons & assets" icon="image" href="/features/design/icons-and-assets">
    Adjacent visual primitives.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.