CSS Typography, Web Fonts & Legibility

1. High-Performance System Font Stacks

A font stack is a prioritized, comma-separated list of fonts. The browser scans the list from left to right, rendering the first typeface installed on the client machine:

/* Modern Native System UI Font Stack */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

Why use system font stacks? They load with 0ms latency (zero network requests), render with native operating system fidelity, and eliminate font layout shift entirely.

2. Web Font Loading Performance & font-display

When loading custom web fonts via @font-face, web performance hinges on the font-display descriptor:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900; /* Variable font weight range! */
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153; /* Subset Latin glyphs */
}

3. The Golden Rule of Unitless Line-Height

Always declare line-height as a pure number without units (e.g. 1.5, 1.6), never in pixels or percentages!

/* Unitless line-height scaling properly across elements */
.prose-container {
  font-family: system-ui, sans-serif;
  line-height: 1.6; /* Unitless multiplier */
  max-width: 60ch;   /* Accessible reading measure */
  background: #fdfdfd;
  padding: 16px;
  border-left: 4px solid #3b82f6;
}

.prose-container h3 {
  font-size: 28px;
  margin-top: 0;
}

.prose-container p {
  font-size: 16px;
  color: #475569;
}

4. Text Truncation: Single-Line & Multi-Line Clamp

Preventing long text strings from destroying card layouts:

A. Single-Line Ellipsis Truncation:

.truncate-single {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

B. Multi-Line Clamp (3-Line Truncation):

/* Multi-line truncation with line-clamp */
.clamp-three-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* Truncate after 2 lines! */
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
  color: #334155;
  background: #f1f5f9;
  padding: 12px;
  border-radius: 6px;
  max-width: 320px;
}

5. Frequently Asked Questions (FAQ)