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>
<script src="https://cdn.rawgit.com/simplefocus/FlowType.JS/master/flowtype.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
// jQuery v1.11.3
// on DOM ready
$('#nav-em-padding, #nav-px-padding, #nav-percentage-padding').flowtype({
minFont : 20,
maxFont : 120,
fontRatio : 6
});