Line-height styling issue

Flow
1

I’m using Vaadin 25.1 with Lumo and a few style adjustments, including the font “Europa”.

In Chrome and Edge, letters with descender (g, j, p etc.) are missing a few pixels at the bottom in input fields:

image

This does not happen in Firefox, and it also works in Chrome and Edge when zooming to 110% or 90%.

image
image

Which CSS properties should I be looking for to fix this? I tried to play with height, line-height, padding-bottom, and a few others, but no success so far.

2

What operating system are you using? Have you tried how the Europa font works on a static HTML page with the standard <input> element?

3

I’m using Windows 11 Enterprise 23H2.

I haven’t tried a static HTML yet, but the font works fine in other web applications of this company (at least one uses JSF/Primefaces for the frontend).

Update: this also happens in Safari on MacOS.

4

I created a simple HTML example. The input looks fine, no matter what I try (setting height, line-height, padding etc.):

image

Interesting though that placeholder text has the problem being cut off a bit:

image

5

FYI, I was able to fix this by increasing line-height a bit and setting height to auto:

input[slot='input'] {
    line-height: 1.1;
    height: auto;
}