v150 · CSS · Typography

Logo Lockup

Brand lockups — a large brand name above a tagline — need both pieces to span the same width to look intentional. text-fit: balance on the brand name and text-fit: scale-down on the tagline achieve this automatically across any container width. Drag the box to test.

Checking text-fit support…

drag to resize

Drag the bottom-right corner of this box to resize it. Both lines refit instantly.

SHOWCASE
Chrome Platform Features Since 2024

logo gallery

Width slider: 220px

with vs without text-fit

no text-fit (overflow hidden)
text-fit: balance
SHOWCASE
SHOWCASE

Resize: 180px

code

/* Brand fills the container, tagline shrinks-only */
.brand {
  font-size: 3rem;
  white-space: nowrap;
  text-fit: balance;
  /* scales UP to fill, DOWN if overflow — both lines span same width */
}

.tagline {
  font-size: 0.8rem;
  white-space: nowrap;
  text-fit: scale-down;
  /* only shrinks — never larger than 0.8rem base */
}

/* Before text-fit: JavaScript loop required
function fitText(el) {
  let size = parseFloat(getComputedStyle(el).fontSize);
  while (el.scrollWidth > el.offsetWidth && size > 8) {
    size -= 0.5;
    el.style.fontSize = size + 'px';
  }
}
*/

see also