To diagnose uneven spacing in justified browser text on a Mac, first switch the paragraph to start alignment. Then test spacing rules, line breaks, column width, and font loading one at a time. This sequence helps identify which change actually improves the paragraph.

This guide is for someone inspecting an ordinary browser page, such as an abstract catalog with a narrow description column. The task is to explain unusually wide word gaps and choose a practical correction. All sample labels and dimensions below are synthetic.

What uneven spacing can tell you

Justification distributes available space within a line to fill its line box. Different lines contain different words and different opportunities for expansion, so their gaps need not match. W3C also leaves browsers latitude in their justification algorithms; identical CSS does not prescribe identical spacing in every browser. CSS Text Module Level 3

Separate two observations before changing anything. If most gaps on one line are wider than those on the next, investigate the line’s available width and wrapping choices. If one particular gap looks exceptional, also inspect the text and styling around that boundary. These are diagnostic starting points, not proof of a particular cause.

A simple calculation explains why sparse lines deserve attention. Suppose a line has an available width of 480 CSS pixels and its content occupies 420 pixels before justification. In an illustrative model that distributes the remaining 60 pixels equally across six eligible spaces, each gains 10 pixels. With only three eligible spaces and the same remaining width, each gains 20 pixels. These are calculated examples, not browser measurements or a universal rendering formula.

The practical implication is to inspect the words that landed on the line before trying to tune the gaps themselves. A line with few expansion opportunities can expose a wrapping problem that a global spacing adjustment will not resolve.

Start with one controlled comparison on your Mac

Choose one affected paragraph and record the browser version, page zoom, approximate column width, and exact text. Keep those conditions steady while comparing changes. For a neutral test paragraph, use: “Panel amber contains round tiles. Panel silver contains square tiles. Each panel includes a short label and a plain description.”

In Chrome, Control-click the paragraph and choose Inspect. Alternatively, open developer tools with Command–Option–I, then select the relevant element. Browser developer tools let you inspect the current document and preview HTML and CSS changes locally. What are browser developer tools?

Select the paragraph’s containing block, rather than just a word inside an inline element. In Chrome’s Elements panel, examine both Styles and Computed. The former includes applicable declarations, including overridden ones; the latter helps identify the values actually applied. Use the property filter to locate each setting. CSS features reference

Record text-align, text-align-last, word-spacing, letter-spacing, white-space, hyphens, font-family, and font-size. Also note the paragraph’s content width. This creates a small comparison record: original condition, one change, observed result.

Temporarily set text-align: start and text-align-last: start on the paragraph. If the wide gaps disappear, justification contributes to the symptom. If the gaps remain, continue with explicit spacing and whitespace checks. Restore the original alignment before the next independent test. DevTools supports toggling declarations and editing values for live previews. What are browser developer tools?

Check explicit spacing and preserved whitespace

With start alignment active, test word-spacing: normal. MDN defines this as the normal spacing determined by the font or browser; a length value adds spacing to the font’s intrinsic word spacing. A positive inherited value can therefore be relevant even before justification is applied. word-spacing CSS property

Inspect the parent and any styled inline children if only part of the paragraph changes. Test existing letter-spacing separately rather than resetting every typography property together. When two settings change at once, an improved result does not tell you which one mattered.

Next inspect white-space. Under normal, ordinary whitespace sequences collapse and text wraps as needed. Under pre-wrap, whitespace sequences and source newlines are preserved while wrapping remains possible. Under pre-line, spaces collapse but source newlines still create breaks. Those differences can change what appears to be a spacing defect. white-space CSS property

For an ordinary flowing description, temporarily test white-space: normal. If the result improves, inspect the original text and whitespace rule before choosing a permanent edit. Keep meaningful formatting intact: a preformatted sample and a prose description have different requirements. The test identifies an input to layout; it does not establish that all preserved whitespace should be removed.

Investigate short lines, forced breaks, and column width

Is the final line being stretched?

Inspect text-align-last when a short closing line has unusually large gaps. This property controls both the last line of a block and a line immediately before a forced break. With text-align: justify, its default auto behavior aligns those lines to the start; an explicit justify value stretches them. Test text-align-last: start to isolate this condition. text-align-last CSS property

