Typography comparisons

Typography

Beginner

Vertical text centering without padding hacks

Modern h1, button {
  text-box: trim-both cap alphabetic;
}
/* true optical centering */

Old .btn {
  padding: 10px 20px;
  /* looks off-center, tweak top/bottom */
  padding-top: 8px; /* hack */
}

hover to see old →

85% →

Typography

Beginner

Multiline text truncation without JavaScript

Modern .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

Old /* JS: slice text by chars/words, add "..." */
.card-title { overflow: hidden; }

hover to see old →

96% →

Typography

Beginner

Drop caps without float hacks

Modern .drop-cap::first-letter {
  initial-letter: 3;
}

Old .drop-cap::first-letter {
  float: left;
  font-size: 3em; line-height: 1;
}

hover to see old →

82% →

Typography

Beginner

Balanced headlines without manual line breaks

Modern h1, h2 {
  text-wrap: balance;
}
/* no br or JS */

Old // manual <br> or Balance-Text.js
h1 { text-align: center; }
.balance-text /* JS lib */

hover to see old →

90% →

Typography

Beginner

Font loading without invisible text

Modern @font-face {
  font-family: "MyFont";
  font-display: swap;
}

Old @font-face { ... }
/* Default: invisible text until load */

hover to see old →

97% →

Typography

Intermediate

Multiple font weights without multiple files

Modern @font-face {
  font-family: "MyVar";
  src: url("MyVar.woff2");
  font-weight: 100 900;
}

Old @font-face { font-weight: 400; }
@font-face { font-weight: 700; }
/* 4+ files */

hover to see old →

96% →

Typography

Intermediate

Fluid typography without media queries

Modern h1 {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

Old h1 { font-size: 1rem; }
@media (min-width: 600px) { h1 { font-size: 1.5rem; } }
@media (min-width: 900px) { h1 { font-size: 2rem; } }

hover to see old →

96% →