Typography
Typography components and fonts
CRITICAL: Always use typography components (H1-H6, P1-P4) instead of raw HTML elements (<h1>, <p>).
Typography Components
Headings
Import from @/components/navigation/common/heading:
import { H1, H2, H3, H4, H5, H6 } from "@/components/navigation/common/heading";
<H1>Page Title</H1>
<H2>Section Title</H2>Paragraphs
Import from @/components/navigation/common/paragraph:
import { P1, P2, P3, P4 } from "@/components/navigation/common/paragraph";
<P1>Body text with standard sizing.</P1>
<P3>Muted helper text (has built-in opacity).</P3>Heading Components
| Component | Use Case | Default Color |
|---|---|---|
H1 | Page titles | foreground |
H2 | Major sections | foreground |
H3 | Subsections | foreground |
H4 | Minor headings | foreground |
H5 | Small headings | foreground |
H6 | Labels, badges | foreground |
Example Usage
<H1>Welcome to Dashboard</H1>
<H2>Recent Activity</H2>
<H3>This Week</H3>
<H6>Status Badge</H6>Paragraph Components
| Component | Use Case | Default Color |
|---|---|---|
P1 | Body text (base) | foreground |
P2 | Smaller body text | foreground |
P3 | Muted helper text | Built-in 60% opacity |
P4 | Extra small text | Built-in 60% opacity |
Muted Text
P3 and P4 have built-in 60% opacity for muted text:
<P1>Primary body text</P1>
<P3>This text is automatically muted</P3>
<P4>Very small muted text</P4>For other components, manually add text-muted-foreground:
<H6 className="text-muted-foreground">Muted heading</H6>
<P1 className="text-muted-foreground">Muted paragraph</P1>Before/After Examples
❌ Avoid
// Never use raw HTML elements with text classes
<span className="text-lg font-semibold">
{t("features.cards.modular.badge")}
</span>
<p className="text-sm text-muted-foreground">
Helper text here
</p>
<h1 className="text-3xl font-bold">
Page Title
</h1>✅ Prefer
// Use typography components
<H6>{t("features.cards.modular.badge")}</H6>
<P3>Helper text here</P3>
<H1>Page Title</H1>Custom Styling
Override styles when needed using className:
<H2 className="text-primary">Primary colored heading</H2>
<P1 className="italic">Italicized text</P1>
<P3 className="uppercase tracking-wide">Uppercase helper</P3>Font Configuration
Fonts are configured in src/config/fonts.ts:
import { Inter, Poppins } from "next/font/google";
export const fontSans = Inter({
subsets: ["latin"],
variable: "--font-sans",
});
export const fontHeading = Poppins({
subsets: ["latin"],
variable: "--font-heading",
weight: ["600", "700"],
});These fonts are applied via CSS variables:
--font-sans- Body text (Inter)--font-heading- Headings (Poppins)
Text Utilities
Useful Tailwind utilities for text:
<P1 className="truncate"> {/* Truncate with ellipsis */}
<P1 className="line-clamp-2"> {/* Clamp to 2 lines */}
<P1 className="break-words"> {/* Break long words */}
<P1 className="uppercase"> {/* Transform case */}
<P1 className="tracking-wide"> {/* Letter spacing */}
<P1 className="leading-relaxed"> {/* Line height */}Responsive Typography
Use responsive variants for different screen sizes:
<H1 className="text-2xl md:text-4xl lg:text-5xl">
Responsive Heading
</H1>
<P1 className="text-sm md:text-base">
Responsive body text
</P1>Best Practices
Always use typography components instead of <h1>, <p>, etc.
They have built-in opacity for helper text
Let the components handle default styling
Match heading levels to content structure (H1 → H2 → H3)
Critical Rule
Never use <h1>, <h2>, <p>, or other raw HTML text elements. Always import and use the typography components (H1-H6, P-P4) for consistent styling.