Line height issue with certain fonts

[RichardD2]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed

💥 Demo Page

https://jsfiddle.net/RichardD/rkmgs84t/1/

Explanation

When using particular fonts and font sizes, having the line-height set to 1.1 causes descenders to be obscured - specifically for lower-case letters g, j, p, q, and y. In this specific case, I'm using Bootstrap 4.6, which sets:

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
}

https://jsfiddle.net/RichardD/rkmgs84t/1/

Workaround:

Setting line-height: inherit; on both the .tagify and .tagify__input::before rules resolves the problem:

.tagify,
.tagify__input::before {
    line-height: inherit !important;
}

https://jsfiddle.net/RichardD/rkmgs84t/2/

[yairEO]

I originally wanted to not use inherit because I was thinking the developer could not be trusted with having a good-looking line-height by default, so I had it set to 1.1. I will contemplate of a solution

Funny because I was just reading this article recently: https://css-tricks.com/how-to-tame-line-height-in-css