Allow user to change the web page font sizes - ASP.Net

Question

I want to provide a feature on my website to let users increase and decrease the font size by clicking on some stuff (like + and - image etc). However I also want:

• make sure that when the font size is increased, my website layout doesn't get messed up
• test the scenario out on my machine to make sure about the point above

I think what I want is a solution that is independent of the browsers font size and machines font size otherwise i would have no way of testing and controlling the results

in my web application, i haven't hard coded font sizes but in some place i have specified text boxes length like width = 50px which i think needs to be changed..so what unit should i use?

i am thinking of using themes and defining the font sizes of labels and text boxes as small, smaller, bigger etc ..not sure if that will work?

---

Update: I asked the question on another forum as well: http://forums.asp.net/t/1453926.aspx

Basically, from all the answers, I gathered that there are two approaches:

1. Use em and body font size: body { font-size: 62.5%; } p { font-size: 1.2em; }

and when you have to increase/decrease font size, simply increase/decrease the body font size percentage

1. Use absolute font sizes: css defines a range (7) of font sizes from xx-small to xx-large so you can define font-size: small in css..

i found a good article on these font sizes at: http://meyerweb.com/eric/articles/webrev/199908a.html

however none of these two options is what i was looking for. I was looking for setting absolute sizes in the real sense so if i set font-size:large, and then i increase the browser size, font sizes should remain same..right now even with these"absolute font sizes" its dependent on current browsers font size. Any help????

Answer 1

I would use jQuery to do this. This question wasn't exactly the same, but the highlighted answer is very close to what you want to achieve:

http://stackoverflow.com/questions/891980/change-font-size-in-a-webpage/892031

This one is also quite good: http://webrocket.ulmb.com/ability, although the demo is a little pants

Answer 2

jQuery, see Easy text resizer with jQuery

Answer 3

You might want to look into some surveys to see if this is a desired feature. Most people I know will use their web browser's built in functionality to manipulate font size. Throughout my own testing and development on various sites, most clients ignore font-size controls on websites. Might save you some time in the long run :)

If you find you actually implement this, the biggest concern is to make sure that your font-sizes are increased in a balanced matter, and that your layout and css design patters are "fluid" and "expandable". This is actually sort of hard, because if the site design is a fixed-width layout, then you may run into problems with the content not being able to fit anymore, which can be pretty disheartening with what you're trying to accomplish.

If it's not though, then again just make sure to maintain a balance between elements and their font-sizes. Personally though, I would leave the font-changes up to the web browser. Most browsers are pretty good about manipulating your layouts on their own.