noob: reduce text box upper atmosphere, micro style adjustments Options

[meems]

I notice text-lines have several more pixels above the general height of text characters as they do below.
I've tried fiddling with style variables, but i haven't been able to reduce this extra number of above pixels.
It looks untidy for buttons where the background or border colour is conspicous, and the whole button just has vacant upper area.



It's <current year>, has anyone managed to fix this yet?

[CharlesEF]

Since you didn't post any HTML or CSS I have to guess. It might be the 'padding' CSS entry.

[coothead]

Hi there meems,

does this button look somewhat better...

https://codepen.io/coothead/full/vYbywLr

Click the "View Source Code" button for further information.

coothead

[Jason Knight]

Some fonts simply don't align right, and you have to add padding or increase the line-height to compensate. Commonly what happens is fonts align on their x-height (the height of the lower case X) or the baseline (the bottom of an uppercase letter) -- this is inconsistent across different fonts, many of which also have an "ascender" area that's ridiculously large.

If you can't remove the excess top padding, pad the bottom to match so it at least looks even.

Though as others said without seeing code, or knowing what font you're trying to use, we're guessing WILDLY.

[meems]

Hi there meems,

does this button look somewhat better...

https://codepen.io/coothead/full/vYbywLr

Click the "View Source Code" button for further information.

coothead

yes thats good. I inspected the code and saw its just padding. Because I'm noob I was only aware of 'px' padding; first time I've seen 'em' padding. That makes things a lot easier. Thanks.

This post has been edited by meems: Nov 18 2023, 01:35 AM

[meems]

Some fonts simply don't align right, and you have to add padding or increase the line-height to compensate. Commonly what happens is fonts align on their x-height (the height of the lower case X) or the baseline (the bottom of an uppercase letter) -- this is inconsistent across different fonts, many of which also have an "ascender" area that's ridiculously large.

If you can't remove the excess top padding, pad the bottom to match so it at least looks even.

Though as others said without seeing code, or knowing what font you're trying to use, we're guessing WILDLY.

yes. actually I was more wanting to chop off 'ascender' area than resort to coothead's fix of add balancing 'descender' area. Is the former solution possible?

>we're guessing WILDLY.
All the guesses have been accurate.

>or knowing what font you're trying to use
ascender vs descender text area imbalance applies to most fonts, perhaps nearly all of them. Even the forum text font has it, easy to see if your cursor highlight text.
Your explanation of capital letters being used to calibrate font vertical positioning makes sense; though with the thounsand options a html coder has to stylise a webpage, I'm surprised at the lack of a 'dynamic' option to calibrate a font's vertical position according to the text, and therefore potentially having no redundant ascender or descender area.
e.g. 'DooM' should vertically calibrate to the capitals with no space for underhangs, while 'group' should calibrate to the g & p underhangs with no space for capitals or lower text spires ( h f l ), chopping off ascender and descender area as appropriate.