Edit in JSFiddle

// http://fittextjs.com by Dave Rupert
(function(){
  var css = function (el, prop) {
    return window.getComputedStyle ? getComputedStyle(el).getPropertyValue(prop) : el.currentStyle[prop];
  };
  
  var addEvent = function (el, type, fn) {
    if (el.addEventListener)
      el.addEventListener(type, fn, false);
		else
			el.attachEvent('on'+type, fn);
  };

  window.fitText = function (el, kompressor) {

    var settings = {
      'minFontSize' : -1/0,
      'maxFontSize' : 1/0
    };

    var fit = function (el) {
      var compressor = kompressor || 1;

      var resizer = function () {
          el.style.fontSize = Math.max(Math.min(el.clientWidth / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px'; // px :P
      };

      // Call once to set.
      resizer();

      // Bind events
      // If you have any js library which support Events, replace this part
      // and remove addEvent function (or use original jQuery version)
      addEvent(window, 'resize', resizer);
    };

    if (el.length)
      for(var i=0; i<el.length; i++)
        fit(el[i]);
    else
      fit(el);

    // return set of elements
    return el;
  };
})();
fitText(document.getElementById('rwdfonts5'), 1.2)

// the extra part to display the viewport
var gogogo = function() {
    document.getElementById('viewport').innerHTML = window.innerWidth;
}
gogogo();
window.onresize=function(){ gogogo(); };

<!--
http://www.w3.org/TR/css3-values/#relative-lengths
vm, vmax, vim etc. are measure units. Just like em, px, etc. You can use them on anything, not just 'font-size'.
-->

<!--
 The em unit:
Is relative to the 'font-size' of the parent, which causes the "Compounding issue". 

The rem unit: 
root(em) is the 'font-size' on the root element.
-->

<article class="container">
   
    <p>Sizing with 'pt':</p>
    <h1 id="rwdfonts0">Lorem lorem</h1>
    
    <p>Sizing with 'px':</p>
    <h1 id="rwdfonts1">Lorem lorem</h1>
    
    <p>Sizing with '%':</p>
    <h1 id="rwdfonts2">Lorem lorem</h1>
        
    <p>Sizing with 'em' (Compounding issues: adopt the font-size of the child, not the parent element):</p>
    <h1 id="rwdfonts3">Lorem lorem</h1>
    
    <p>Sizing with 'rem' (root em, base their calculations on the font-size declared on the root body element):</p>
    <h1 id="rwdfonts4">Lorem lorem</h1>
        
    <p>Sizing automaticly using 'fittext.js':</p>
    <h1 id="rwdfonts5">Lorem lorem</h1>
           
    <p>Sizing with 'vm': 1/100 viewport: <a id="viewport"></a>px. (Calculated on load time. IE10+. iOS6+)</p>
    <h1 id="rwdfonts6">Lorem lorem</h1>
    
    <p>Sizing with 'vmax': 1% of viewport's larger</p>
    <h1 id="rwdfonts6">Lorem lorem</h1>
<!--
1vw = 1% of the viewport width calculated on load time,
1vh = 1% of the viewport height calculated on load time

A full vw web example (ccs-tricks):
http://css-tricks.com/examples/ViewportTypography/
-->
    
</article>



<!-- 
Feature detectiong:
You could run the Modernizr to test the feature and load up FitText.js if no support is detected.

Modernizr 2.6.2 supports viewport unit tests: vhunit, vwunit, vmaxunit, vminunit detection
http://modernizr.com/news/modernizr-262/
-->

/* setting our minimum to 18pt */
#rwdfonts0 { font-size: 18pt; }
#rwdfonts1 { font-size: 24px; }
#rwdfonts2 { font-size: 150%; }
#rwdfonts3 { font-size: 24px; font-size: 1.55em; }
#rwdfonts4 { font-size: 24px; font-size: 1.55em; }
#rwdfonts5 { /* using fittext.js to setting the values */ }
#rwdfonts6 { font-size: 24px; font-size: 8.325vw; }
#rwdfonts7 { font-size: 24px; font-size: 8.325vw; }

body {
    background: rgb(201, 148, 53);
    background: rgba(201, 148, 53, 0.82);; 
    color: #fff;
    font: 100% sans-serif;
}
h1 {
    background: #fff;
    text-align: center;
    color: tan;
    font: "Impact";
    display: inline-block;
    text-shadow:#253e45 -1px 1px 0, red -2px 2px 0, blue -3px 3px 0, green -4px 4px 0;
    width: 100%;
    margin: 5% auto 5%;    
    height: 65px;
    -moz-border-radius: 25px 10px / 10px 25px;
    border-radius: 25px 10px / 10px 25px;
}
.container {
    margin: 1rem ;
}
.container p {
    font-size: 1.95vmax;
}