How the Scoring System Works

The spacing visualization measures how well each line of justified text is spaced. Here’s how to read it.

1. The Per-Line Bars

When text is justified, the browser (or the Knuth-Plass algorithm) stretches or compresses the spaces between words so each line fills the full column width. Some lines need a lot of extra space; others need very little. The bars visualize this.

For each line, we measure how much the word spacing deviates from the font’s natural space width — the width of a normal space character. We express this as a ratio:

A ratio of 0 means the spacing is exactly natural. +0.30 means words are 30% more spread out. −0.15 means they’re 15% more compressed.

Example: Per-line spacing bars
Line 1
+5.3%
Line 2
+16.5%
Line 3
−8.7%
Line 4
+2.1%
Line 5
−4.0%
Loose (extra space)
Tight (compressed)

The vertical stem line represents ideal spacing (ratio = 0). Each bar extends to the right for loose lines or to the left for tight lines. Longer bars = worse spacing on that line.

If a bar hits the maximum display width, it gets a gradient treatment to signal that the actual deviation is even larger than what’s shown.

2. The Spacing Score

Below each paragraph’s bars, you’ll see a line like:

Example: Spacing score comparison
KP σ 4.2% vs CSS σ 11.8% +64.4%

The σ (sigma) is the standard deviation of the spacing ratios across all lines in the paragraph. Think of it as “how inconsistent is the spacing?”

If every line had exactly the same spacing, σ would be 0. The more the line-to-line spacing jumps around, the higher σ gets. A lower σ means the paragraph looks more evenly set.

The percentage at the end tells you how much Knuth-Plass improved (or worsened) the consistency compared to CSS. A green +64% means KP’s spacing is 64% more consistent than the browser’s default justification.

3. The Aggregate Score

At the top of each column, a large number summarizes the overall justification quality across all paragraphs. This is the average demerits per line, a penalty system borrowed from Donald Knuth’s TeX typesetting engine.

How demerits are calculated
1 Take each line’s spacing ratio (same number the bars show).
2 Compute the badness: cube the ratio and multiply by 100. Small deviations produce tiny badness; large deviations blow up fast. badness = 100 × |ratio|³
3 Square (1 + badness) to get the line’s demerits. This makes bad lines disproportionately expensive. demerits = (1 + badness)²
4 Add penalty bonuses for ugly situations: two consecutive hyphenated lines, or a very tight line sitting next to a very loose one.
5 Sum up the demerits for all lines in the paragraph. That’s the paragraph’s total score.

The key idea: demerits are non-linear. A line that’s slightly loose (say, +5%) costs almost nothing. But a line that’s very loose (+40%) costs thousands of times more. This matches how our eyes work — we barely notice small spacing differences, but a single badly spaced line ruins a whole paragraph.

Column aggregate: averaging across paragraphs
Knuth-Plass
Para 1: 840d / 12 lines
Para 2: 620d / 9 lines
Para 3: 510d / 8 lines
1,970d / 29 lines = 67.9

The column badge takes the total demerits from every paragraph and divides by the total number of lines. Last lines are excluded since they’re ragged (not justified) and shouldn’t be penalized. The Lower the score, the better. A score under 10 means the spacing is excellent throughout. Scores in the hundreds or thousands indicate noticeable problems.