auto resize text (font size) when resizing window?

Question

I have been trying(in vain) to build a page whose elements would resize as I changed the window size. I have it working in css for images no problem, but I can't seem to accomplish the same for text, and I am not sure it is even possible in CSS. And I can't seem to find a jquery script that accomplishes this.

When a user resizes the window, I essentially want the page to scale dynamically and fluidly, without the user having to invoke page zoom. This works fine on my img divs via css, but not for the text, which stays the same size.

Any ideas?

Eurypterid

What code do you have so far? – Algae

Answer 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);

Larch

Thanks for the response. Can you point me to the script you used? Thanks! – Eurypterid

This code is a little broken out of the box. First of all I am unsure why there is a fudge factor of -1, probably had to do with the project this was used on. Also, you don't define the variable 'fontsize'. Other than that, thannks for the example. – Homogeneity

Finally edited in the fontsize variable. As for the -1, I think I used it as extra insurance so that the resized text wouldn't be too large. Might just have been paranoia, feel free to try without it. – Larch

Answer 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).

Olszewski

Answer 3

You can do this with CSS3 media queries, specifying different base font-sizes depending on browser size. There is a good article for this on A List Apart

For IE support you might be able to hack it using CSS expressions

This requires you to use a fixed base font-size, for instance on the body tag, and percentage or em based sizes elsewhere.

Substrate

Answer 4

Building on Lizzan's answer, here is a version using the square root of both width and height to get a proportional sizing:

// When document has finished loading
$(document).ready(function() {

    var resizeText = function () {
        // Standard height, for which the body font size is correct
        var preferredFontSize = 180; // %
        var preferredSize = 1024 * 768;

        var currentSize = $(window).width() * $(window).height();
        var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize);
        var newFontSize = preferredFontSize * scalePercentage;
        $("body").css("font-size", newFontSize + '%');
    };

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

});

Demo: http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/

Willenewillet

Answer 5

I'm using the trick from http://practicaltypography.com/end-credits.html#bio M. Butterick:

    <style type="text/css">
<!--adattamento font-size a browser width-->
        @media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}}
<!--body-format-->
            body {
        max-width:1000px;
        min-width:520px;
        line-height:1.33em;
        margin:1em;
        background-color:#f7f7f7;
        font-family:Source Sans Pro;
        color:#361800;
        }
    </style>

Semeiology

You might want to provide a bit more context and read the paragraph Provide context for links from How do I write good answers?. – Metabolic

i copied only the font-size line.. realy nice solution :) – Jackquelinejackrabbit

Answer 6

roryf is on the right track!

Media Queries is (one of) the answer(s).

The trick here is to use % for font sizes everywhere starting from body. This way the font size get's inherited and when you change it in body, it get's changed everywhere.

Try something like:

body { font-size: 100% }
h1 {font-size: 200% }

@media all and (max-width:600px) {
    body {font-size: 70%}
}

When the website width gets smaller then 600px, then the font size will turn to 70% of what it was everywhere, where % is used (also h1 in this example.)

Kenya

Answer 7

Lizzans answer is perfect! Leave the -1 where it is! Kittens were dying all over the place when I removed it.

Instead of the fontsize variable, just set it to the standard fontsize for your page. Mine was 16.

Remembrancer

Answer 8

You can make resizible text more simple. This solution works for me. http://jsfiddle.net/VooDi/dka48dx8/

For body set font-size, that equivalent to your current window inner width;

for jsfiddle 560 px;

body {
    font-size: 560px; 
}

js:

onresize=onload=function() {
    document.body.style.fontSize=window.innerWidth+"px"
}

and for needed element set font size in percent

<h1 style="font-size:5%">Resize this text!!!!</h1>

Thats all. Hope this helps someone.

Overshine

Answer 9

Check this out : https://jsfiddle.net/bheng/dp5jh7nu/

$("h1").css("font-size", $(window).width()/5);
$(window).resize(function() {
    $("h1").css("font-size", $(window).width()/5);
});

Involucel