Headlines that break in the right place

There is a flaw you see on almost every website and almost nobody names: the two-line headline whose second line holds a single word. One full line, then “work” on its own underneath. In newspaper typography this fault has a name and a proofreader picks it up. On a website it stayed unsolved for twenty years, because where a headline breaks depends on the width of the screen, so it cannot be settled once and for all.

A visitor will not be able to say what is wrong. They will simply feel that the page is less carefully made, the way you sense that a shop window was put together in a hurry. It is the kind of detail that never decides an order, and yet weighs on the overall impression.

Two settings, two situations

Recent browsers can deal with the problem in two ways, depending on the length of the text.

For what is short, headlines, standfirsts, captions, quotations, the browser spreads the text over lines of similar length, instead of filling the first to the edge and dropping the rest. A six-word headline on two lines therefore breaks three and three, not five and one. The trade-off is deliberate: beyond a few lines the browser gives up, which guarantees that the setting never slows down a long text.

For what is long, paragraphs, it watches the ending: it looks further ahead before deciding where to break, and arranges the last lines so that none is left looking silly. The paragraph that ends on a lone word, which typographers call a runt, almost always disappears.

What this changes at the workshop

We apply the first setting to all headlines, standfirsts and quotations, and the second to running text. This replaces a practice we shared with everyone else, and one that deserves to be named: placing a non-breaking space by hand between the last two words of a headline to force the break. It works, at one screen width, the one you were looking at while doing it. At every other width, it merely moves the problem by one word.

For a client the benefit is twofold. The text is set with care everywhere, on an office computer as on a phone, without anyone having to check every screen. And there is nothing to maintain: when the client edits a headline in two years, the break corrects itself, whereas a hand-made fix would fall badly again.

What happens on an old browser

A browser that does not know these settings breaks the headline as before. Nobody sees a broken page, some see a better-set one. This is the rule we apply to every improvement: it must never make the page worse for those who do not receive it.

The same logic applies to effects that accompany scrolling: a browser setting rather than one more tool.

A typesetting flaw that used to be corrected by hand on one screen, and is now corrected on all of them. We do not write here about advances that make the headlines: we write about those that remove work, for the client as for us. To see these refinements applied to whole typographic directions, the style page shows them live, and the pricing page says what a site set this way costs.