Typography

Before we start, look at your app's text. Notice how it uses the browser's default font — it looks generic. After this section, the same text will feel professional and intentional. Small typographic changes have an outsized impact on perceived quality.

Good typography is the fastest way to make an app feel professional. A few small changes to fonts, sizing, and spacing can completely transform the look.

Ask Claude Code to set up typography

"Set up a professional typography system. Use Inter from Google Fonts as the primary font (with system font fallbacks). Create a type scale with sizes for: small text (13px), body (15px), subheading (18px), heading (24px), and display (32px). Set line-height to 1.5 for body text and 1.2 for headings. Apply these throughout the app."

💡Info

Inter is a popular choice for UI design — it was specifically designed for computer screens and works beautifully at small sizes. But any clean sans-serif will work. Other great options: Geist, IBM Plex Sans, or just the system font stack.

What Claude Code does

Adds the Inter font import to your layout or CSS
Sets up font-size variables or Tailwind classes for each level
Configures the font family in Tailwind's config
Applies the type scale across existing components

The type scale in action

After Claude Code applies the changes, you should see:

Page title — Large, bold, confident. Draws the eye immediately.
Section labels — Medium size, semibold. Creates clear hierarchy.
Todo text — Comfortable reading size. Not too big, not too small.
Metadata — Smaller, muted color. Due dates, categories, counts.

Fine-tuning

If something doesn't look right, give specific feedback:

"The todo item text feels too small. Bump it up to 15px and increase the line-height slightly."

"The page title is too heavy. Use font-semibold instead of font-bold."

"Add letter-spacing: -0.02em to the headings for a tighter, more modern look."

✅Tip

A common mistake is having too many font sizes. Stick to 4-5 sizes maximum. If you find yourself reaching for a custom size, one of the existing scale levels probably works.

Font loading

Claude Code will likely use next/font for optimal font loading:

import { Inter } from 'next/font/google'
 
const inter = Inter({ subsets: ['latin'] })

This gives you automatic font optimization — self-hosting, zero layout shift, and proper fallbacks. Next.js handles the complexity.

Good typography is subtle. Your users won't think "wow, great font choices." They'll just think "this app feels nice." That's the goal.