I updated my headers from a custom font to now using “Open Sans” font. However, when I converted to using “Open Sans”, I noticed that this font is causing issues on descender characters(j,q,y,p..). Here’s an image of the issue I notice [] .

Doing some research, one way to fix this issue is by adjusting the line-height. However, I am not sure how to calculate the line-height for this headers precisely.

Here is my current CSS for the headers

h1 {
        font-size: 2.3rem;
        font-weight: 700;
        font-family: 'Open Sans';
    }

    h2 {
        font-size: 1.8rem;
        font-weight: 700;
        font-family: 'Open Sans';;
    }

    h3 {
        font-size: 1.3rem;
        font-weight: 700;
        font-family: 'Open Sans';
    }

    h4 {
        font-size: 1.12rem;
        font-weight: 700;
        font-family: 'Open Sans';
    }

    h5 {
        font-size: 0.87rem;
        font-weight: 700;
        font-family: 'Open Sans';
    }

The line-height I am using now is line-height: 1.1 provided from a bootstrap code.

My question is how do I calculate the line-height based on the new font and font size?

And also, is line-height the only way to fix descender character issue? I ask because, if I were to increase the line height to say 1.3, then it’s creating some alignment issues across my site because it’s moving content down by few pixels.