This is fantastic, especially that last image with the icon! I’ve always been frustrated by the inconsistent vertical alignment of different fonts, especially where they’re set inside a button, or other element where the off-center alignment is visually apparent. I’ve often ruled out otherwise suitable fonts for this reason, as it feels dirty to adjust the alignment by just eyeballing it and coming up with some rough offset. I never thought of calculating it based on the actual font metrics, and although it’s a little extra work, I’m really keen to try this out.
Also, I had no idea vertical-align took a numeric value. Suddenly it seems so much more useful (previously I’d always used padding for manual alignment, which never felt right).