CSS Transition font-size: avoid jittering / wiggling
<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>