Text has unknown spacing?


Bildschirm­foto 2023-02-11 um 09.11.26

Every Text Element has this little spacing on the bottom and I dont know what it is.

If you do, happy to hear from you!

https://preview.webflow.com/preview/mce-mobil?utm_medium=preview_link&utm_source=designer&utm_content=mce-mobil&preview=50f60eae08bfb17cb5cf932aa9907a7d&pageId=63d1cdc4f65e769864708138&workflow=preview

hi @danielkalinx these are special spaces related to Typography and they are called Descenders or “Descender line”.

https://creativemarket.com/blog/10-typography-terms-every-designer-should-know

you can find more information on internet.

Strange, can just replace the font. I once had a similar problem when I was working on site development on a web resource https://masterbundles.com/stock-content/vector/fall-svg/ in Iowa. Then the company itself helped me understand the reason for the indentation of such a font, but I have not forgotten the decision itself.

Appears to be specific to that font.
Try setting the leading on these elements to “90%” (or similar) and then adjust the padding on the button to achieve the desired top/bottom spacing.

hi guys look on @danielkalinx images and then look on typography. These “descenders” are on each font so with all the respect please do not post comments if you do not understand basic typography anatomy and do not recommend bad tricks or practices.

Learning Typography

I get what they’re asking for though. Essentially, they want a baseline shift to account for optical centering. Depending on the descender treatment of the font, the optical centering can look more “off” on one font to the next. It’s not a bad practice or trick to adjust the top padding for the optical purpose. I get what you’re saying though. It’s important that they learn this is not a glitch/bug in the typeface itself. My screen grab shows that it’s perfectly centered but optically it appears higher up in the button.
I usually stick with all caps for button text, because of this.

centering

I agree that all caps in buttons is common practice. But compensating for ascenders and/or descenders is a bad idea as each font family is different by its x-height, ascenders, descenders, etc., etc. means that 100px “sans-serif” is 116pt and 100px “Source Sans Pro” is 106pt.

How compensation will be applied with changing font size dynamically. Even with fixed sizes per viewport it will be PIB. Once you will be done client will say that they like to have different fonts and you can start all over again.

In my experience, the pixel-perfect obsession comes from Graphic designers as on “paper” is possible to do anything but the majority lack of understanding HTML and CSS world. I was thinking to do a video about this topic but it will be too complex, which means long. There are many great sources about Typography and Web design.

Okay sorry for not responding so long, i wasnt notfied… anyways:

@Stan is right, as this appears to be a typography “problem”. Although the issues in this case are the ascenders.

For some reason I thought just by using a google sans serif font i would be fine since if though all of these fonts are web-optimized or something. Of course this does not make no sense at all.

The problem becomes clear if you compare the font’s text selection from the font is use (Epilogue) vs font that is actually designed for screens (Roboto)

Bildschirm­foto 2023-03-19 um 10.31.45
Epilogue :arrow_heading_up:

Bildschirm­foto 2023-03-19 um 10.31.55
Roboto :arrow_heading_up:

You can see the see the missing whitespace on top.

Also i dont think “the pixel-perfect obsession” is something bad and should be addressed, even it if means changing the font. In my case this is very much possible and i will probably do so.

Hope this helps, wish you all a great day :slight_smile:

1 Like