gray-value
Even colour,
line by line.
Compositors call it colour — the aggregate grey of a text block. When some lines are denser than others, the paragraph looks uneven. Gray Value measures ink pixel density per line using Canvas and adjusts letter-spacing until the paragraph has even colour throughout.
Live demo
The colour of a page — the compositor's term for the aggregate grey of the text block — is determined by the ratio of ink to space across every line. A line with many narrow letters sits lighter than one with wide letters and generous spacing. Print compositors corrected this by hand, adjusting word spaces to equalise the grey. No web tool has automated this measurement. Gray Value uses Canvas to sample the actual ink pixels in each rendered line, then adjusts letter-spacing to bring every line to the same optical density. The adjustment is invisible when correct — all you notice is that the paragraph looks even.
Each line is measured by pixel density and adjusted by ±0.050em via letter-spacing.
How it works
Canvas pixel sampling
Each line of text is rendered to an off-screen Canvas at the correct font size and weight. The pixel data is read and ink pixels are counted. The ratio of ink to total pixels gives the line's optical density.
Per-line spacing correction
The average density across all lines becomes the target. Each line gets a letter-spacing adjustment proportional to its deviation from the target, clamped to the maxAdjustment limit. The correction is re-run on resize.
Usage
Drop-in component
import { GrayValueText } from '@liiift-studio/gray-value'
<GrayValueText maxAdjustment={0.05} calibrationFactor={2}>
Your paragraph text here...
</GrayValueText>Options
| Option | Default | Description |
|---|---|---|
| targetDensity | 'auto' | Target density ratio (0–1). 'auto' uses the average of all lines. |
| method | 'letter-spacing' | CSS property to adjust: 'letter-spacing' or 'word-spacing'. |
| maxAdjustment | 0.05 | Max spacing correction in em units. |
| calibrationFactor | 2.0 | Strength of the correction. Higher = more aggressive. |