What is a good way to solve the problem of changing the font size on a website

Question

I need to add some icons for the font size and font size on the website. Some time has passed since I did this, and did not know at what point the result was. Is jQuery the preferred method of handling this or pure CSS. Also, I need to do something special with my font sizes. Am I using em instead of px?

Thanks in advance.

Answer 1

I would think about this by setting all units to em s. Then simple scaling of all this at once with the help of simple javascript, for example:

  $(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"); } ); }); 

Answer 2

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

Answer 3

You can do this in several ways.

I would rather switch stylesheets every time I click up or down. You can use jQuery or just plain ole 'javascript for this.

In this case, whether you use em or px, it doesn't matter if the size increases or decreases in each stylesheet.

Alternatively, you can use JavaScript to simply resize text in a specific element. Again, units do not matter much. You just change the value (e.g. from 12px to 14px or from 1em to 1.5em)

Answer 4

CSS should work fine. Use em because the client can still set font sizes wherever they like. For example, if they have a font size starting with 14 px, em 2 would set it to 28 px.

If you set the font size in px, you are setting yourself up for evil clients who do not have control over the font sizes in their browser of choice.

Answer 5

I would use pure css (although I would use jQuery / js to change the BASE font size in real time) it is better to use ems, although it can become really frustrating like an ems cascade. (more on this later)

You need the base font size set in pixels at the top of the resize area (12px is 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 the subparagraph with a font size of 0.8em the paragraph will be smaller than expected, since its base will be a div with a font size of: 0.9em.

after you do all this, although all you have to do is resize the base font in pixels!

Answer 6

Usually I use 62.5% of things on the body (so 1em == 10px), and then determine all the font sizes on the site in ems. To scale the fonts, I do one of two things:

• Change jQuery css in the main div container and set the percentage of font size. This will change all text on the site in a similar way.

• Change the jQuery class class on the body to indicate the new font size. Then you can have CSS rules for scaling different parts of the page in different ways (just scale a little, copy the body, etc.).