Typography Foundations

Installation
SKILL.md

Measure, leading, and the reading engine

  • Measure = characters per line, the single biggest readability lever. English body: 45-75 chars, sweet spot ~66. CJK: 20-40 chars (each glyph carries more meaning). Mobile effective measure after padding: 30-40 chars is fine, narrower than print tolerates.
  • Print tolerates a wider measure than screen: screen reading runs ~20-25% slower than print at equal measure, so screen body sits in the lower half (45-60), print can push to 75-90 in two-column work.
  • Leading and measure are inversely coupled: a longer line needs more leading because the eye must track further back to the next line's start. A 75-char line at 1.3 reads cramped; bump to 1.45-1.5.
  • Leading and x-height are inversely coupled: tall x-height faces (Inter, Söhne) need more leading than low x-height faces (Georgia, Caslon) at the same size. Two faces at 16px can need 1.4 vs 1.6 to read the same.
  • Leading bands: display 0.9-1.1; headings 1.1-1.2; body 1.2-1.5 (screen leans 1.4-1.6, print 1.2-1.3); long-measure body +0.1.
  • A line-height in px is a bug: it does not scale with font-size, so nested smaller text inherits the parent's gap. Use unitless (1.5) or em (1.5em), never 24px.
  • Body below 14px on screen is a legibility tax: hinting and subpixel rendering degrade below 16px on non-HiDPI. 16px is the screen body floor for content you read, not glance.
  • Inheriting 1.5 into a 48px heading gives 72px line spacing and blows the rhythm: set line-height unitless on the body and reset per heading element.

Tracking and optical sizes

  • Tracking direction flips by case: lowercase display wants negative (-10 to -30 / 1000 em), caps want positive (+50 to +100). Tightening caps closes the optical gaps uppercase creates; tightening lowercase display removes air that looks elegant at 12pt and anemic at 120pt.
  • Tracking is scale-dependent: the same -20 / 1000 em reads as tight at 120pt and invisible at 12pt. That is why optical-size axes exist: they interpolate tracking, x-height, and contrast together. Hand-tuning tracking across a size range without opsz is manual work the axis does for free.
  • CSS letter-spacing in px does not scale with font-size: -0.5px is huge at 12px and nothing at 120px. Use em (-0.02em) so it tracks the size.
  • Small body (sub-14pt) often needs +5 to +15 tracking to open counters that subpixel rendering clogs. Negative tracking on small body closes counters and drops legibility; the tracking-tight class on body is a frequent culprit.
  • Body tracking at 0 to -5 / 1000 em is the flat zone; past -10 at body sizes you fight the type designer's spacing. Trust the built-in spacing for body, override only at display sizes.
  • word-spacing is the lever nobody pulls: +5 to +10 / 1000 em loosens long-measure ragged text without touching letter spacing; justified text reads denser when word-spacing tightens.
Installs
–
Repository
clawic/skills
GitHub Stars
21
First Seen
–