v145 · css
Branding Playground
Set letter-spacing and word-spacing as percentages for a brand headline. The scale ladder below shows the same percentage renders proportionally at every size — one rule covers your entire type hierarchy.
Feature detection: checking…
HORIZON
beyond the edge
letter-spacing 8%
word-spacing 0%
font-size 2.5rem
transform
Same percentage — proportional at every size
/* % letter-spacing scales with font-size automatically */
.headline {
font-size: 3rem;
letter-spacing: 8%; /* 8% of the space character width */
}
.tagline {
font-size: 1rem;
letter-spacing: 8%; /* same rule — visually proportional */
}
/* Tighter tracking for dense body copy */
.body-text { letter-spacing: -1%; }