Up to date
Published
4 min read

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

LH and RLH: The CSS Units That Make Vertical Spacing Easy

Exploring new CSS line-height units that eliminate guesswork from vertical rhythm

The lh unit represents the computed line-height of an element. If an element has line-height: 1.5, then 1lh equals that computed value. This creates a direct connection between text and spacing measurements.

Form fields often contain different text sizes (labels, inputs, error messages). LH units automatically adjust spacing based on the text size, keeping visual harmony even when text scales up/down. If a form field has larger text, its spacing will proportionally increase.

Cards can contain varying amounts of text with different sizes (titles, descriptions, metadata). LH units ensure the padding and gaps between elements stay proportional to the text size. This prevents awkward spacing when text wraps or when card content changes dynamically.

Article text often changes size across different screen sizes. LH units maintain proper spacing ratios between headings and paragraphs as the text scales. This is crucial for readability - as text gets larger or smaller, the whitespace adjusts proportionally.


The rlh unit differs by always referencing the root element’s line height. It provides consistency across the entire document, regardless of where it’s used. This makes it particularly valuable for global spacing patterns.

Layouts need consistent spacing throughout a website. RLH units ensure that spacing between components stays uniform because they reference the root line height, not local text sizes.

This prevents the common issue where different text sizes in components create inconsistent gaps and padding.

When you adjust the root line height, all spacings adjust proportionally, maintaining visual consistency.

Navigation elements often mix different text sizes - think of a logo next to nav items. Using RLH keeps spacing consistent regardless of individual text styles.

RLH prevents the navigation from becoming uneven when text sizes vary. The spacing remains anchored to the root line height, creating a stable visual structure.

Vertical rhythm is about creating a consistent spacing pattern that guides the eye down the page. RLH units excel here because they maintain alignment with the root line height.

This means all elements can snap to the same underlying grid, creating a harmonious flow. When text sizes change, the grid remains stable because it’s tied to the root, not individual elements.

When to Choose LH vs RLH

LH units work best for component-level spacing where you want elements to scale with their text size - think form fields, cards, and article content.

RLH units shine for site-wide spacing patterns where consistency is key - layouts, navigation, and vertical rhythm.

By combining both units thoughtfully, you can create flexible, maintainable layouts that stay visually harmonious across different screen sizes and text scales.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.

Interested in supporting this blog in exchange for a shoutout? Get in touch.


Liked this post?

Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
4 min read

Remove Unnecessary NPM Packages with eslint-plugin-depend

We don't need packages to handle basic JavaScript tasks

Aug 13, 2024
Read article
Webdev
5 min read

WebAssembly (Wasm): When (and When Not) to Use It

Understanding the real use cases for WebAssembly beyond the performance hype

Nov 25, 2024
Read article
Webdev
2 min read

link rel='modulepreload': Optimize JavaScript Module Loading

The rel='modulepreload' indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution

Dec 4, 2024
Read article
Webdev
3 min read

Form Validation That Doesn't Annoy Users: CSS :user-valid and :user-invalid

The new pseudo-classes :user-valid and :user-invalid give us a smarter way to style form validation states based on user interaction

Dec 12, 2024
Read article
Webdev
5 min read

Add Auth to Astro 5 with Clerk in 5 Minutes

The simplest setup for adding Clerk authentication to your Astro project, with minimal code

Dec 18, 2024
Read article
Webdev
3 min read

CSS ::target-text for Text Highlighting

A look at how browsers can highlight text fragments using CSS ::target-text, making text sharing and navigation more user-friendly

Dec 17, 2024
Read article
Webdev
3 min read

CVE-2025-29927 - Next.js Middleware Bypass Explained In Simple Terms

The vulnerability skips Next.js middleware security checks by adding a single HTTP header

Apr 6, 2025
Read article
Webdev
4 min read

Optimize Your Astro Site's <head> with astro-capo

Automatically improve your Astro site's performance using astro-capo

Oct 19, 2024
Read article
Webdev
4 min read

Explicit is better than implicit

Clarity is key: being explicit makes your code more readable and maintainable.

Sep 4, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/css-lh-and-rlh-units. It was written by a human and polished using grammar tools for clarity.