What cause extra space on fonts?

Hi,

I am having trouble with text. Not sure what the issue is here but it might be to do with line height. In the first picture below you can see that I have a text block within a div block. However the text will not position correctly. The box that contains the text doesn’t hug the characters and at best I’m always left with a couple of pixels difference at the edge. As the picture shows the text is way out of whack with the text container block.

Instead of using pixels I tried % but as you can see (below) the text will not fill the space… If anyone can shed some light on this I will be very grateful. Even when using the line height option or changing the type of element to inline or flex box the same problem occurs. Is this a bug?

Thanks for reading.
Have a good day.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

https://discourse.webflow.com/t/how-to-enable-a-webflow-share-link/2573/18

https://preview.webflow.com/preview/mess-around-space?utm_medium=preview_link&utm_source=designer&utm_content=mess-around-space&preview=7a2f07c1e0c710a2d4f87b3ac164e796&workflow=preview

Hi @notmyrealname the first problem is with setting text wrapper width to 40% . Second problem is that Text is large and word doesn’t wrap (doesn’t split by letter) .

You can set line heigth to 1- that is equivalent of 100%.

Thank you for replying Stan. Do you still see the gaps around the edges? The box is not flush to the characters. Is this not changeable?

hi @notmyrealname what gaps you are talking about? Can you make an screenshot and mark the issue?


I marked the areas with black arrows.

Oh, ok @notmyrealname this is something you can’t do about and when you learn typography you will understand why. The space above and below are called in typography accender and descender to keep space for special glyphs as for accender ^ ˇ etc. and for descender j, y, p etc.

Space before is set by font creator and you can’t do anything about that. Maybe some kerning can help but…

Hope that helped to understand what and why

here is simple typography terminology but feel free to find more articles about this on internet.

@Stan, Thank you so much. Really appreciate your input.

1 Like

Glad to help @notmyrealname , If you do not have further questions related to your request feel free to close your issue as solved.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.