> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Responsive type scale, leading, weights, alignment, tracking, and text styling.

<div className="sk-theme-hero not-prose">
  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/4oZ9ucvfw4_Z4_Bt/images-for-overview/Typography.png?fit=max&auto=format&n=4oZ9ucvfw4_Z4_Bt&q=85&s=aed6e6a82873b76c9f6691dfd45c9ab8" className="dark:hidden block" alt="Typography overview cover" width="4054" height="2489" data-path="images-for-overview/Typography.png" />

  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintlify.s3.us-west-1.amazonaws.com/skelementor/images-for-overview/Typography%20-%20Dark.png" className="hidden dark:block" alt="Typography overview cover (dark)" />
</div>

## Overview

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

<CardGroup cols={2}>
  <Card title="Font Size" icon="text-size" href="/typography/font-size">
    The bundled `text-*` scale from `.text-2xs` through `.text-9xl`
  </Card>

  <Card title="Font Weight" icon="bold" href="/typography/font-weight">
    Nine font-weight utilities from thin through black
  </Card>

  <Card title="Line Height" icon="line-height" href="/typography/line-height">
    Fixed pixel `.leading-*` utilities for readable rhythm
  </Card>

  <Card title="Text Alignment" icon="align-left" href="/typography/text-alignment">
    Logical alignment helpers for LTR and RTL content
  </Card>

  <Card title="Letter Spacing" icon="kerning" href="/typography/letter-spacing">
    Tracking helpers from tightest to ultra-wide
  </Card>

  <Card title="Text Style" icon="italic" href="/typography/text-style">
    Transform, decoration, and italic helpers
  </Card>

  <Card title="Text Colors" icon="palette" href="/colors/text-colors">
    Text color utilities for hierarchy, emphasis, and contrast
  </Card>
</CardGroup>

## 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`