I was also thinking about the “simple” kind of scroll-driven animations where all it does is move a @keyframe animation from 0% to 100% while a scrolling element goes from 0% to 100% “scrolled”. Fair warning that browser support isn’t great, but it’s just a fun thing that can easily just not happen.

It’s deliciously simple to use:

We can smash these things together. We should be able to map 0%-100% to 100-900 pretty easily, right?

Right.

Let’s made a grid of 100 letters inside a <div id="grid">. We could use any kind of HTML generating technology. Let’s just vanilla JavaScript here.

function generateGrid() {
  const grid = document.getElementById("grid");
  grid.innerHTML = "";

  for (let i = 0; i < 100; i++) {
    const div = document.createElement("div");
    div.textContent = getRandomLetter();
    grid.appendChild(div);
  }
}

generateGrid();

The lay it out as a 10✕10:

#grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

We can chew through that grid in Sass applying random weights:

@for $i from 1 through 100 {
  #grid :nth-child(#{$i}) {
    font-weight: 100 + math.ceil(random() * 800);
  }
}

Looks like this.

But scroll up and down that preview!

I attached a scroll timeline to the document like:

html {
  scroll-timeline: --page-scroll block;
}

Then use that timeline to call an animation like:

#grid {
  > div {
    animation: to-thin auto linear;
    animation-timeline: --page-scroll;
  }
}

That animation is named to-thin, but actually I made three different animations: to-thick, to-thin, and to-mid, then applied them in rotation to all the letters, so any given letter does something a bit different.

@keyframes to-thick {
  50% {
    font-weight: 900;
  }
}
@keyframes to-thin {
  50% {
    font-weight: 100;
  }
}
@keyframes to-mid {
  50% {
    font-weight: 450;
  }
}

See how I used 50% keyframes there which is a nice trick to animate to that value half way through the animation, then back.

It then occurred to me I could make a secret message. So I make a @mixin that would override certain letters in CSS to make the message. It still randomized the weight, but all the letters animate to thin while the secret message animates to thick, revealing it as you scroll down.

Anyway this is sometimes how I spend my free time and it’s completely normal.

Multiplexed typefaces (sometime alternately referred to as “duplexed” or “uniwidth”) maintain a consistent set width across at least one axis of variation, like weight, allowing for adjustments without causing text to reflow.

I was just playing with an idea around this recently and only after sharing an idea learned the proper terminology. Nick Sherman wrote about this and the article has this compelling demo:

I quite like that!

The reason I was having a play with it was I was watching Marques Brownlee’s review of the Rabbit R1 and noticed how the menu looks as you scroll through it:

You can see there that is kind of what is happening. The text is clearly getting bigger, yet the menu items above or below are not reflowed, they stay the same essential size. The text does get quite a bit bigger horizontally, so perhaps this doesn’t fit the definition of multiplexing, but it’s in the same ballpark.

I took a crack at it here:

I thought what I could do is use an HTML structure that includes an internal styling-only <span>, like:

<nav>
  <ul>
    <li>
      <a href="#">
        <span>Menu Item</span>

Then when the menu item is hovered over, I could to a scale transform on the <span> and have it not effect the natural height of the <a> parent. Which works great!

Then just to fiddle with variable fonts a smidge, I updated the font-variation-settings and animated them.

ul {
  font: 100% system-ui; /* on macs, yields San Franciso, which is variable */
  > li {
    > a {
      font-variation-settings: "wght" 600, "wdth" 100;
      &:hover,
      &:focus {
        font-variation-settings: "wght" 900, "wdth" 700;
        @media (prefers-reduced-motion: no-preference) {
          transition: scale 0.1s, font-variation-settings 0.1s;
        }
        span {
          display: block;
          scale: 1.33;
          transform-origin: left center;
        }
      }
    }
  }
}

I only put the transition on the hover/focus state on purpose. Normally that is a mistake, but here, I wanted the “off” transition to be instant and only do a smidge of morphing as the menu item becomes active.

But back to multiplexed fonts… some fonts are literally designed to allow this, like HEX Franklin:

You can see it isn’t totally perfect at all weights, but it’s pretty close! I just think that is so neat. If you’re using a font that has this ability, it would be a shame not to use it.

Check out Electric Blue as well, where the effect is a perfect multiplex, but less traditional:

Nick has some important notes:

On a related note, some variable fonts also offer a “grade” axis separate from (and often in addition to) the standard weight axis. This allows for multiplexed adjustments to a typeface’s apparent weight even if its standard weight axis would otherwise affect spacing.

Not all variable fonts offer multiplexed variations, but there is a growing selection available. And it’s worth noting that almost all monospaced variable fonts are naturally multiplexed.

On that first point, Roboto Flex is like that. It’s got a weight access that changes dimensions, but the GRAD axis does not.