Use text-wrap: balance for H1 and H2 Headings

Balanced Headings in One Line of CSS

Marketing pages live and die by their H1. A headline that wraps as "Build accessible / interfaces" with one word on the second line looks amateurish; the same headline rendered as "Build / accessible interfaces" feels intentional. Before text-wrap: balance, designers reached for non-breaking spaces, manual <wbr> insertion, or JavaScript libraries like Adam Mordecai's Balance Text. None of those scaled to a CMS-driven site where copy changes weekly.

The CSS

h1, h2 {
  text-wrap: balance;
  max-width: 30ch; /* keep headings narrow */
}

How the algorithm works

Chrome's implementation uses a binary search over container widths. It starts with the natural max-width, computes the longest line, then progressively shrinks the effective width until every wrapped line fits within roughly the same width. The result is a heading whose lines are all close to the average line length — no widow, no orphan.

The 6-line cap

To keep the algorithm cheap, all major engines cap balance at six wrapped lines. Past that, the property is silently ignored. This is fine for headings (which are almost never six lines long) but means you should not rely on balance for body text.

Pair with line-height

Balance shines when paired with a tight line-height (1.1–1.25 for headings). Looser line-heights make the visual difference between balanced and unbalanced lines harder to perceive.