CODEWITHSUNDEEP
jquerycssaccessibility
webnoob
webnoob

Reputation: 15934

What is a good way to deal with font resizing on a website

I need to put some icons for font size up and font size down on a website. It has been a while since I have done this and didn't know what was the score these days. Is JQuery the preferred method to deal with this or pure CSS. Also, do I need to do anything special with my font sizes i.e use em instead of px?

Thanks in advance.

Upvotes: 7

Views: 817

Answers (6)

Ioannis Karadimas
Ioannis Karadimas

Reputation: 7906

I would go about it, by setting up all units in ems. Then, it's a simple matter to scale all of it at once using a simple javascript, like so:

    $(function () {
        var fontSize = 1.1;
        $("#larger").click( 
            function () { 
                console.log("click");
                fontSize += .1;
                $("body").css("font-size", fontSize + "em"); 
            } 
        );

        $("#smaller").click( 
            function () { 
                console.log("click");
                fontSize -= .1;
                $("body").css("font-size", fontSize + "em"); 
            } 
        );
    });

Upvotes: 5

mpdonadio
mpdonadio

Reputation: 2941

Normally, I use the 62.5% thing on body (so 1em == 10px), and then define all font sizes on the site in ems. For font scaling, I do one of two things:

  1. Do a jQuery css change on the main container div, and set a font-size percentage. This will change all text on the site in a similar manner.

  2. Do a jQuery class change on body to signify the new font size. Then you can have CSS rules to scale different parts of the page in different ways (only scale nav a little, body copy more, etc).

Upvotes: 1

dovidweisz
dovidweisz

Reputation: 1234

I would use pure css (although i would use some jQuery/js to modify the BASE font size live) it's best to use ems although it can get really frustrating as the ems cascade. (more on this later)

You need a base font size set in pixels at the top of the resizable area (12px is the standard) and everything under that should be in ems.

now for the frustrating part: keep in mind that if you have a div with font-size:0.9:em; and a nested paragraph with font-size 0.8em the paragraph will be smaller then expected as its base will be the div with font-size:0.9em.

once you work all this out though all you need to do is change the base font-size in pixels!

Upvotes: 2

Chris
Chris

Reputation: 377

CSS should work fine. Use em because the client can still set font sizes to there liking. For example if they have font sizes starting at 14 px, em 2 would set it to 28 px.

If you set font sizes in px you're setting yourself up for angry clients who have no control over font sizes in their browser of choice.

Upvotes: 2

Tim Rogers
Tim Rogers

Reputation: 21723

If you use percentages as font sizes within your CSS, you can just set the font size once on your BODY element and change that one value dynamically. Everything else will become a percentage of that.

Upvotes: 3

simshaun
simshaun

Reputation: 21476

You can do this a few ways.

What I would prefer is to switch stylesheets on each up or down click. You can use jQuery or just regular ole' JavaScript to accomplish that.

In this case, whether you use em or px makes no difference, as long as the size goes up or down in value in each stylesheet.

Alternatively, you could use JavaScript to simply alter the size of the text in a specific element. Again, units don't really matter. You're just altering the value (e.g. 12px to 14px, or 1em to 1.5em)

Upvotes: 2

Related Questions