CSS Typography

Font loading, text effects, vertical rhythm, and typographic scales.

Overview

Good typography improves readability and user experience.

Key Concepts

• Font Loading — @font-face, font-display
• Line Height — Vertical rhythm
• Letter Spacing — Text readability
• Text Effects — Shadows, gradients, clipping
• Typographic Scale — Harmonious sizes

Code Examples

/* Font loading */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

/* Typographic scale */
:root {
  --step--2: clamp(0.69rem, 0.66rem + 0.18vw, 0.8rem);
  --step--1: clamp(0.83rem, 0.78rem + 0.29vw, 1rem);
  --step-0: clamp(1rem, 0.91rem + 0.43vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.07rem + 0.63vw, 1.56rem);
  --step-2: clamp(1.44rem, 1.26rem + 0.89vw, 1.95rem);
  --step-3: clamp(1.73rem, 1.48rem + 1.23vw, 2.44rem);
  --step-4: clamp(2.07rem, 1.74rem + 1.67vw, 3.05rem);
}

body {
  font-size: var(--step-0);
  line-height: 1.6;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

/* Vertical rhythm */
.prose {
  --baseline: 1.5rem;
}

.prose > * + * {
  margin-block-start: var(--baseline);
}

.prose > h1 + p {
  margin-block-start: calc(var(--baseline) * 0.5);
}

/* Text effects */
.text-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.text-outline {
  -webkit-text-stroke: 1px #000;
  color: transparent;
}

/* Truncation */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive type */
.fluid-type {
  font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

/* Font features */
.featured-text {
  font-feature-settings: 'liga' 1, 'kern' 1, 'calt' 1;
  font-variant-ligatures: common-ligatures;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.small-caps {
  font-variant-caps: small-caps;
  letter-spacing: 0.05em;
}

Practice

Build a typographic scale system with fluid typography.