For years, sizing a little icon next to a headline meant guessing. A 24-pixel cross beside a 32-pixel section title looked almost right, until someone raised the line-height and the whole row went crooked. Every ministry site we have ever touched had at least one of these silent misalignments.
In 2026, one CSS unit fixes it in a single line.
The lh unit means "the line-height of this element." An icon, badge, or decorative rule sized in lh grows and shrinks with the text next to it, automatically.
.section-title svg {
width: 1lh;
height: 1lh;
}
Now the cross beside "Plan Your Visit," the calendar glyph next to "This Sunday," and the little dove on the sermons page are all exactly one line tall — no matter what font size or line-height the section uses. Change the heading scale for mobile and every icon comes along for free.
Its cousin, rlh, does the same thing against the root line-height. That is the one you want for elements that live outside the flow of a paragraph — a floating tag, a corner badge, a "New" pill on a recent-sermon card — that should still look proportional to the site's overall type.
.new-pill {
height: 1rlh;
padding-inline: 0.5rlh;
}
Both units landed in every major browser this year, so no fallback is required for current visitors. Older browsers will simply skip the rule and use whatever came before it.
Where we reach for lh most often on a church site: the checkmarks in a "What to expect on Sunday" list, the small map pin next to a campus address, the underline ornament under a hero verse, and the arrow at the end of a "read more" link. All the places where a designer sketched the layout in Figma and it never quite translated to code, because the code was guessing pixels.
None of this changes the visitor's experience in a way they can name. It just quietly removes the wobble. And a page without wobble is a page that reads as cared for.
If your ministry site has a few of these small alignments you have never been quite happy with, we would be glad to take a fresh look.