Cascade FallsISSUE #26 of 33

text · transform · spacing · shadow

StylaVSThe Specificity Sphinx

Styla saystext-transform, letter-spacing, line-height, and text-shadow refine typography.

text-transform upper/lower/capitalizes without changing the HTML; letter-spacing tracks characters apart; line-height sets leading (use a unitless number like 1.6); text-shadow adds glow or depth. These small dials make type feel designed.

Power-ups you unlock

text-transform changes case visually only
letter-spacing tracks characters
line-height: use a unitless multiplier (1.6)
text-shadow adds glow/depth

The Specificity Sphinx attacks — common mistakes

Unitless vs px line-height confusion (prefer unitless)
Heavy letter-spacing on body text (hurts reading)
Over-using text-shadow into illegibility

Boss battleMake an uppercase, letter-spaced label and set 1.7 line-height on a paragraph.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>.label{text-transform:uppercase;letter-spacing:.2em;color:#b388ff;font-size:11px}p{line-height:1.7;color:#e6e0ff}</style></head><body style="background:#06040d;padding:20px"><div class="label">section</div><p>comfortable leading makes text readable across multiple lines.</p></body></html>

▶ Open the interactive comic issue

‹ Text · Color · Alignment · Decoration Fonts · Family · Size · Weight · Style ›