title: CSS Transition font-size: avoid jittering / wiggling
body: <p>I made the following tile, with an hover-effect that increases the <code>font-size</code> with an CSS-<code>transition</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: 'Segoe UI', sans-serif;
  }
  .website {
    width: 180px;
    height: 73px;
    text-align: center;
    line-height: 80px;
    margin: 1px;
    color: white;
    border-bottom: 5px solid darkslateblue;
    background-color: darkslateblue;
    white-space: nowrap;
    overflow: hidden;
    transition: border-color 0.66s ease-out, font-size 0.3s ease-out;
  }
  .website:hover {
    font-size: 16pt;
    cursor: pointer;
    transition: border-color 0s;
    border-color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="website"&gt;Blog 1&lt;/div&gt;
  &lt;div class="website"&gt;Blog 2&lt;/div&gt;
  &lt;div class="website"&gt;Blog 3&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When you hover them you can see that the transition of the <code>font-size</code> is not smooth at all. In other words it wiggles up and down when changing size.<br>
  Does anyone have an Idea  how to fix or work around it?</p>