“Multiplexed” Fonts Have a Cool Superpower

Just to cut to the chase, the superpower is being able to adjust their weight (or at least one of their attributes, or as variable fonts call them, an “axis”) without changing the space they occupy. This means that interactive effect and animations can be done without worry for awkward reflow situations and performance problems. I’ll snipe the definition from Variable Fonts:

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>

Code language: HTML, XML (xml)

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;
        }
      }
    }
  }
}
Code language: CSS (css)

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.