Understanding CSS lh and rlh Units

What Are lh and rlh Units?

The lh unit represents the computed line-height of the element where it is used. If an element has line-height: 1.5, then 1lh equals that computed value. This creates a direct, proportional relationship between text size and surrounding spacing.

The rlh unit takes this concept further by always referencing the root element's line height. Similar to how rem relates to em at the root, rlh provides consistent, document-wide spacing anchored to a single typographic baseline.

Both units can be used anywhere a CSS length value is accepted, including margins, padding, gaps, widths, heights, and scroll offsets.

Key benefits:

• Spacing scales naturally with typography
• Eliminates magic numbers in CSS
• Creates consistent vertical rhythm
• Improves maintainability and code clarity

Modern web development demands layouts that adapt fluidly to text. These relatively new units, part of the CSS Values & Units Level 4 specification, enable developers to specify spacing in terms of "lines" rather than fixed measurements. When combined with our web development services, these techniques help create polished, professional layouts that adapt gracefully across all devices.

Creating Vertical Rhythm with Line-Height Units

Vertical rhythm is a design principle that establishes consistent, predictable spacing between text elements. When spacing follows a regular pattern tied to the baseline grid, content becomes more readable and visually harmonious.

By setting paragraph margins in lh units, spacing automatically aligns with the text's natural line height:

p {
 margin-block: 1lh;
}

The difference becomes visible when overlaid with a baseline grid. With em units, text lines often drift out of alignment. With lh units, every line of text falls precisely on the rhythm established by the line height.

Code Example: Article Layout

article p {
 margin-block: 1lh;
}

article h2 {
 margin-block-start: 2lh;
 margin-block-end: 1lh;
}

article h3 {
 margin-block-start: 1.5lh;
 margin-block-end: 0.75lh;
}

This approach is particularly valuable when building content-heavy sites like blogs, documentation, or resource pages where consistent typography enhances readability. Combined with our responsive web design services, this creates polished, professional layouts that adapt gracefully across devices.

Integration with Tailwind CSS

Tailwind CSS's arbitrary value syntax provides a straightforward way to use line-height units:

<!-- Paragraph spacing -->
<p class="mb-[1lh]">Content here</p>

<!-- Heading margins -->
<h1 class="my-[1.5rlh]">Title</h1>

<!-- Button sizing -->
<button class="leading-none py-[0.5lh] px-[0.75lh]">Click</button>

<!-- Smooth anchor offsets -->
<h2 id="features" class="scroll-mt-[2rlh]">Features</h2>

CSS Custom Properties Approach:

@layer base {
 html {
 line-height: 1.5;
 }
 
 :root {
 --space-rhythm: 1rlh;
 --space-loose: 2rlh;
 }
}

For teams building with our React development services or Next.js solutions, these techniques integrate seamlessly with component-based architectures, allowing spacing tokens to be defined once and reused across all components. The same principles apply when working with our AI automation services to create intelligent, adaptive user interfaces.

Best Practices and Gotchas

Do

• Use unitless line-height values - line-height: 1.5 multiplies font size predictably
• Prefer logical properties - Use margin-block and padding-block for writing-mode flexibility
• Define root rhythm once - Set html { line-height: } consistently for rlh reliability

Watch Out For

• Line boxes with tall content - Emoji or inline images can exceed computed line-height
• Mixed units in same component - Using both lh and rlh inconsistently can break rhythm
• Inherited line-height issues - Pixel values for line-height cause unexpected inheritance

Quick Reference

/* Establish rhythm */
html {
 line-height: 1.5;
}

/* Use for spacing */
p {
 margin-block: 1lh;
}

/* Global spacing */
.section {
 padding: 2rlh;
}

/* Fallback pattern */
@supports not (margin-block: 1lh) {
 p {
 margin-block: 1.5em;
 }
}

Line-height units contribute to more maintainable CSS by eliminating magic numbers. When spacing is expressed in terms of lines rather than pixels, the relationship between text and surrounding whitespace becomes explicit and self-documenting. This approach aligns with best practices promoted in our web development services, where clean, maintainable code is a core principle.

Conclusion

CSS lh and rlh units represent a significant advancement in creating maintainable, rhythm-based layouts. By expressing spacing in terms of lines rather than pixels, developers gain typography-aware layouts that scale gracefully and communicate intent more clearly.

Key takeaways:

• lh and rlh create proportional, readable layouts
• 94%+ browser support enables production use
• Progressive enhancement ensures broad compatibility
• Better maintainability than pixel-based spacing

These units support more effective design systems by defining a root line-height once and using rlh for spacing. Changes to the root typography cascade appropriately through all spacing, maintaining visual harmony without extensive refactoring.

Ready to improve your web development workflow? Explore our web development services to see how we can help build better, more maintainable websites with modern CSS techniques.

Sources

1. W3C CSS Values & Units Level 4 - lh unit
2. W3C CSS Values & Units Level 4 - rlh unit
3. Can I Use: lh
4. Can I Use: rlh
5. WebKit - Polishing your typography with line height units
6. Trevor Lasn - LH and RLH: The CSS Units That Make Vertical Spacing Easy
7. Benjamin Crozat - The lh and rlh CSS units: simple spacing that follows your text