Open your church homepage on a phone. Look at the hero headline. Then scroll to the About page and look at the last line of the "Welcome from Pastor" paragraph.
Two things almost always show up. The headline wraps awkwardly — three fat words on one line, one lonely word underneath. And the pastor's paragraph ends with a single word sitting by itself above the button, like a hymnal left on a pew after everyone has gone home.
Both are fixable. Both have been fixable, in one line of CSS each, since browsers reached Baseline 2025.
text-wrap: balance — for headlines
h1, h2, .hero-title {
text-wrap: balance;
}
That tells the browser to distribute the words across the available lines so no single line looks starved. A three-line headline gets three roughly equal lines instead of one long, one long, one short.
Scope it to titles, section headings, and call-to-action lines — anywhere lines are counted. It's slower than the default wrap, and the browser skips it for anything longer than about ten lines, so body copy is left alone even if you're generous with the selector.
text-wrap: pretty — for pastor letters
p, .prose {
text-wrap: pretty;
}
This one is aimed at the opposite problem: long-form text. The browser looks ahead at the last few lines of the paragraph and quietly avoids the ugliest outcomes — a single-word final line, a hyphen followed by two letters, a short line trapped between two longer ones.
You will not always see the difference. But on a pastor's letter, an About page, or a mission statement — the pages where the words actually get read — it makes the block feel considered instead of dumped in.
What to do this week
Add both to your site's global stylesheet, scope balance to headings and pretty to paragraphs, and ship it. There is no fallback to write and no JavaScript to load. On the small share of older browsers, the text wraps the way it always did.
Fifteen minutes of work, and your homepage stops looking like it was laid out by a text editor.
If you'd like a second set of eyes on your church site's typography — or the CSS behind it — we're here to help.