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

# Typography Utilities: Type Scale and Styles in AtomicKit

> AtomicKit's typography system covers fluid font sizes, font weights, line heights, letter spacing, text alignment, and text style utilities for Elementor.

AtomicKit ships a complete set of typography utilities that let you control every dimension of type directly from your Elementor class field. The system includes a fluid font size scale (using CSS `clamp()` so sizes adapt between viewport breakpoints), nine font weight steps, five line height values, ten letter spacing steps, three alignment options, and a handful of text style treatments. Combine these utilities to build expressive, consistent type styles without writing a single line of custom CSS.

## Typography Utilities at a Glance

<CardGroup cols={3}>
  <Card title="Font Size" icon="text-size" href="#font-size">
    14 fluid steps from `.text-2xs` (10–11px) to `.text-9xl` (128–186px) using CSS `clamp()`.
  </Card>

  <Card title="Font Weight" icon="bold" href="#font-weight">
    9 weight steps from `.font-thin` (100) to `.font-black` (900).
  </Card>

  <Card title="Line Height" icon="align-left" href="#line-height">
    5 fixed values from `.leading-tight` (1.25) to `.leading-loose` (2).
  </Card>

  <Card title="Letter Spacing" icon="text-width" href="#letter-spacing">
    10 steps from `.tracking-tightest` (−0.1em) to `.tracking-ultra-wide` (0.2em).
  </Card>

  <Card title="Text Alignment" icon="align-center" href="#text-alignment">
    Logical alignment utilities: `.text-start`, `.text-center`, and `.text-end`.
  </Card>

  <Card title="Text Style" icon="italic" href="#text-style">
    Transform and decoration utilities: uppercase, lowercase, underline, italic, and more.
  </Card>

  <Card title="Text Colors" icon="font" href="/colors/text-colors">
    Structural grays and six semantic tokens for text color — covered in the Colors section.
  </Card>
</CardGroup>

## Font Size

All size utilities are fluid — each class uses a `clamp()` expression that interpolates between a minimum and maximum size as the viewport width changes. This means your type scales smoothly across devices without breakpoint overrides.

| Class        | Size Range    |
| ------------ | ------------- |
| `.text-2xs`  | 10px → 11px   |
| `.text-xs`   | 12px → 13px   |
| `.text-sm`   | 14px → 16px   |
| `.text-base` | 16px → 20px   |
| `.text-lg`   | 18px → 25px   |
| `.text-xl`   | 20px → 31px   |
| `.text-2xl`  | 24px → 39px   |
| `.text-3xl`  | 30px → 49px   |
| `.text-4xl`  | 36px → 61px   |
| `.text-5xl`  | 48px → 76px   |
| `.text-6xl`  | 60px → 95px   |
| `.text-7xl`  | 72px → 119px  |
| `.text-8xl`  | 96px → 149px  |
| `.text-9xl`  | 128px → 186px |

<Tip>
  Use `.text-base` for body copy as a reliable starting point — it spans 16px to 20px, covering comfortable reading sizes across mobile and desktop. Step up to `.text-lg` or `.text-xl` for lead paragraphs and introductory text.
</Tip>

## Font Weight

| Class              | Weight |
| ------------------ | ------ |
| `.font-thin`       | 100    |
| `.font-extralight` | 200    |
| `.font-light`      | 300    |
| `.font-normal`     | 400    |
| `.font-medium`     | 500    |
| `.font-semibold`   | 600    |
| `.font-bold`       | 700    |
| `.font-extrabold`  | 800    |
| `.font-black`      | 900    |

<Note>
  Font weight rendering depends on your loaded typeface. If a weight step isn't available in the font you've set in Elementor's Global Fonts, the browser will synthesize or substitute the nearest available weight. Load the specific weights you intend to use to avoid unexpected results.
</Note>

## Line Height

Line height utilities set a fixed value in pixels along with a unitless ratio. Apply them to block-level text elements to control vertical rhythm.

