title: Linear scaling between 2 font sizes using calc and vw
body: <p>Is it possible to use some combination of <code>calc()</code> and <code>vw</code> units to scale linearly between 2 different font sizes?</p>
  
  <p>Example: I'm giving a web page design with the following font sizes:</p>
  
  <p><code>&lt;h1&gt;</code> is font-size: 18px @ 360px</p>
  
  <p><code>&lt;h1&gt;</code> is font-size: 32px @ 1024px</p>
  
  <p>If I wish the <code>font-size</code> to scale up along with the browser width using <code>vw</code> units, the math is pretty simple (SCSS syntax):</p>
  
  <p><code>font-size: 18/360*100vw;</code> = <code>font-size: 5vw;</code></p>
  
  <p>So based on a font size of 18px @ 360px, you would use <code>5vw</code>. However, by the time the browser gets up to 1024px:</p>
  
  <p><code>1024*0.05 = 51.2px</code> which is how big the <code>&lt;h1&gt;</code> will be at 1024px which is far higher than the designed <code>32px</code>. The opposite problem will occur if I set the font-size to use 32px as the base: <code>font-size: 32/1024*100vw;</code> = <code>font-size: 3.125vw</code>. Now the font will be too small @360px;</p>
  
  <p>So the question again, is it possible to linearly scale a <code>font-size</code> between 2 font-sizes at 2 different breakpoints? Is it possible to use some sort of combination or <code>vw</code> units and <code>calc</code> to achieve this. I've tried to work out the equation for such a thing but I'm not sure if it is possible.</p>
  
  <p>I've been thinking about trying to something like:</p>
  
  <p><code>font-size: calc(18/360*100vw * 1.01vw);</code> or something along those lines but apparently that type of syntax is not accessible for <code>calc()</code>.</p>
  
  <p>Note: I'm not looking for a simple media query solution where I simply increase the font size @1024px. I'm looking for a way to linearly scale it smoothly between all resolutions.</p>