Basic Usage

Learn the fundamentals of using Fluid Typography in your projects.

Simple Text Hierarchy

Create a basic text hierarchy with fluid typography:

components/Article.tsx

export function Article() {
  return (
    <article>
      <h1 className="text-h1">Article Title</h1>
      <p className="text-body">
        This is the main content of the article. The text scales smoothly
        from 14px on mobile to 16px on desktop, ensuring readability across
        all viewport sizes.
      </p>
      <h2 className="text-h2">Section Heading</h2>
      <p className="text-body">More content here...</p>
    </article>
  )
}

Hero Section

Build an impactful hero section:

components/Hero.tsx

export function Hero() {
  return (
    <section className="min-h-screen flex items-center justify-center">
      <div className="text-center max-w-4xl px-4">
        <h1 className="text-display-xl font-bold mb-4">
          Launch Your Product
        </h1>
        <p className="text-body-lg mb-8">
          Build, ship, and scale your SaaS product with confidence
        </p>
        <button className="px-6 py-3 text-body font-medium bg-blue-600 text-white rounded-lg">
          Get Started
        </button>
      </div>
    </section>
  )
}

Landing Page

Complete landing page example:

pages/landing.tsx

export default function LandingPage() {
  return (
    <div>
      {/* Hero */}
      <section className="py-20 px-4 bg-gradient-to-b from-blue-50 to-white">
        <div className="max-w-6xl mx-auto text-center">
          <h1 className="text-display-2xl mb-6">
            The Future of Typography
          </h1>
          <p className="text-body-lg text-gray-600 mb-8 max-w-2xl mx-auto">
            Responsive text that scales smoothly across all devices.
            No breakpoints needed.
          </p>
          <div className="flex gap-4 justify-center">
            <button className="px-6 py-3 text-body font-semibold bg-blue-600 text-white rounded-lg">
              Get Started
            </button>
            <button className="px-6 py-3 text-body font-semibold border-2 border-gray-300 rounded-lg">
              Learn More
            </button>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-20 px-4">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-h1 text-center mb-12">Features</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <FeatureCard
              title="Zero Config"
              description="Works out of the box with sensible defaults"
            />
            <FeatureCard
              title="Customizable"
              description="Add custom scales to match your design system"
            />
            <FeatureCard
              title="Type Safe"
              description="Full TypeScript support included"
            />
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 px-4 bg-gray-900 text-white">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-display-lg mb-4">
            Ready to Get Started?
          </h2>
          <p className="text-body mb-8 text-gray-300">
            Install Fluid Typography and start building today
          </p>
          <button className="px-8 py-4 text-body font-semibold bg-white text-gray-900 rounded-lg">
            View Documentation
          </button>
        </div>
      </section>
    </div>
  )
}

function FeatureCard({ title, description }: { title: string; description: string }) {
  return (
    <div className="p-6 border rounded-lg">
      <h3 className="text-h3 mb-2">{title}</h3>
      <p className="text-body-sm text-gray-600">{description}</p>
    </div>
  )
}

Blog Post

Typography-focused blog layout:

components/BlogPost.tsx

export function BlogPost() {
  return (
    <article className="max-w-3xl mx-auto px-4 py-12">
      {/* Meta */}
      <div className="mb-8">
        <span className="text-overline text-blue-600 block mb-2">
          Design Systems
        </span>
        <h1 className="text-display mb-4">
          Building Scalable Typography
        </h1>
        <div className="flex items-center gap-4 text-body-sm text-gray-600">
          <span>By John Doe</span>
          <span>•</span>
          <time>Dec 13, 2025</time>
          <span>•</span>
          <span>5 min read</span>
        </div>
      </div>

      {/* Content */}
      <div className="prose">
        <p className="text-body leading-relaxed mb-6">
          Typography is the foundation of good design. In this article,
          we'll explore how to build a scalable typography system that
          works across all devices.
        </p>

        <h2 className="text-h2 mt-12 mb-4">
          The Challenge
        </h2>
        <p className="text-body leading-relaxed mb-6">
          Traditional responsive design uses breakpoints, causing text
          to jump in size at specific viewport widths.
        </p>

        <h3 className="text-h3 mt-8 mb-4">
          The Solution
        </h3>
        <p className="text-body leading-relaxed mb-6">
          Fluid typography scales smoothly using CSS clamp(), providing
          a better reading experience.
        </p>

        <figure className="my-8">
          <img
            src="/example.jpg"
            alt="Typography example"
            className="w-full rounded-lg"
          />
          <figcaption className="text-caption text-center mt-2 text-gray-600">
            Figure 1: Fluid typography in action
          </figcaption>
        </figure>
      </div>
    </article>
  )
}

