I know this is a bit late, but there's any easy way of doing this stuff.
Don't use font-size. Use transform: scale(); instead. The advantage is that the browser effectively scales a snapshot of the original, rather than the actual element itself, so it won't screw up line heights and whatever else. Everything else stays put.
A second advantage is that you can use transform-origin to select the point about which it scales, which means you can use it to get subtle tweaks to vertical and horizontal positioning (again, without screwing up surrounding bits). The default is smack in the middle (transform-origin: 50%;) but you can use top left instead (transform-origin: 0 0;) or bottom right (transform-origin: 100% 100%;) or any other values (transform-origin: 73% 33%;).
Don't use font-size. Use transform: scale(); instead. The advantage is that the browser effectively scales a snapshot of the original, rather than the actual element itself, so it won't screw up line heights and whatever else. Everything else stays put.
A second advantage is that you can use transform-origin to select the point about which it scales, which means you can use it to get subtle tweaks to vertical and horizontal positioning (again, without screwing up surrounding bits). The default is smack in the middle (transform-origin: 50%;) but you can use top left instead (transform-origin: 0 0;) or bottom right (transform-origin: 100% 100%;) or any other values (transform-origin: 73% 33%;).
Statistics: Posted by Gumboots — Tue Apr 01, 2025 10:11 am