FlowType & EM Values

Elements that have a padding set with em will rescale on window reload and hence create an unpleasant jump.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="nav-em-padding">Menu</div>
<div id="nav-px-padding">Menu</div>
<div id="nav-percentage-padding">Menu</div>

CSS

#nav-em-padding {
	display: block;
	margin: 0;
	padding: 0;
	font: 1.2rem Helvetica, Arial, sans-serif;
  padding-left: 0.6em;
  border: 4px solid slategrey;
  border-radius: 20px;
}

#nav-px-padding {
	display: block;
	margin: 0;
	padding: 0;
	font: 1.2rem Helvetica, Arial, sans-serif;
  padding-left: 60px;
  border: 4px solid slategrey;
  border-radius: 20px;
}

#nav-percentage-padding {
	display: block;
	margin: 0;
	padding: 0;
	font: 1.2rem Helvetica, Arial, sans-serif;
  padding-left: 6%;
  border: 4px solid slategrey;
  border-radius: 20px;
}

JavaScript

/*
* FlowType.JS v1.1
* Copyright 2013-2014, Simple Focus http://simplefocus.com/
*
* FlowType.JS by Simple Focus (http://simplefocus.com/)
* is licensed under the MIT License. Read a copy of the
* license in the LICENSE.txt file or at
* http://choosealicense.com/licenses/mit
*
* Thanks to Giovanni Difeterici (http://www.gdifeterici.com/)
*/

(function($) {
   $.fn.flowtype = function(options) {

// Establish default settings/variables
// ====================================
      var settings = $.extend({
         maximum   : 9999,
         minimum   : 1,
         maxFont   : 9999,
         minFont   : 1,
         fontRatio : 35
      }, options),

// Do the magic math
// =================
      changes = function(el) {
         var $el = $(el),
            elw = $el.outerWidth(),
            width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
            fontBase = width / settings.fontRatio,
            fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
         $el.css('font-size', fontSize + 'px');
      };

// Make the magic visible
// ======================
      return this.each(function() {
      // Context for resize callback
         var that = this;
      // Make changes upon resize
         $(window).resize(function(){changes(that);});
      // Set changes on load
         changes(this);
      });
   };
}(jQuery));

// jQuery v1.11.3
// on DOM ready

$('#nav-em-padding, #nav-px-padding, #nav-percentage-padding').flowtype({
  minFont   : 20, 
  maxFont   : 120,
  fontRatio : 6
});