auto resize text (font size) when resizing window?

Solution 1:

I've had to do this myself. What I did was that I set a base text size for the body, and percentages for all other sizes. I then used a simple jQuery script to change the base size on window resize. The other sizes then update as well.

I used something like this:

$(function() {
    $(window).bind('resize', function()
    {
        resizeMe();
        }).trigger('resize');
    });

and in the resizeMe-function, I had this:

//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;

var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);

Solution 2:

Try a jQuery plugin like FitText. It automatically sizes text to fit the width of the parent element.

Another jQuery plugin with the same goal is BigText (demo).