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

# Line Height

> Fixed pixel leading utilities that ship as `.leading-*` in the bundle.

export const LineHeightDemo = () => {
  const leads = [{
    cls: "leading-tight",
    px: 20,
    unitless: 1.25
  }, {
    cls: "leading-snug",
    px: 22,
    unitless: 1.375
  }, {
    cls: "leading-normal",
    px: 24,
    unitless: 1.5
  }, {
    cls: "leading-relaxed",
    px: 26,
    unitless: 1.625
  }, {
    cls: "leading-loose",
    px: 32,
    unitless: 2
  }];
  const txt = "So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.";
  return <div className="not-prose my-6">
      <div className="tw-demo space-y-8">
        {leads.map(l => <div key={l.cls}>
            <span className="tw-label">
              {l.cls}{" "}
              <span style={{
    color: "var(--demo-fg-faint)"
  }}>
                ({l.px}px · ≈{l.unitless} @ 16px)
              </span>
            </span>
            <div style={{
    lineHeight: `${l.px}px`,
    fontSize: "0.875rem",
    color: "var(--demo-fg-muted)"
  }}>
              {txt}
            </div>
          </div>)}
      </div>
    </div>;
};

## Overview

Use `leading-*` classes for fixed line-height steps that stay easy to pair with any text size.

| Class              | Line height    | Best for                            |
| ------------------ | -------------- | ----------------------------------- |
| `.leading-tight`   | `20px / 1.25`  | Compact headings and stacked titles |
| `.leading-snug`    | `22px / 1.375` | Subheads and UI copy                |
| `.leading-normal`  | `24px / 1.5`   | Everyday body copy                  |
| `.leading-relaxed` | `26px / 1.625` | Long-form paragraphs                |
| `.leading-loose`   | `32px / 2`     | Spacious display copy               |

## Example

<LineHeightDemo />

```html theme={null}
<article class="maximum-width-lg margin-horizontal-auto">
  <h2 class="text-3xl font-bold leading-tight text-black margin-bottom-4">
    Built-in rhythm for bundled typography
  </h2>
  <p class="text-base leading-relaxed text-gray-dark">
    Use `.leading-tight` when you want multi-line headings to stay compact. Swap to `.leading-relaxed` when paragraphs need more room to breathe.
  </p>
</article>
```

## Best Practices

* Use `.leading-tight` for headings and labels that should feel compact.
* Use `.leading-snug` when tight feels cramped but normal feels too open (subheads, short descriptions).
* Use `.leading-normal` for UI copy and shorter paragraphs.
* Use `.leading-relaxed` for body copy, summaries, and longer text blocks.
* Use `.leading-loose` sparingly for quotes and roomy display copy.