v145 · CSS · Headline Tuner
Headline tuner
Cycle through display sizes — pull-quote, headline, body — and watch the same letter-spacing and word-spacing percentages stay proportional. The whole point of percentage values: tracking that scales with the type.
controls
letter-spacing: 0%; word-spacing: 0%; font-size: 40px;
The quick brown fox jumps over the lazy dog.
code
/* Chrome 145: % values resolve against font-size. */
.display { font-size: 56px; letter-spacing: -1.5%; }
.headline { font-size: 40px; letter-spacing: -1%; }
.subhead { font-size: 22px; letter-spacing: 0%; }
.body { font-size: 16px; letter-spacing: 0.5%; }
.spaced-out { word-spacing: 25%; } /* 25% of font-size */