JQuery dynamic font resize

This is a way I found to perform a dynamic font resize when the browser window changes dimension. It can be useful to keep the page ratio regardless the resolution the user uses.

HTML markup

<head>
    [...]
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/font-resize.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
             {       
                 fontResize();
                 $(window).bind('resize', function() {
                     fontResize();
                 });
             }
        );
    </script>
</head>

This piece of code binds the fontResize() function to the window resize event. Every time the window changes its size, the function is called.

Please note the first call to fontResize(), which simply sets the font size based upon the initial window size.

Code snippet

function fontResize() {
    //Set default resolution and font size
    var resolution = 1024;
    var font = 13;

    //Get window width
    var width = $(window).width();

    //Set new font size
    var newFont = font * (width/resolution);
    $('body').css('font-size', newFont);
};

View demo