Open your church site on a phone and look at the hero. Odds are the big serif headline is sitting a little too low in its box, or a little too high, or the space between it and the next line looks larger than the space above it. You have nudged margins. You have tried line-height: 1. It never quite lands.
That gap is not a mistake. Every font ships with extra vertical space baked into each glyph — the "half-leading" that lets paragraphs of body copy breathe. On a 20-pixel paragraph it is invisible. On a 72-pixel display headline it is a designer's headache.
The fix has quietly reached baseline in every browser this year, and it is one property.
h1 {
text-box: trim-both cap alphabetic;
}
text-box-trim (with its friend text-box-edge) tells the browser to crop that phantom space, so the top of the letter box sits at the cap-height and the bottom sits at the baseline. Nothing else. Your line-height stops fighting your padding. Your headline visually starts where its background starts.
For a church homepage, three things get better almost immediately.
The hero headline finally aligns to the horizontal rule, the icon, or the button underneath it. The card grid on your sermons page — title, speaker, date — stacks with equal vertical rhythm instead of one card's title sitting a hair higher than the next. And your Cinzel or Cormorant heading (the fonts we use on Develop With Faith, and the ones most church sites lean on) stops looking like it is floating inside its container.
A safe starting recipe:
h1, h2, h3 {
text-box: trim-both cap alphabetic;
}
p, li { text-box: normal; }
Trim your display type. Leave body copy alone — the breathing room is doing real work there.
One caution worth naming. Some icon fonts and older Google Font webfonts have imprecise metrics, and the trim will look off by a pixel or two until you swap them for a modern variable font. This is usually a five-minute win, not a redesign.
None of this is glamorous. But a church website that visually settles — where the words sit exactly where the eye expects them — is a small act of hospitality. The visitor does not know why the page feels calm. They just stay a little longer.
If you would like unhurried eyes on the typography of your church homepage — the alignment, the rhythm, the way it reads at 6:30 on a Sunday morning — we would be glad to look.