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

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 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 (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 (lines 22-27)【Apple Design – Typography】.

/* 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:

<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:

/* 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 (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.

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:

: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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}