Typography

Twigwind provides a comprehensive typography system for controlling font properties including size, weight, family, style, and variant.

💡 Tip: Typography utilities use the font- prefix and support responsive breakpoints, hover states, and dark mode.

Font Size

Control text size using predefined size tokens or custom values:

Predefined Sizes

Small text (0.875rem)

Medium text (1rem)

Large text (1.125rem)

Extra large text (1.25rem)

Extra extra large text (1.5rem)

<p class="font-size-sm">Small text</p>
<p class="font-size-md">Medium text</p>
<p class="font-size-lg">Large text</p>
<p class="font-size-xl">Extra large text</p>
<p class="font-size-xxl">Extra extra large text</p>

Custom Font Sizes

Custom 2rem text

Custom 24px text

Custom 1.5em text

<p class="font-size-2rem">Custom 2rem text</p>
<p class="font-size-24px">Custom 24px text</p>
<p class="font-size-1.5em">Custom 1.5em text</p>

Font Weight

Control the thickness of text using font weight utilities:

Thin weight (100)

Light weight (300)

Normal weight (400)

Medium weight (500)

Bold weight (700)

Black weight (900)

<p class="font-weight-100">Thin weight</p>
<p class="font-weight-300">Light weight</p>
<p class="font-weight-400">Normal weight</p>
<p class="font-weight-500">Medium weight</p>
<p class="font-weight-700">Bold weight</p>
<p class="font-weight-900">Black weight</p>

Font Family

Set the font family using system fonts or custom font stacks:

Serif font family

Sans-serif font family

Monospace font family

Custom Arial font stack

Custom Georgia font stack

<p class="font-family-serif">Serif font family</p>
<p class="font-family-sans-serif">Sans-serif font family</p>
<p class="font-family-monospace">Monospace font family</p>
<p class="font-family-Arial,_sans-serif">Custom Arial font stack</p>
<p class="font-family-Georgia,_serif">Custom Georgia font stack</p>
⚠️ Note: Use underscores (_) in place of spaces when defining custom font families in class names.

Font Style

Control the style of text (italic, oblique, normal):

Normal text style

Italic text style

Oblique text style

<p class="font-style-normal">Normal text style</p>
<p class="font-style-italic">Italic text style</p>
<p class="font-style-oblique">Oblique text style</p>

Font Variant

Control font variants like small-caps:

Normal font variant

Small caps font variant

All small caps variant

<p class="font-variant-normal">Normal font variant</p>
<p class="font-variant-small-caps">Small caps font variant</p>
<p class="font-variant-all-small-caps">All small caps variant</p>

Responsive Typography

Typography utilities work with responsive breakpoints:

Responsive text size

Responsive font weight

<p class="font-size-sm md:font-size-lg lg:font-size-xl">Responsive text size</p>
<p class="font-weight-400 md:font-weight-700">Responsive font weight</p>

Hover States

Typography utilities support hover states:

Hover to make bold

Hover to italicize

<p class="font-weight-400 hover:font-weight-700">Hover to make bold</p>
<p class="font-style-normal hover:font-style-italic">Hover to italicize</p>

Dark Mode Typography

Typography utilities work seamlessly with dark mode:

Lighter weight in dark mode

Larger size in dark mode

<p class="font-weight-400 dark:font-weight-300">Lighter weight in dark mode</p>
<p class="font-size-md dark:font-size-lg">Larger size in dark mode</p>

Typography Combinations

Combine multiple typography utilities for complete text styling:

Heading with serif

Subheading sans-serif

Italic paragraph with Georgia

Monospace code text 
<h1 class="font-size-xxl font-weight-700 font-family-serif">Heading with serif</h1>
<h2 class="font-size-xl font-weight-500 font-family-sans-serif">Subheading sans-serif</h2>
<p class="font-size-md font-weight-400 font-style-italic font-family-Georgia,_serif">Italic paragraph</p>
<code class="font-size-sm font-family-monospace font-weight-500">Monospace code</code>

Implementation Details

The typography system is implemented in the twTypography function:

const twTypography = (cls) => {
  if (used.has(cls)) return;
  used.add(cls);
  const sizes = { sm: "0.875rem", md: "1rem", lg: "1.125rem", xl: "1.25rem", xxl: "1.5rem" };
  const { hover, dark, media, pure } = parsePrefix(cls);
  const match = pure.match(/^font-(size|weight|family|style|variant)(.+)$/);
  if (!match) return;
  const [, prop, val] = match;
  if (prop === "size" && sizes[val]) {
    return pushCSS(cls, `font-size: ${sizes[val]};`, hover, media, dark);
  }
  if (!prop) {prop = "family"}
  pushCSS(cls, `font-${prop}: ${val.replace(/_/g, " ")};`, hover, media, dark);
}

Best Practices

✅ Typography Best Practices

⚠️ Common Pitfalls