0

I've been trying to wrap my head around font positioning and why some fonts are off primarily vertically.

So I stripped things down to two examples:

I stripped the CSS all the way down to basically nothing except the following and the font family and they are both in a span and that is it.

font-size: 130px;
background: yellow;
position: 
absolute;
top: 100px;
left: 100px;
height: auto;
width: auto;

<span>HELLO THERE</span>

So why is the first one butted up against the top with space on the bottom?

I opened the same font in photoshop and illustrator just to try to see if there was something inherent about it like built in spacing issues, but there didn't seem to be.

Is that because those programs do more sophisticated calculations to fix issues with the font or something else?

enter image description here

CRAIG
  • 977
  • 2
  • 11
  • 25
  • can you add font family, and also if possible add actual snippet? as ```position:absolute```, is set I want to see which element it is relative to. – Nexo Jun 02 '23 at 14:51
  • yeah let me see if I can get an example you can mess with. – CRAIG Jun 02 '23 at 14:52
  • The yellow area is called "content area" and is related to font properties: https://stackoverflow.com/q/55978130/8620333 – Temani Afif Jun 02 '23 at 15:06
  • @Nexo Ok, I think I solved the mystery. The top font was converted to Woff and I think the measurements got messed up when it was done that way. – CRAIG Jun 02 '23 at 15:35
  • Cool. Glad you solved it. – Nexo Jun 02 '23 at 15:38

0 Answers0