title: Angular Material: changing font size of input clips text
body: <p>I am modifying the font size of my Angular Material <code>input</code>s to 28px, but this is causing <a href="https://www.canva.com/learn/typography-terms/" rel="nofollow noreferrer">the descenders</a> of some characters to be clipped, like the 'g' in this example:</p>
  
  <p><a href="https://i.stack.imgur.com/FkmT7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FkmT7.png" alt="enter image description here"></a></p>
  
  <p>Can't for the life of me work out how to solve this. Any ideas anyone? Which classes do I need to augment?</p>
  
  <p>I modified my component in SCSS like this:</p>
  
  <pre><code>input {
    font-size: 28px;
  }
  </code></pre>