HI

Add below CSS

<style type=”text/css”>

body {font-size:62.5%;} /* Set the size of 1em to 10px in all browsers */

body.extraWide {font-size:85%;}
body.wide {font-size:75%;}

body.narrow {font-size:50%;}
body.extraNarrow {font-size:40%;}

</style>

and add jQuery with the support of  a set timeout so it would scale in real time. It doesn’t reverse scale though.

$(document).ready(function() {scaleFont();});

function scaleFont() {

var viewPortWidth = $(window).width();

if (viewPortWidth >= 1900) {$(‘body’).addClass(‘extraWide’).removeClass(‘wide, standard, narrow, extraNarrow’)}
else if (viewPortWidth >= 1400) {$(‘body’).addClass(‘wide’).removeClass(‘extraWide, standard, narrow, extraNarrow’)}
else if (viewPortWidth >= 1000) {$(‘body’).addClass(‘standard’).removeClass(‘extraWide, wide, narrow, extraNarrow’)}
else if (viewPortWidth >= 700) {$(‘body’).addClass(‘narrow’).removeClass(‘extraWide, standard, wide, extraNarrow’)}
else {$(‘body’).addClass(‘extraNarrow’).removeClass(‘extraWide, standard, wide, narrow’)}

setTimeout(scaleFont, 100);

}

or you can use it re sizes only if window is resized (avoiding setTimout), and you give body only the exact class it needs

$(document).ready(function() {

scaleFont();

});
$(window).resize(function() {

scaleFont();

});


function scaleFont() {

var viewPortWidth = $(window).width();

if (viewPortWidth >= 1900) {$(‘body’).attr(‘class’,’extraWide’);}
else if (viewPortWidth >= 1400) {$(‘body’).attr(‘class’,’wide’);}
else if (viewPortWidth >= 1000) {$(‘body’).attr(‘class’,”);}
else if (viewPortWidth >= 700) {$(‘body’).attr(‘class’,’narrow’);}
else {$(‘body’).attr(‘class’,’extraNarrow’);}

}

 

Sources: http://stackoverflow.com/questions/3146395/how-to-increase-font-size-based-on-window-width