font-size: calc() to make font responsive - is it a good idea?
<p>I've recently stumbled across tips on using calc() to make font-size more responsive. It's quite simple and as far as I can see well supported by browsers (IE needs a bit of love as always).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background-color: #434343;
  color: #eee;
  font-family: 'Roboto Slab';
}

.container {
  padding: 4vw;
}

h1 {
  font-size: calc(24px + 3vw);
}

h2 {
  font-size: calc(20px + 3vw);
}

h3 {
  font-size: calc(16px + 2vw);
}

p {
  font-family: Roboto;
  font-size: calc(12px + 1vw);
}

p.hammer {
  font-size: calc(12px + 1.5vw);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;h1&gt;This is my main header&lt;/h1&gt;
  &lt;h2&gt;This is my subheader&lt;/h2&gt;
  &lt;h3&gt;This is my section header&lt;/h3&gt;

  &lt;p class="hammer"&gt;This is my intro hammer. Wooo.&lt;/p&gt;

  &lt;p&gt;This is just a normal paragraph. Calc() is fun and by combining px and vw we can have neat responsive font sizes without too many media queries.&lt;/p&gt;

  &lt;p&gt;&lt;a href="http://codepen.io/MarkBuskbjerg/pen/QGLepo"&gt;To see this applied to a dummy article click here&lt;/a&gt; (Opens a new Pen)&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Note</strong> Resize screen to see it in action.</p>

<p>Trick has apparently been around since 2012. However I almost never see this in live sites.</p>

<p>From my perspective it saves a lot of trouble with media queries and reduces CSS.</p>

<p>Is there a downside to this approach that I'm missing, since I almost never see it used?</p>