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

# Font Size

> The bundled responsive text scale from `.text-2xs` through `.text-9xl`.

export const FontSizeDemo = () => {
  const sizes = [{
    cls: "text-sm",
    rem: "0.875rem",
    lead: "1.25rem"
  }, {
    cls: "text-lg",
    rem: "1.125rem",
    lead: "1.75rem"
  }, {
    cls: "text-2xl",
    rem: "1.5rem",
    lead: "2rem"
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo space-y-8">
        {sizes.map(s => <div key={s.cls}>
            <span className="tw-label">
              {s.cls}{" "}
              <span style={{
    color: "var(--demo-fg-faint)"
  }}>
                ({s.rem}/{s.lead})
              </span>
            </span>
            <div style={{
    fontSize: s.rem,
    lineHeight: s.lead,
    fontWeight: 500,
    color: "var(--demo-fg)"
  }}>
              The quick brown fox jumps over the lazy dog.
            </div>
          </div>)}
      </div>
    </div>;
};

## Overview

The bundled `text-*` classes are Skelementor's default font-size scale.

<Tip>For how fluid `clamp()` scaling relates to breakpoint suffixes, see [Fluid scaling](/concepts/fluid-scaling).</Tip>

| Class        | Range          | CSS                                               |
| ------------ | -------------- | ------------------------------------------------- |
| `.text-2xs`  | 10px -> 11px   | `clamp(0.58rem, calc(0.49rem + 0.09vw), 0.64rem)` |
| `.text-xs`   | 12px -> 13px   | `clamp(0.69rem, calc(0.59rem + 0.16vw), 0.8rem)`  |
| `.text-sm`   | 14px -> 16px   | `clamp(0.83rem, calc(0.71rem + 0.25vw), 1rem)`    |
| `.text-base` | 16px -> 20px   | `clamp(1rem, calc(0.85rem + 0.37vw), 1.25rem)`    |
| `.text-lg`   | 18px -> 25px   | `clamp(1.2rem, calc(1.02rem + 0.53vw), 1.56rem)`  |
| `.text-xl`   | 20px -> 31px   | `clamp(1.44rem, calc(1.22rem + 0.75vw), 1.95rem)` |
| `.text-2xl`  | 24px -> 39px   | `clamp(1.73rem, calc(1.47rem + 1.05vw), 2.44rem)` |
| `.text-3xl`  | 30px -> 49px   | `clamp(2.07rem, calc(1.76rem + 1.45vw), 3.05rem)` |
| `.text-4xl`  | 36px -> 61px   | `clamp(2.49rem, calc(2.12rem + 1.97vw), 3.82rem)` |
| `.text-5xl`  | 48px -> 76px   | `clamp(2.99rem, calc(2.54rem + 2.63vw), 4.77rem)` |
| `.text-6xl`  | 60px -> 95px   | `clamp(3.59rem, calc(3.08rem + 3.47vw), 5.96rem)` |
| `.text-7xl`  | 72px -> 119px  | `clamp(4.31rem, calc(3.74rem + 4.58vw), 7.45rem)` |
| `.text-8xl`  | 96px -> 149px  | `clamp(5.17rem, calc(4.51rem + 6.05vw), 9.31rem)` |
| `.text-9xl`  | 128px -> 186px | `clamp(6.2rem, calc(5.45rem + 7.98vw), 11.64rem)` |

## Example

<FontSizeDemo />

```html theme={null}
<div class="elementor-element text-center">
  <p class="text-sm uppercase tracking-wide text-gray margin-bottom-2">
    Bundled scale
  </p>
  <h1 class="text-5xl font-black text-black margin-bottom-4">
    One text system
  </h1>
  <p class="text-base leading-relaxed text-gray-dark maximum-width-md margin-horizontal-auto">
    Use the default `text-*` names directly. The responsive behavior is already built into the framework.
  </p>
</div>
```

Use `text-base` to `text-lg` for running copy, and step into `text-xl` to `text-3xl` for section headings. Reserve the largest sizes for hero statements and high-emphasis moments. Pair `text-*` with `.leading-*` and `.font-*` utilities instead of looking for a separate naming scheme.