Give up on pixel-perfect design or give up on i18n. You cannot have both (or rather you cannot afford a redesign for each new translation).
> While this feature allows for some creative layering in static typesetting, it is decidedly spectacular for interface design, where things tend to quickly go awry with only small changes. As an example, changing the weight of a single menu item on hover usually results in an erratic twitching dance of the whole menu as it tries to adjust for the change.
> this feature is nothing but a nice gimmick in static typesetting,
The point is that when the font attributes change dynamically when using the interface; like hovering over a button makes the text bold. If that dynamic during-interaction change changes the size, it might make everything else move around too, which would be bad.
The problem being addressed isn't so much being able to get the page to look just so, but being able to make it not jitter around while you interact with it.
Here's the animation from the article that I'd use to get the point across (top is a non-uniwidth font, bottom is a uniwidth font): https://miro.medium.com/max/1400/1*eUu31P1t6Ez6xwD56BQJaw.gi...
https://jsfiddle.net/7ysgdpf2/
Failed for Arabic, Sanskrit, Telugu. I'm only guessing those languages are not easily writable with fixed size units
Your jsfiddle also fails even for English in most browsers, because you didn't load both regular and bold weights of Recursive. As a result, you get a browser-generated synthetic bold effect, which varies between browsers and in most cases (but not Chrome, IIRC) will alter the width.
(To fix that aspect, you need something like "family=Recursive:wght@400;700" in your Google Fonts link.)
https://pasteboard.co/JM3MBN4.png
For it to have worked each pair of lines should be the same width. They are not. Tested on MacOS 11.1 Safari, Firefox, Chrome and Windows 10, Firefox, Chrome. All failed.