How to align text to the base line

7 August 2025

Background to aligning text

Control over the vertical axis of web content and more specifically text content has long been the holy grail of component layout. Join me in taking a look at what's possible with a few lines of modern CSS.

Why is vertical alignment important?

Trimming the extra spacing from the bounding box of fonts makes the total height of containing elements predictable meaning that text in adjacent columns can perfectly aligned making for a more comfortable reading experience such as we are accustomed to seeing in print media.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

At vero eos et accusamus et iusto odio

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Deactivate CSS text box

Isn't this already possible?

Yes, but only with a SCSS library called SassLine. Whilst SassLine gave great results it forces you to use SCSS which could lead to bloat & requires manual font height calculations. Integrating this into a modern front end could be challenging.

Let's get started!

Firstly we need to have a baseline grid to align our text to. We can achieve this with a repeating linear gradient which is well supported in all browsers.

.wrapper {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent calc(1rem - 1px),
    var(--light-300) calc(1rem - 1px),
    var(--light-300) 1rem
  );
}

Add the magic sauce

The secret ingredient is the new text-box property which trims vertical space from web fonts. The font's bounding box now starts at the font's ascender and ends at the descender. This can be very useful for vertical rhythm, text in buttons or aligning icons to fonts.

* {
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

Text Box

BaselineLimited availabilitylimited

Learn more

Offsetting the text

The next step is to offset the text so it sits on the baseline. We'll use padding for the top and margin on the bottom to avoid issues with collaping margins.

h3 {
  margin-block: 0 2rem;
  padding-block-start: calc(1rem - 1cap);
  line-height: 1.7;
}

Cap unit

Baseline2023newly available

Since December 2023 this feature works across the latest devices and browser versions.