| Class              | Value        |
| ------------------ | ------------ |
| `.leading-tight`   | 20px / 1.25  |
| `.leading-snug`    | 22px / 1.375 |
| `.leading-normal`  | 24px / 1.5   |
| `.leading-relaxed` | 26px / 1.625 |
| `.leading-loose`   | 32px / 2     |

## Quick Reference: Combining Typography Utilities

Typography utilities are designed to be composed. Apply multiple classes together to build complete, production-ready type styles directly in Elementor's Advanced CSS Classes field.

```html theme={null}
<!-- Display heading — large, bold, tight tracking, dark -->
<h1 class="text-4xl font-bold leading-tight tracking-tight text-black">
  Build beautiful WordPress sites faster
</h1>

<!-- Body copy — base size, normal weight, comfortable leading -->
<p class="text-base font-normal leading-relaxed text-gray-dark">
  AtomicKit gives you a complete set of utility classes so you can style
  any Elementor element without writing custom CSS.
</p>

<!-- UI label — small, medium weight, uppercase, wide tracking -->
<label class="text-sm font-medium uppercase tracking-wide text-gray">
  Category
</label>
```

## Letter Spacing

| Class                   | CSS Value                  |
| ----------------------- | -------------------------- |
| `.tracking-tightest`    | `letter-spacing: -0.1em`   |
| `.tracking-extra-tight` | `letter-spacing: -0.075em` |
| `.tracking-tighter`     | `letter-spacing: -0.05em`  |
| `.tracking-tight`       | `letter-spacing: -0.025em` |
| `.tracking-normal`      | `letter-spacing: 0em`      |
| `.tracking-wide`        | `letter-spacing: 0.025em`  |
| `.tracking-wider`       | `letter-spacing: 0.05em`   |
| `.tracking-widest`      | `letter-spacing: 0.1em`    |
| `.tracking-extra-wide`  | `letter-spacing: 0.15em`   |
| `.tracking-ultra-wide`  | `letter-spacing: 0.2em`    |

<Tip>
  Tight tracking (negative values) reads best on large display headings where default spacing can feel too open. Wide tracking pairs naturally with uppercase labels and small caps at smaller sizes where tight spacing becomes illegible.
</Tip>

## Text Alignment

Use logical alignment utilities instead of directional ones so your layouts adapt correctly in both left-to-right and right-to-left contexts.

| Class          | Alignment                                |
| -------------- | ---------------------------------------- |
| `.text-start`  | Aligns to the inline start (left in LTR) |
| `.text-center` | Centers text                             |
| `.text-end`    | Aligns to the inline end (right in LTR)  |

```html theme={null}
<h2 class="text-center text-3xl font-bold text-black">Centered Section Title</h2>
<p class="text-start text-base text-gray-dark">Left-aligned body copy.</p>
<p class="text-end text-sm text-gray">Right-aligned metadata or attribution.</p>
```

## Text Style

Apply text transform, decoration, and style utilities to add visual treatment without overriding your font or size settings.

| Class           | Effect                           |
| --------------- | -------------------------------- |
| `.uppercase`    | Transforms text to ALL CAPS      |
| `.lowercase`    | Transforms text to all lowercase |
| `.underline`    | Adds an underline decoration     |
| `.no-underline` | Removes underline decoration     |
| `.italic`       | Sets font style to italic        |

```html theme={null}
<!-- Uppercase label with wide tracking -->
<span class="uppercase tracking-widest text-sm font-semibold text-gray">
  Featured
</span>

<!-- Italic pull quote -->
<blockquote class="italic text-xl font-light leading-relaxed text-gray-dark">
  "AtomicKit changed how I build with Elementor."
</blockquote>

<!-- Remove underline from a styled link -->
<a class="text-primary no-underline font-medium">
  Read the full case study
</a>
```

<Warning>
  Use `.uppercase` with care on body copy — all-caps text at reading sizes significantly reduces legibility. Reserve it for short labels, badges, navigation items, and headings where the visual weight adds structure rather than obscuring content.
</Warning>