By Shehab Waleed, Founder, Cairo Studio 3 min read
Look at enough websites and one mistake starts to show up everywhere: a headline that fills its first line and leaves two words hanging underneath. Browsers break lines greedily. They fit as many words as possible on each line and push the rest down, so the last line gets whatever is left over.
We hold one rule for headlines, on pages, decks, posters and ads alike. The lines are even, or the lower line is slightly wider. Never a long line over a short one.
On pages, one line of CSS
h1, h2, h3 {
text-wrap: balance;
}With balance, the browser looks for breaks that make the lines similar in length instead of filling the first one. Current versions of Chrome, Safari and Firefox support it, and older browsers simply wrap the old way. It is the cheapest typographic improvement we know of.
It is not the whole answer. Balance only evens out widths. It does not know that a line ending on the or and reads badly, and it never changes the type size to find a better shape.
On share cards, we choose the breaks
Most pages on our site get their own share image, the card that appears when a link is pasted into WhatsApp or LinkedIn. The card is drawn on the server with the page title set large in our headline face, and there we can go further than balance.
The card tries every way of splitting the title into one to four lines. It measures each line with the real advance widths of our headline font, stored as a small JSON file, and throws out any split that breaks the rules. Trimmed from the real code:
const EVEN = 0.92;
const DANGLING =
/\s(a|an|the|and|or|of|for|to|in|on|at|with)$/i;
for (const lines of splits(words, n)) {
const w = lines.map(measure);
const uneven = w.some(
(x, i) => i > 0 && x < w[i - 1] * EVEN
);
const dangling = lines.some(
(line, i) => i < n - 1 && DANGLING.test(line)
);
if (uneven || dangling) continue;
}
A lower line may be at most 8 percent narrower than the line above it. No line except the last may end on a small word like a, the or and. Among the splits that pass, the one that allows the largest type wins, with a small bonus for breaking after a colon, where a reader expects a pause anyway.
If the small word rule would push the type below 90 pixels, the card relaxes it. A readable card beats a perfect one.
What we could not solve
Satori, the library that lays out our cards, does not support right to left text. Arabic pages share one fixed card instead of their own, because one good image is better than a broken one.
And the rule is still taste at the edges. A two line title whose second line is much longer can look intentional or clumsy depending on the words. The code allows it within a limit, and some cards still need a person to look at them.
