• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Font line height problem on website - Degular font

New Here ,
Jun 21, 2023 Jun 21, 2023

Copy link to clipboard

Copied

Hi everyone, on my website I am using an adobe font called degular. During the mockup phase I didn't have any problem, the font was perfect. Now, during the development phase the web designer I am working with is having problems with the "line-height": as you can see from the image, the loop of the letter "g" is cut off.

 

Immagine 2023-06-21 110225.png

 

The same thing happens with all the descenders and all the tails of the letters "q, p, g, j, y".
The problem occurs when a negative line-height is used, which is not normal, since with other fonts this problem does not occur.
How can I solve it?

Views

424

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 21, 2023 Jun 21, 2023

Copy link to clipboard

Copied

Hi @Lorenzo244902407u2w,

 

Welcome to the community! We're sorry to hear about this. Could you please share the Web URL with us so we can look into this?

 

Regards,

Tarun

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 21, 2023 Jun 21, 2023

Copy link to clipboard

Copied

Sure, the URL is https://dev.midable.net/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 22, 2023 Jun 22, 2023

Copy link to clipboard

Copied

Hi @Lorenzo244902407u2w,

 

Thanks for sharing the URL. I would like to inform you that the issue you're seeing is due to the combination of the metrics in this font family and the line height value you're using. This article has a comprehensive discussion of font metrics and line-height values: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

 

Let us know how it goes.

 

Regards,

Tarun

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 22, 2023 Jun 22, 2023

Copy link to clipboard

Copied

LATEST

Thank you for your answer @Tarun Saini , I will try to submit your answer to the web designer tomorrow.
However, there is one thing that is not clear to me: why on other similar fonts this thing does not happen? If I wanted to, through line-height, I should be able to stick the lines together. The text would be hard to read, but the letters would not be cut off.
I have a background as a web designer and studied to be a graphic designer and ui/ux designer, and I have to say that it seems to me that the font is not designed correctly and has this line-height flaw

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines