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

> Dial in typographic emphasis using `.font-*` utilities from ultra-thin to ultra-black.

export const FontWeightDemo = () => {
  const weights = [{
    cls: "font-light",
    val: 300
  }, {
    cls: "font-medium",
    val: 500
  }, {
    cls: "font-bold",
    val: 700
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo space-y-8">
        {weights.map(w => <div key={w.cls}>
            <span className="tw-label">{w.cls}</span>
            <div style={{
    fontWeight: w.val,
    fontSize: "1.125rem",
    lineHeight: 1.5,
    color: "var(--demo-fg)"
  }}>The quick brown fox jumps over the lazy dog.</div>
          </div>)}
      </div>
    </div>;
};

## Overview

Use `font-*` classes to control emphasis without changing the size scale.

| Class              | Weight | CSS                 | Usage notes                  |
| ------------------ | ------ | ------------------- | ---------------------------- |
| `.font-thin`       | 100    | `font-weight: 100;` | Ultra-fine display use       |
| `.font-extralight` | 200    | `font-weight: 200;` | Light editorial accents      |
| `.font-light`      | 300    | `font-weight: 300;` | Subtle supporting text       |
| `.font-normal`     | 400    | `font-weight: 400;` | Default body copy            |
| `.font-medium`     | 500    | `font-weight: 500;` | Labels and UI controls       |
| `.font-semibold`   | 600    | `font-weight: 600;` | Section headings             |
| `.font-bold`       | 700    | `font-weight: 700;` | Primary headings and buttons |
| `.font-extrabold`  | 800    | `font-weight: 800;` | Strong emphasis              |
| `.font-black`      | 900    | `font-weight: 900;` | Display typography           |

## Example

<FontWeightDemo />

```html theme={null}
<div class="elementor-element">
  <p class="text-base font-light text-gray">
    Designed for Elementor
  </p>
  <h2 class="text-3xl font-bold text-black">
    Craft polished typographic systems
  </h2>
  <p class="text-base font-normal text-gray-dark">
    Mix `.font-medium` for UI labels with `.font-semibold` or `.font-bold` for headings.
  </p>
</div>
```

## Recommendations

* Pair font weights with font files that are actually loaded on the site.
* Use heavier weights for small UI labels and lighter weights only when contrast and size support them.
* Keep most pages to two or three weight choices for a cleaner voice.

<Tip>
  Combine `.font-semibold` with `.text-3xl` or `.text-4xl` for marketing headlines. The bundled text scale already handles responsive sizing behavior where it ships.
</Tip>