Typography

A collection of typography styles for your web applications.

7xl/extrabold

The quick brown fox jumps over the lazy dog.

7xl/bold

The quick brown fox jumps over the lazy dog.

7xl/semibold

The quick brown fox jumps over the lazy dog.

7xl/medium

The quick brown fox jumps over the lazy dog.

7xl/normal

The quick brown fox jumps over the lazy dog.

6xl/extrabold

The quick brown fox jumps over the lazy dog.

6xl/bold

The quick brown fox jumps over the lazy dog.

6xl/semibold

The quick brown fox jumps over the lazy dog.

6xl/medium

The quick brown fox jumps over the lazy dog.

6xl/normal

The quick brown fox jumps over the lazy dog.

5xl/extrabold

The quick brown fox jumps over the lazy dog.

5xl/bold

The quick brown fox jumps over the lazy dog.

5xl/semibold

The quick brown fox jumps over the lazy dog.

5xl/medium

The quick brown fox jumps over the lazy dog.

5xl/normal

The quick brown fox jumps over the lazy dog.

4xl/extrabold

The quick brown fox jumps over the lazy dog.

4xl/bold

The quick brown fox jumps over the lazy dog.

4xl/semibold

The quick brown fox jumps over the lazy dog.

4xl/medium

The quick brown fox jumps over the lazy dog.

4xl/normal

The quick brown fox jumps over the lazy dog.

3xl/extrabold

The quick brown fox jumps over the lazy dog.

3xl/bold

The quick brown fox jumps over the lazy dog.

3xl/semibold

The quick brown fox jumps over the lazy dog.

3xl/medium

The quick brown fox jumps over the lazy dog.

3xl/normal

The quick brown fox jumps over the lazy dog.

2xl/extrabold

The quick brown fox jumps over the lazy dog.

2xl/bold

The quick brown fox jumps over the lazy dog.

2xl/semibold

The quick brown fox jumps over the lazy dog.

2xl/medium

The quick brown fox jumps over the lazy dog.

2xl/normal

The quick brown fox jumps over the lazy dog.

xl/extrabold

The quick brown fox jumps over the lazy dog.

xl/bold

The quick brown fox jumps over the lazy dog.

xl/semibold

The quick brown fox jumps over the lazy dog.

xl/medium

The quick brown fox jumps over the lazy dog.

xl/normal

The quick brown fox jumps over the lazy dog.

lg/extrabold

The quick brown fox jumps over the lazy dog.

lg/bold

The quick brown fox jumps over the lazy dog.

lg/semibold

The quick brown fox jumps over the lazy dog.

lg/medium

The quick brown fox jumps over the lazy dog.

lg/normal

The quick brown fox jumps over the lazy dog.

md/extrabold

The quick brown fox jumps over the lazy dog.

md/bold

The quick brown fox jumps over the lazy dog.

md/semibold

The quick brown fox jumps over the lazy dog.

md/medium

The quick brown fox jumps over the lazy dog.

md/normal

The quick brown fox jumps over the lazy dog.

base/extrabold

The quick brown fox jumps over the lazy dog.

base/bold

The quick brown fox jumps over the lazy dog.

base/semibold

The quick brown fox jumps over the lazy dog.

base/medium

The quick brown fox jumps over the lazy dog.

base/normal

The quick brown fox jumps over the lazy dog.

sm/extrabold

The quick brown fox jumps over the lazy dog.

sm/bold

The quick brown fox jumps over the lazy dog.

sm/semibold

The quick brown fox jumps over the lazy dog.

sm/medium

The quick brown fox jumps over the lazy dog.

sm/normal

The quick brown fox jumps over the lazy dog.

xs/extrabold

The quick brown fox jumps over the lazy dog.

xs/bold

The quick brown fox jumps over the lazy dog.

xs/semibold

The quick brown fox jumps over the lazy dog.

xs/medium

The quick brown fox jumps over the lazy dog.

xs/normal

The quick brown fox jumps over the lazy dog.

✨ Typography Component

The Typography component provides a consistent way to apply text styles across your application using a combination of TailwindCSS utility classes and variant-driven props. It supports responsive font sizing and weight control with a simple API.

Supports all Tailwind typography sizes (xs to 7xl)
Font weight variants (normal to extrabold)
Responsive scaling built in (sm, md, etc.)
Flexible as prop to render any HTML element
Built using class-variance-authority and cn()

🧩 Usage

<Typography variant="2xl/semibold" as="h1">
  Elegant Headings
</Typography>
<Typography variant="base/normal">
  This is body text using the base font size and normal weight.
</Typography>
<Typography variant="sm/extrabold" as="span">
  Small but bold!
</Typography>

🧪 Variants

You can control the text size and weight using the variant prop. It uses a string format: <fontSize>/<fontWeight> (e.g. "xl/bold","sm/medium").

Font Size	Variant Example
xs	`variant="xs/bold"`→ text-xs font-bold
base	`variant="base/medium"`→ text-sm font-medium
4xl	`variant="4xl/semibold"`→ text-2xl font-semibold
7xl	`variant="7xl/extrabold"`→ text-5xl sm:text-6xl md:text-7xl font-extrabold

🧱 Props

Prop	Type	Description
variant	`"xs/normal" \| "2xl/bold"`	Controls font size and weight
as	`React.ElementType`	Element to render (e.g. p, h2, span)
className	`string`	Additional classes to merge
...props	`HTMLAttributes`	All valid HTML props

🔍 Example Showcase

Typography: xl/bold

<Typography variant="xl/bold" />

Typography: 4xl/normal

<Typography variant="4xl/normal" />

Typography: sm/extrabold

<Typography variant="sm/extrabold" />

Typography: 2xl/medium as h2

<Typography variant="2xl/medium" as="h2" />

💡 Design Tip

Use Typography as your default text component to ensure your site has consistent spacing, font sizes, and responsive behavior. No need to replicate the same classes over and over again.