Typography comparisons
7 old vs modern typography CSS techniques, side by side.
Browser compatibility:
Typography
Beginner
Vertical text centering without padding hacks
Old
.btn {
padding: 10px 20px;
/* looks off-center, tweak top/bottom */
padding-top: 8px; /* hack */
}
padding: 10px 20px;
/* looks off-center, tweak top/bottom */
padding-top: 8px; /* hack */
}
Modern
h1, button {
text-box: trim-both cap alphabetic;
}
/* true optical centering */
see modern →
text-box: trim-both cap alphabetic;
}
/* true optical centering */
Typography
Beginner
Multiline text truncation without JavaScript
Old
/* JS: slice text by chars/words, add "..." */
.card-title { overflow: hidden; }
.card-title { overflow: hidden; }
Modern
.card-title {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
}
see modern →
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
}
Typography
Beginner
Drop caps without float hacks
Old
.drop-cap::first-letter {
float: left;
font-size: 3em; line-height: 1;
}
float: left;
font-size: 3em; line-height: 1;
}
Modern
.drop-cap::first-letter {
-webkit-initial-letter: 3;
initial-letter: 3;
}
see modern →
-webkit-initial-letter: 3;
initial-letter: 3;
}
Typography
Beginner
Balanced headlines without manual line breaks
Old
// manual <br> or Balance-Text.js
h1 { text-align: center; }
.balance-text /* JS lib */
h1 { text-align: center; }
.balance-text /* JS lib */
Modern
h1, h2 {
text-wrap: balance;
}
/* no br or JS */
see modern →
text-wrap: balance;
}
/* no br or JS */
Typography
Beginner
Font loading without invisible text
Old
@font-face { ... }
/* Default: invisible text until load */
/* Default: invisible text until load */
Modern
@font-face {
font-family: "MyFont";
font-display: swap;
}
see modern →
font-family: "MyFont";
font-display: swap;
}
Typography
Intermediate
Multiple font weights without multiple files
Old
@font-face { font-weight: 400; }
@font-face { font-weight: 700; }
/* 4+ files */
@font-face { font-weight: 700; }
/* 4+ files */
Modern
@font-face {
font-family: "MyVar";
src: url("MyVar.woff2");
font-weight: 100 900;
}
see modern →
font-family: "MyVar";
src: url("MyVar.woff2");
font-weight: 100 900;
}
Typography
Intermediate
Fluid typography without media queries
Old
h1 { font-size: 1rem; }
@media (min-width: 600px) { h1 { font-size: 1.5rem; } }
@media (min-width: 900px) { h1 { font-size: 2rem; } }
@media (min-width: 600px) { h1 { font-size: 1.5rem; } }
@media (min-width: 900px) { h1 { font-size: 2rem; } }
Modern
h1 {
font-size: clamp(1rem, 2.5vw, 2rem);
}
see modern →
font-size: clamp(1rem, 2.5vw, 2rem);
}