Left and right I see ugly terribly designed buttons. If you can’t design a button, then the fuck are you doing designing whole applications? I mean look at this typical bad example:
And now how it should look like:
The biggest problem is that the text is incorrectly centered vertically. But how can it be? My code is written in C!
Let’s call your ignorance “The font is lying!”. Each font describes a few metrics that we use to calculate height
of the font: height = ascent + descent
. The problem is that our favorite Latin characters are not always centered in this height.
So instead of aligning by height
we can align by cap height
: Find out where the baseline is. Up from there is cap-height
(a height of capital letters)
Inter font is centered to cap height, so if you want to try how your UI would look like with this alignment, try Inter.
The “lie” is that the letters are actually not always centered in this height. Sometimes there’s more space above and sometimes below. That will cause your text to be too high or too low, and even with 14px size, this can be one or even two pixels.
There’s a bit more to this, the extra space is often used for diacritics, that might show quite in some languages.
You just need a bit of OCD and a set of rules to obsess about.
So how does this happen? You draw a rectangle of proper size and center the text in it. Often times than not, the text is slightly high or slightly low. At UI sizes, say 14px, this is often one or even two pixels. You don’t see it, but it sees you. And you for sure feel it: It changes your indentation to tabs and offsets your stool timings.
Yes, Ryan you too. Even if you read the metrics data straight from the font file with your handmade C89.
What causes this is how we generally center the text vertically. We take what our favorite font library tells us, usually as height
and center that.
The painful truth is that many fonts are not vertically centered in the height
they report. Well they are, but because you are an ignorant from first world english-speaking country, you can’t comprehend.