Card Component

Reusable card with proper typography:

components/Card.tsx

interface CardProps {
  title: string
  description: string
  tag?: string
}

export function Card({ title, description, tag }: CardProps) {
  return (
    <div className="border rounded-lg p-6 hover:shadow-lg transition-shadow">
      {tag && (
        <span className="text-overline text-blue-600 block mb-2">
          {tag}
        </span>
      )}
      <h3 className="text-h3 mb-2">{title}</h3>
      <p className="text-body-sm text-gray-600">{description}</p>
    </div>
  )
}

// Usage
<Card
  tag="Tutorial"
  title="Getting Started"
  description="Learn the basics of fluid typography in 5 minutes"
/>

Pricing Table

Typography in a pricing layout:

components/Pricing.tsx

export function Pricing() {
  return (
    <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto px-4">
      <PricingCard
        name="Starter"
        price="$9"
        description="Perfect for small projects"
        features={['5 Projects', '10GB Storage', 'Email Support']}
      />
      <PricingCard
        name="Pro"
        price="$29"
        description="For growing businesses"
        features={['50 Projects', '100GB Storage', 'Priority Support']}
        featured
      />
      <PricingCard
        name="Enterprise"
        price="$99"
        description="For large organizations"
        features={['Unlimited Projects', '1TB Storage', 'Dedicated Support']}
      />
    </div>
  )
}

function PricingCard({ name, price, description, features, featured = false }) {
  return (
    <div className={`border rounded-lg p-8 ${featured ? 'border-blue-600 shadow-xl' : ''}`}>
      <h3 className="text-h3 mb-2">{name}</h3>
      <div className="mb-4">
        <span className="text-display-lg font-bold">{price}</span>
        <span className="text-body-sm text-gray-600">/month</span>
      </div>
      <p className="text-body-sm text-gray-600 mb-6">{description}</p>
      <ul className="space-y-3 mb-8">
        {features.map(feature => (
          <li key={feature} className="text-body flex items-center gap-2">
            <span className="text-green-600">✓</span>
            {feature}
          </li>
        ))}
      </ul>
      <button className="w-full py-3 text-body font-medium bg-blue-600 text-white rounded-lg">
        Get Started
      </button>
    </div>
  )
}

Newsletter Form

Clean newsletter signup:

components/Newsletter.tsx

export function Newsletter() {
  return (
    <div className="bg-gray-50 rounded-lg p-8 max-w-lg mx-auto">
      <h3 className="text-h2 mb-2">Stay Updated</h3>
      <p className="text-body text-gray-600 mb-6">
        Get the latest updates delivered to your inbox
      </p>
      <form className="flex gap-2">
        <input
          type="email"
          placeholder="Enter your email"
          className="flex-1 px-4 py-2 text-body border rounded-lg"
        />
        <button className="px-6 py-2 text-body font-medium bg-blue-600 text-white rounded-lg">
          Subscribe
        </button>
      </form>
      <p className="text-caption text-gray-500 mt-4">
        We respect your privacy. Unsubscribe at any time.
      </p>
    </div>
  )
}

Next Steps

• Custom Scales - Create custom typography scales
• API Reference - Full API documentation