# Minimum Font Weight 400

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

> NEVER: Use font weights below 400 — thin and light weights (100–300) hurt readability on low-DPI screens and for low-vision users.

Font weights below 400 should not be used — they reduce readability

Thin and light font weights (100-300) can be difficult to read, especially on low-resolution screens, small sizes, or for users with visual impairments. Stick to regular (400) and above for body text and UI elements.

## Bad — do not do this

`content-min-font-weight-bad`

```tsx
export function MinFontWeightBad() {
  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">
        <h3 className="text-lg font-thin text-foreground">Account Settings</h3>
        <p className="text-sm font-extralight text-muted-foreground">Manage your profile, security preferences, and notification settings.</p>
        <div className="flex gap-3">
          <button className="px-3 py-1.5 text-sm font-light border border-border rounded text-foreground">Cancel</button>
          <button className="px-3 py-1.5 text-sm font-light bg-primary text-primary-foreground rounded">Save</button>
        </div>
      </div>
      <p className="text-xs text-error">Font weights below 400 — poor readability, especially on low-res screens</p>
    </div>
  );
}
```

## Good — do this

`content-min-font-weight-good`

```tsx
export function MinFontWeightGood() {
  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">
        <h3 className="text-lg font-semibold text-foreground">Account Settings</h3>
        <p className="text-sm font-normal text-muted-foreground">Manage your profile, security preferences, and notification settings.</p>
        <div className="flex gap-3">
          <button className="px-3 py-1.5 text-sm font-medium border border-border rounded text-foreground">Cancel</button>
          <button className="px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded">Save</button>
        </div>
      </div>
      <p className="text-xs text-success">Font weight ≥400 — clear and readable everywhere</p>
    </div>
  );
}
```

## References

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