Skip to main content
L
Lorenzo244902407u2w
Participant
June 21, 2023
Question

Font line height problem on website - Degular font

  • June 21, 2023
  • 1 reply
  • 989 views

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.

 

 

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?

    This topic has been closed for replies.

    1 reply

    Tarun Saini
    Community Manager
    Tarun SainiCommunity Manager
    Community Manager
    June 21, 2023

    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

     

    L
    Lorenzo244902407u2wAuthor
    Participant
    June 21, 2023

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

    L
    Lorenzo244902407u2wAuthor
    Participant
    June 22, 2023

    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


    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices