text-wrap: balance heading

Quick implementation

/* Apply to headings only */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Note: Do not use on paragraphs. 
   It can cause readability issues with long text blocks. */

Prompt this to your LLM

Includes role, constraints, and framework variants.

Role: Typographer / Frontend Engineer.

Goal: Eliminate heading orphans using text-wrap: balance.

Constraints:
1. Apply ONLY to h1-h6 elements, never paragraphs.
2. Max 6 lines per spec to prevent performance hits.
3. Use oklch() for all color values.
4. Provide fallback for older browsers (text-wrap: auto).
5. Ensure performance is acceptable on long text.

Variants:
A) Global: Apply to all headings via CSS reset.
B) Utility: Create a .balance-text class for specific use.

Edge Cases:
1. Browser support (check Can I Use).
2. Performance on very long headings.
3. RTL text direction compatibility.

Why this matters in 2026

The text-wrap: balance property is a 2023 addition to Baseline that eliminates the cardinal sin of typography — the orphan word on the last line. Browsers use a binary search algorithm to find the optimal line break. In 2026, we are moving away from manual <br> tags or complex JavaScript libraries to fix typography. This is a native, zero-cost solution for better readability.

The logic

The logic is simple: one property, and the browser handles it. By setting text-wrap: balance, the browser attempts to distribute the text evenly across lines. It is computationally expensive for long text, which is why the spec limits it to 4–6 lines. This makes it perfect for headings but unsuitable for body copy.

Accessibility & performance

Accessibility is unaffected; screen readers read the text exactly the same regardless of line breaks. Performance is excellent because the browser handles the calculation efficiently. The spec limits the algorithm to short text blocks (headings) to prevent excessive computation on large paragraphs.