Typography

OverviewLink to section

Typography is one of the strongest signals of product quality. It gives every interface a readable structure before color, spacing, motion, or decoration are added.

PyColors treats typography as a system, not as local page styling. The goal is to keep dashboards, documentation, settings pages, marketing sections, forms, and product flows readable and consistent as the product grows.

At the end of this page, you will understand how PyColors handles:

• font roles
• heading hierarchy
• body text density
• labels and metadata
• semantic text roles
• production usage rules

What you’ll defineLink to section

StepsLink to section

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans", // highlight
});

export function HeadingHierarchy() {
  return (
    <div className="space-y-4">
      <h1 className="text-4xl font-semibold tracking-tight">
        Page title
      </h1>
      <h2 className="text-3xl font-semibold tracking-tight">
        Section title
      </h2>
      <h3 className="text-2xl font-semibold tracking-tight">
        Subsection title
      </h3>
      <h4 className="text-xl font-medium tracking-tight">
        Minor heading
      </h4>
      <p className="text-base leading-7 text-muted-foreground">
        Readable body text.
      </p>
    </div>
  );
}

Why it mattersLink to section

Typography is where product quality becomes visible. Users may not notice the type system directly, but they notice when the product feels harder to scan, less structured, or visually inconsistent.

Without a stable typography system, you will:

• invent heading sizes page by page
• overuse font weight to create emphasis
• make dashboards visually noisy
• reduce trust in product and documentation surfaces
• make components harder to reuse consistently

With a stable system, every page feels calmer, more intentional, and easier to understand.

Text rolesLink to section

Usage rulesLink to section

Use typography roles to create consistent product surfaces instead of styling text from scratch each time.

export function ProductSummary() {
  return (
    <section className="space-y-2">
      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
        Starter Pro
      </p>
      <h2 className="text-2xl font-semibold tracking-tight">
        Production-shaped SaaS foundation
      </h2>
      <p className="max-w-prose text-sm leading-6 text-muted-foreground">
        Use semantic text roles to keep product copy, labels, and descriptions
        predictable across reusable surfaces.
      </p>
    </section>
  );
}

Decision guideLink to section

Use this typography system if:

• you are building SaaS dashboards, docs, settings, or marketing pages
• you need consistent hierarchy across multiple product areas
• you want reusable components to feel coherent without local overrides
• you care about light and dark mode readability

Do not override it if:

• the change only solves one local visual preference
• the same need appears in multiple places and should become a token
• the new size, weight, or color weakens hierarchy consistency

Common mistakesLink to section

Next stepsLink to section