# Typography Best Practices for Tracking and Leading at Different Font Sizes: A CSS Implementation Guide

> Master typography with CSS tracking and leading best practices. Learn to adjust spacing for different font sizes to ensure optimal readability and visual appeal across your designs.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: best-practices
- Published: 2026-08-05

---

**Use negative tracking with tight leading for large display text, and positive tracking with looser leading for body copy to maintain visual density and readability across your typographic hierarchy.**

The **Apple Design** skill in [`emilkowalski/skills`](https://github.com/emilkowalski/skills) provides a battle-tested, size-aware typographic system you can adapt for any web interface. According to the source code in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) (lines 18-27)【Apple Design – Typography】, effective typography requires tracking and leading values that scale inversely with font size—tighter at large sizes, looser at small sizes.

## Why Tracking and Leading Must Vary by Font Size

Static `letter-spacing` and `line-height` values break down across a typographic scale. The same `0.5px` tracking that looks crisp on a 14px button label will feel cramped on 48px headlines, while generous `1.6` line-height suited for body text creates unsightly gaps in display type.

The repository codifies three principles:

- **Tracking is size-specific**: Large type needs negative tracking to prevent letterform separation; small type benefits from slight positive tracking for clarity
- **Leading varies inversely with size**: Proportionally tighter line-height for headlines, expanded for body copy
- **Scale the entire system**: Use relative units so user preferences (OS Dynamic Type, browser zoom) preserve your hierarchy

## Implementing Size-Specific Tracking and Leading

The CSS below demonstrates the exact implementation pattern found in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) (lines 22-27)【Apple Design – Typography】.

```css
/* Base foundation: system UI font with intrinsic optical sizing */
:root {
  --font-base: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Display/hero text: tight leading, negative tracking */
.display {
  font-family: var(--font-base);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}

/* Body text: comfortable leading, neutral-to-positive tracking */
.body {
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Small UI labels: moderate tightness, slight compensation */
.label {
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.015em;
}

```

### Key Implementation Details

| Element | Size Approach | `line-height` | `letter-spacing` | Rationale |
|---------|-------------|-------------|----------------|-----------|
| **Display** | `clamp(2rem, 5vw, 4rem)` | `1.05` | `-0.02em` | Prevents loose, "floating" large type |
| **Body** | `1rem` (scales with root) | `1.5` | `0.01em` | WCAG-aligned readability |
| **Label** | `0.875rem` | `1.3` | `0.015em` | Compensates for reduced size with slight expansion |

## Practical Usage Example

Apply these classes in your markup:

```html
<h1 class="display">Product Design System</h1>
<p class="body">Our typography follows Apple's optical sizing guidelines, ensuring your interface feels native across iOS, macOS, and web platforms.</p>
<span class="label">Learn more</span>

```

## Respecting User Text Preferences

The repository emphasizes accessibility through relative units. Never use fixed pixels that break when users increase system font size:

```css
/* Let the browser respect OS Dynamic Type */
html {
  font-size: 100%;
}

/* Avoid this anti-pattern */
html {
  font-size: 16px; /* Breaks user scaling */
}

```

## Summary

- **Tracking and leading must be size-specific**—negative tracking and tight leading for large text, positive tracking and looser leading for small text
- **Use `clamp()` for fluid display sizes** that adapt to viewport without breakpoints
- **Express all values in `rem` or `em`** to maintain hierarchy when users change root font size
- **Reference [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md)** (lines 18-27) for the authoritative guidance from the **Skills** repository

## Frequently Asked Questions

### What is the ideal letter-spacing for headlines versus body text?

Headlines 32px and larger should use `-0.02em` to `-0.04em` tracking to maintain visual density. Body text at 16px benefits from `0em` to `0.02em`—either neutral or slightly positive—to preserve letterform distinction at small sizes, as specified in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md).

### Why does line-height need to decrease as font size increases?

Mathematically, the same ratio creates physically larger gaps between lines at bigger sizes. A `1.5` line-height on 48px text yields 72px line boxes—excessive white space that disrupts vertical rhythm. Tightening to `1.05`–`1.2` keeps large type cohesive without collision.

### How do I implement this with CSS custom properties?

Define scale variables in `:root` so adjustments propagate globally:

```css
:root {
  --tracking-display: -0.02em;
  --tracking-body: 0.01em;
  --leading-display: 1.05;
  --leading-body: 1.5;
}

```

Then reference these in your component classes for maintainable, systematic typography.