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

Font line height problem on website - Degular font

  • June 21, 2023
  • 1 reply
  • 986 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/

    Tarun Saini
    Community Manager
    Tarun SainiCommunity Manager
    Community Manager
    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

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