{"id":2031,"date":"2024-05-03T10:52:13","date_gmt":"2024-05-03T16:52:13","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2031"},"modified":"2024-05-03T10:52:15","modified_gmt":"2024-05-03T16:52:15","slug":"multiplexed-fonts-have-a-cool-superpower","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/multiplexed-fonts-have-a-cool-superpower\/","title":{"rendered":"“Multiplexed” Fonts Have a Cool Superpower"},"content":{"rendered":"\n

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<\/a>:<\/p>\n\n\n\n

\n

Multiplexed typefaces (sometime alternately referred to as \u201cduplexed\u201d or \u201cuniwidth\u201d) maintain a consistent set width across at least one axis of variation, like weight, allowing for adjustments without causing text to reflow.<\/p>\n<\/blockquote>\n\n\n\n

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<\/a> and the article has this compelling demo:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I quite like that!<\/p>\n\n\n\n

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

\n\t\t\t