Typography comparisons
8 old vs modern typography CSS techniques, side by side.
Browser compatibility:
CSS text-wrap-style: pretty for Long-Form Paragraphs
Newly available Old way
article p { text-wrap: wrap;}/* default browser line-breaking, single-word last lines stay Modern
article p { text-wrap: pretty;}/* no orphan words on the last lineVertically Center Text in CSS with text-box-trim
Limited availability Old way
.btn { display: inline-flex; align-items: center; padding: 10px 20px; padding-top: 8px;} Modern
.btn { padding: 10px 20px; text-box: trim-both cap alphabetic;}Truncate Text to N Lines in CSS with line-clamp
Widely available Old way
/* 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. */CSS Drop Caps with the initial-letter Property
Limited availability Old way
.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. */Balance Headlines in CSS with text-wrap: balance
Newly available Old way
/* 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-display: swap in CSS (Prevent Invisible Text)
Widely available Old way
@font-face { font-family: "MyFont"; src: url("MyFont.woff2");} Modern
@font-face { font-family: "MyFont"; src: url("MyFont.woff2"); font-display: swap;}Variable Fonts in CSS: One File, All Weights
Widely available Old way
@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 in CSS with clamp()
Widely available Old way
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);}