Typography

A fixed semantic scale with consumer-controlled primary and secondary font families, plus composable inline emphasis effects.

Import

import { Typography, TextEffect } from "@/components/ui/atoms/typography";

Semantic scale

Build calmer interfaces.

A clear heading standard

Section title

Body copy uses the primary font and a predictable line-height.

Supporting caption text

<Typography variant="display">Display</Typography>
<Typography variant="h1">Heading</Typography>
<Typography variant="body">Body</Typography>
<Typography variant="caption">Caption</Typography>

Mixed typography

Choose the secondary font explicitly; UI controls and ordinary body text stay on the primary font.

Design systems with character.

<Typography variant="display" balance>Design with <TextEffect effect="contrast">character.</TextEffect></Typography>

Text effects

Effects apply only to highlighted words and honor the reduced-motion preference.

hand-drawncontrastshimmermarkeroutlinegradientglowboxedstrike

<TextEffect effect="hand-drawn">Highlighted</TextEffect>
<TextEffect effect="contrast">Highlighted</TextEffect>
<TextEffect effect="shimmer">Highlighted</TextEffect>
<TextEffect effect="marker">Highlighted</TextEffect>
<TextEffect effect="outline">Highlighted</TextEffect>
<TextEffect effect="gradient">Highlighted</TextEffect>
<TextEffect effect="glow">Highlighted</TextEffect>
<TextEffect effect="boxed">Highlighted</TextEffect>
<TextEffect effect="strike">Highlighted</TextEffect>

Font customization

Override the two CSS variables at app or theme scope. The component API and semantic scale remain unchanged.

:root {
  --poyraz-font-primary: "Inter", sans-serif;
  --poyraz-font-secondary: "Playfair Display", serif;
}

pnpm dlx shadcn@latest add @poyraz/typography

Runtime dependencies

class-variance-authority@^0.7.1

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme

Installed files

@ui/atoms/typography.tsx