v149 · CSS

Heading Flush Against a Box

Design systems often need headings to sit flush against a coloured border or stripe. Toggle between the old margin hack, no adjustment, and text-box: trim-both cap alphabetic to see the difference.

Pull-quote with left border accent

Default — gap visible above "A"

A new era of web typography

CSS text-box makes the invisible space at the top of every text block a first-class design knob — no more font-specific negative margins.

Colour stripe heading

Highlights

When the heading sits inside a coloured stripe, the extra leading above the cap letters makes the stripe noticeably taller than needed. Trim-both snaps the blue box to the letter tops and the baseline.

/* Default — has leading gap above cap height */
h2 { font-size: 1.45rem; line-height: 1.25; }

/* Old hack — font-specific, brittle */
h2 { margin-top: -0.22em; }

/* text-box — cross-font, spec-aligned */
h2 {
  text-box: trim-both cap alphabetic;
  /* shorthand for:
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;  */
}

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

A new era of web typography

Highlights

see also

implementation reference