Mana symbols are floating up just a tiny bit too high
Posted: Sat Sep 17, 2022 2:28 pm
So mana symbols at the moment feel like they're slightly too high up on lines of text.
When I look at a card like this, the mana symbols are just ... floating upwards too much:
Very Cool Card
Creature
: Do some cool stuff.
I took a close look and they're sitting just fine on the baseline:
However, it turns out real cards do not position the mana cost symbols on the baseline. The symbols are dropped down slightly so that the inner text sits on the text baseline, so that e.g. the "1" in is as in line with the text as it would be if the circle around it was not there at all.
We can get the exact same experience here by applying a margin-bottom of -2px to mana symbols:
This winds up looking much better, I think, even when zoomed out.
When I look at a card like this, the mana symbols are just ... floating upwards too much:
Very Cool Card
Creature
: Do some cool stuff.
I took a close look and they're sitting just fine on the baseline:
However, it turns out real cards do not position the mana cost symbols on the baseline. The symbols are dropped down slightly so that the inner text sits on the text baseline, so that e.g. the "1" in is as in line with the text as it would be if the circle around it was not there at all.
We can get the exact same experience here by applying a margin-bottom of -2px to mana symbols:
This winds up looking much better, I think, even when zoomed out.