 i have done javascript text resizers a couple of different ways before but i think i found my favorite way on a recent project in previous projects i have messed around with determining the current font size and adjusting it appropriately but in my opinion simplifying things has made it a much better implementation if you want to skip right to the demo feel free view demo disclaimer let me first say that i have started to size text in pixels and soft serving ems to ie6 there are tons of different font sizing techniques you can use but this is what is working for me so use whatever technique you please and adjust as needed another thing i hate text resizers in my opinion there is no reason to duplicate browser functionality i feel the same about back and print links but sometimes the functionality is requested so i have to build it concept the idea is very simple you click on the text size you want and a class is added to the body to indicate which size the user has selected then we take advantage of that body class when we are writing our css to size the different elements appropriately code lets first start as we always should by creating the markup ul class= resizer li class= small a href= a a li li class= medium a href= a a li li class= large a href= a a li ul jquery the markup was simple enough so lets get started on the jquery first we want to execute our code when the document is loaded and then add an event when one of the resizer links are clicked $ document ready function $ resizer a click function next we want to get the class of the parent of the link that has been clicked remove any of the resizer classes from the body and add the new one $ document ready function $ resizer a click function var textsize = $ this parent attr class $ body removeclass small medium large addclass textsize we also dont want to regular action of the link to be followed so we need to return false $ document ready function $ resizer a click function var textsize = $ this parent attr class $ body removeclass small medium large addclass textsize return false i also think it is important to remember what text size a user has selected while browsing the site so we will take advantage of the jquery cookie plugin to help us with that we will set a cookie that denotes which size the user has selected $ document ready function $ resizer a click function var textsize = $ this parent attr class $ body removeclass small medium large addclass textsize $ cookie text size textsize path expires 10000 return false finally we just need to add a check to the beginning of the script so that if that cookie is set we add that size as a class to the body $ document ready function if $ cookie text size $ body addclass $ cookie text size $ resizer a click function var textsize = $ this parent attr class $ body removeclass small medium large addclass textsize $ cookie text size textsize path expires 10000 return false css now is where we get to the really powerful part of doing the text resizing like this the css we can start by simply stating our text size when it is in the small default state body font 12px 18px arial sans serif then we just need to make a simple adjustment for the medium and large sizes medium font size 16px line height 22px large font size 20px line height 26px so you can just carry through this idea for the rest of the elements that have been assigned a font size h1 font size 30px line height 36px medium h1 font size 34px line height 40px large h1 font size 38px line height 44px h2 font size 24px line height 30px medium h2 font size 28px line height 34px large h2 font size 32px line height 38px h3 font size 18px line height 24px medium h3 font size 22px line height 28px large h3 font size 26px line height 32px view demo the idea is very simple and it really separates the presentation and behavioral layers so what do you think do you have another technique that you like 