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:

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

Google Fonts

Add to app/layout.tsx:

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

Then tailwind.config.ts:

fontFamily: { sans: ["Geist", "ui-sans-serif"] }

Self-hosted

Drop fonts in public/fonts/, define @font-face in globals.css, reference in Tailwind config.

Variable fonts

Same setup; ensure your font-weight Tailwind classes match the variable axis range.

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:

globals.css

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

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

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.

Related

Tailwind config

The font config lives here.

Themes

Color and spacing tokens.

Icons & assets

Adjacent visual primitives.