Typography.

The voice of Nectar. A strategic pairing of Acorn (serif) for emotional headlines and Geist (sans) for rational utility, establishing a clear visual hierarchy.

className="font-display text-4xl"

Configuration

Preview Text

Scale

The quick brown fox jumps over the lazy dog.

font-display text-5xl md:text-7xl...

Next.js Font Optimization • CLS Zero

Native Tag Defaults

I don't use a <Text> wrapper. Instead, I target native HTML tags (h1, p) in globals.css. This ensures Markdown content and CMS data are styled automatically without prop drilling.

Fluid Typography

Headings use fluid sizing logic (clamp) to scale gracefully from mobile to desktop, ensuring the 'Acorn' typeface maintains its impact without overflowing small viewports.

HeroSection.tsx

// ❌ Avoid: <Typography variant="h1">Hello</Typography>
// ✅ Do: Use semantic HTML + Utility Classes

export function Hero() {
  return (
    <section>
      <h1 className="font-display text-6xl font-bold">
        Design Engineering
      </h1>
      <p className="font-sans text-xl text-muted-foreground">
        Bridging the gap between Figma and React.
      </p>
    </section>
  )
}