Problems vertically centering text inside input element with some fonts

Issue

I want to use a custom font from google fonts for my website (Source Serif Pro - https://fonts.google.com/specimen/Source+Serif+Pro?category=Serif&query=serif+pro). The problem is that, as most of the serif fonts I have tried, it has what I think are called descenders.

For example, if you click on the link and check the text samples, you can clearly see that letters such as g, p, q all "push the whole text up" which results in the text inside an input element look vertically off.

All the answers I have found either involve some random value of top padding (which feels like an ugly hack) or using a different font. Is there a correct way to make the text vertically align based on the baseline in an input element, regardless of font?

Ideally there would be some extra space on the top, which would be calculated by the browser instead of predefined padding-top values.

Solution

There are new font-face descriptor properties that were recently introduced into CSS for this kind of purpose. They allow CSS to override some of the information contained in the font file itself.

Inside the @font-face description of your font (what is loaded by the <link> that is given to you on the Google Fonts website), you can now add:

• ascent-override
• descent-override
• line-gap-override

In your case, you could use the descent-override property to completely cancel any sort of descender, and then use the line-gap-override to still have some space between 2 lines (despite not having any descenders).

In the following example, I define the Source Serif font twice. The one called 'Source Serif Pro' is simply copied from the Google Fonts CSS, the one called 'Source Serif Pro With Override' is identical except for the 2 extra font-face descriptors I'm proposing:

@font-face {
  font-family: 'Source Serif Pro With Override';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v15/neIQzD-0qpwxpaWvjeD0X88SAOeauXQ-oAGIyY0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  descent-override: 0%;
  line-gap-override: 35%;
}

@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v15/neIQzD-0qpwxpaWvjeD0X88SAOeauXQ-oAGIyY0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  display: flex;
  gap: 20px;
}

div {
  max-width: 300px;
}

.override {
  font-family: 'Source Serif Pro With Override';
}

.regular {
  font-family: 'Source Serif Pro';
}

p {
  box-shadow: inset 0 0 0 1px red;
}

<div class="regular">
  <button>Ipsum</button>
  <p>Fusce pharetra cubilia facilisis litora eros maecenas tellus aliquet senectus, pulvinar diam ligula condimentum curae potenti tempus nostra nibh, feugiat aptent morbi amet sociis lobortis auctor porttitor.</p>
</div>
<div class="override">
  <button>Ipsum</button>
  <p>Fusce pharetra cubilia facilisis litora eros maecenas tellus aliquet senectus, pulvinar diam ligula condimentum curae potenti tempus nostra nibh, feugiat aptent morbi amet sociis lobortis auctor porttitor.</p>
</div>

Answered By - Sheraff