Skip to main content
Typography overview cover

​
Overview

Typography utilities cover size, weight, leading, alignment, tracking, and text treatments in one naming system.

Font Size

The bundled text-* scale from .text-2xs through .text-9xl

Font Weight

Nine font-weight utilities from thin through black

Line Height

Fixed pixel .leading-* utilities for readable rhythm

Text Alignment

Logical alignment helpers for LTR and RTL content

Letter Spacing

Tracking helpers from tightest to ultra-wide

Text Style

Transform, decoration, and italic helpers

Text Colors

Text color utilities for hierarchy, emphasis, and contrast

​
Quick Start

<div class="elementor-element text-center">
  <p class="text-sm uppercase tracking-widest text-gray mb-2">
    Skelementor
  </p>
  <h1 class="text-6xl font-black leading-tight text-black mb-4">
    One bundled typography system
  </h1>
  <p class="text-base leading-relaxed text-gray-dark max-w-md mx-auto">
    Use the default `text-*` and `leading-*` names directly, then layer weight, alignment, and tracking as needed.
  </p>
</div>

​
What Ships

  • Font size: .text-2xs through .text-9xl
  • Font weight: .font-thin through .font-black
  • Leading: .leading-tight, .leading-snug, .leading-normal, .leading-relaxed, .leading-loose
  • Alignment: .text-start, .text-center, .text-end
  • Tracking: .tracking-tightest through .tracking-ultra-wide
  • Text styling: .uppercase, .lowercase, .underline, .no-underline, .italic