# Medium Heading Weight

**SHOULD** · **ID:** `content-heading-weight` · **Category:** content
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-heading-weight

> SHOULD: Give medium-sized headings a `font-weight` of 500–600; 800–900 reads heavy and disconnected from body text.

Medium-sized headings look best with font weight between 500-600

Very bold weights (800-900) on medium-sized headings can feel heavy and disconnected from body text. Weights of 500-600 create clear hierarchy while maintaining visual balance with surrounding content.

## Bad — do not do this

`content-heading-weight-bad`

```tsx
export function HeadingWeightBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <h2 className="text-xl font-black text-foreground">Section Title</h2>
        <h3 className="text-lg font-extrabold text-foreground">Subsection Title</h3>
        <p className="text-sm text-muted-foreground">Content below the heavy headings feels disconnected from the overly bold titles above.</p>
      </div>
      <p className="text-xs text-error">Font weight 800-900 on headings — too heavy for medium-sized text</p>
    </div>
  );
}
```

## Good — do this

`content-heading-weight-good`

```tsx
export function HeadingWeightGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <h2 className="text-xl font-semibold text-foreground">Section Title</h2>
        <h3 className="text-lg font-medium text-foreground">Subsection Title</h3>
        <p className="text-sm text-muted-foreground">Content below the headings feels balanced and connected with the appropriate weight titles above.</p>
      </div>
      <p className="text-xs text-success">Font weight 500-600 for medium headings — balanced hierarchy</p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)