Typography comparisons
7 old vs modern typography CSS techniques, side by side.
Browser compatibility:
Vertical text centering without padding hacks
Limited availability Old
.btn { display: inline-flex; align-items: center; padding: 10px 20px; padding-top: 8px;} Modern
.btn { padding: 10px 20px; text-box: trim-both cap alphabetic;}Multiline text truncation without JavaScript
Widely available Old
/* JS: slice text, append '...'. *//* or measure via getComputedStyle. Breaks on resize. */.card-title { overflow: hidden; text-overflow: ellipsis;}/* Older: -webkit-line-clamp + -webkit-box-orient */ Modern
.card-title { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;}/* Standard; -webkit- prefix still needed. */Drop caps without float hacks
Limited availability Old
.drop-cap::first-letter { float: left; font-size: 3em; line-height: 1; margin-right: 8px;} Modern
.drop-cap::first-letter { -webkit-initial-letter: 3; initial-letter: 3;}/* Standard; -webkit- prefix needed for Safari. */Balanced headlines without manual line breaks
Newly available Old
/* HTML: manual <br> or wrapper for JS */h1 { text-align: center; max-width: 40ch; /* Balance-Text.js: script + init */ /* or insert <br> in CMS/HTML */} Modern
h1, h2 { text-wrap: balance; max-width: 40ch;}Font loading without invisible text
Widely available Old
@font-face { font-family: "MyFont"; src: url("MyFont.woff2");} Modern
@font-face { font-family: "MyFont"; src: url("MyFont.woff2"); font-display: swap;}Multiple font weights without multiple files
Widely available Old
@font-face { font-family: "MyFont"; src: url("MyFont-Regular.woff2"); font-weight: 400;}@font-face { font-weight: 700; ...}@font-face { font-weight: 600; ...} Modern
@font-face { font-family: "MyVar"; src: url("MyVar.woff2"); font-weight: 100 900;}Fluid typography without media queries
Widely available Old
h1 { font-size: 1rem;}@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);}