Look for a br element at the affected break. WHATWG defines it as a content line break and says it should be used when the break belongs to the content. For an ordinary flowing description, review a break inserted solely to reproduce one desktop arrangement; let wrapping determine the line ending when that is the intended behavior. HTML Standard: The br element

Does the problem follow a narrow column?

Restore justification and change only the paragraph’s available width. Try a modestly wider column, then a narrower one, keeping the text and font unchanged. Record which words move between lines and whether the conspicuous gaps move with them.

Treat this as a decision test. If a wider column produces more satisfactory line endings, adjust the layout where space permits. If the description must remain narrow and several lines still look sparse, start alignment is a practical alternative. Avoid selecting a width solely because one sample paragraph happens to fit neatly.

Would hyphenation provide useful break opportunities?

For English prose, test hyphens: auto after confirming that the paragraph has the correct lang value, such as en, on itself or an ancestor. Automatic hyphenation depends on the language being tagged and an appropriate dictionary being available. A lack of visible hyphens alone does not prove that the CSS declaration failed. hyphens CSS property

Use ordinary words in this test rather than invented unbroken identifiers. Check the whole paragraph afterward: the useful outcome is a better set of line endings, not simply the appearance of a hyphen. If automatic hyphenation does not improve the target browser’s result, retain the width or alignment solution that did.

Separate font changes from browser justification

If line endings change after the page first appears, investigate font loading before comparing screenshots. The CSS Font Loading API provides document.fonts.ready, a promise that resolves after font loading and associated layout have completed. It provides a useful synchronization point for measurements, although later page changes can still require another comparison. CSS Font Loading API

For a visual test, compare the original paragraph with a temporary font-family: system-ui setting while holding width and font size steady. Treat any improvement as evidence that the font choice affects this layout, not as proof that the original font is defective. In Firefox or Safari, the inspector’s Fonts view can help examine the fonts applied to the selected element. What are browser developer tools?

Keep the shaping boundary clear. HarfBuzz shapes runs of text with shared properties into positioned glyphs. Its documentation explicitly excludes paragraph line breaking, hyphenation, and justification. Consequently, changing a HarfBuzz setting is not a general browser CSS remedy for stretched word gaps. What HarfBuzz doesn’t do

For the same reason, do not build a replacement layout by measuring and positioning every character independently. That approach crosses into shaping and paragraph-layout work. For ordinary DOM text, continue diagnosing the browser’s layout inputs and preserve its text-rendering pipeline.

Choose the correction supported by your tests

Use this table to turn the observations into a focused next action. Each row is a diagnostic inference; confirm it by restoring the original condition and repeating the successful change.

Observation What to investigate next Candidate correction
Gaps remain with start alignment Explicit spacing and preserved whitespace Correct the relevant declaration or unintended text formatting
Only closing lines stretch Last-line alignment and forced breaks Use start alignment for those lines; review presentation-only breaks
Gaps move when words rewrap Column width and available break opportunities Adjust width, test hyphenation, or use start alignment
Layout changes during loading Font loading and the applied font Compare after fonts settle and resolve the font-related difference
A justification-method change has no effect Browser support and the applied declaration Use supported alignment and layout controls

Do not depend on text-justify: inter-word as a universal fix. MDN currently marks text-justify as having limited availability. Where supported, inter-word selects expansion at word boundaries, while auto lets the browser choose the method. Selecting word boundaries does not guarantee small gaps on a sparse line. text-justify CSS property

When that property is unsupported, use the supported path that your comparison established: change alignment, improve the available line width, correct unintended whitespace, or test language-aware hyphenation. Recheck the final choice in each target browser at comparable content widths. Browser differences alone do not establish a defect, because CSS does not specify one complete justification algorithm. CSS Text Module Level 3

Finish when you can explain the symptom with a repeatable comparison: the original paragraph produces the gap, one identified change improves it, and the result remains useful across the widths you need. Preserve that smallest effective correction in the page source if you maintain it; if you are only inspecting a public page, keep the observed values and reproduction steps as your deliverable.

Sources