Changing font size on a page with javascript for better user experience

Today we will learn to add a simple functionality to web pages. Visitors on a web page will be able to increase or reduce the font size of text as per their choice. This is an example of how javascript can be used for enhancing user experience. If anyone is having a problem with small font size, he should have an option to make it readable. I have seen this feature on many sites and if you ask me, I think all sites should provide this feature.

It happens that sometimes the font size on a page is so small that its unreadable and sometimes annoyingly large. Agree that browsers provide the feature to increase or reduce font size of a page, how many actually know it?

Lets create an example in which user will be able to increase/reduce font-size at his will.

View Demo

If you want to have a look at source code, you can always do so by doing view source on your browser.

Create a html page with the following markup:

<html>
	<head>
		<script type="text/javascript"></script>
	</head>
<body>
<p>
	<a href="javascript:void(0);" onclick="changeFontSize('content','2');">
            Increase font
        </a>

	<a href="javascript:void(0);" onclick="changeFontSize('content',-2);">
            Decrease font
        </a>
</p>
<p id="content" style="font-size:12px;">
	My name is Sherlock Holmes. It is my business to know
what other people don't know.
</p>
</body>
</html>

This page contains a p tag with id set to content with some text inside it. Note that the font-size property has been set for content as 12px inline.

Above are 2 hyperlinks, one for increase font and other for reducing it. Both of them call a javascript function changeFontSize() when it is clicked. changeFontSize() accepts 2 parameters. First is the id of the container for which you wish to increase/decrease font. Second one is by how much you wish to increase or decrease it.
For increasing font I have passed 2 to it, and for the decrease font button the value is -2. Each time any of the links is clicked, it will increase or reduce the font size by 2px. Change this value to what suits you.

Now we will add the definitions for function changeFontSize. Insert the following code between script tags in the head of your html page.

function changeFontSize(element,step)
{
	step = parseInt(step,10);
	var el = document.getElementById(element);
	var curFont = parseInt(el.style.fontSize,10);
	el.style.fontSize = (curFont+step) + 'px';
}

In fact, you can squeeze above 4 lines into a single line:

function changeFont(element,step)
{
	document.getElementById(element).style.fontSize =  (parseInt(document.getElementById(element).style.fontSize,10) + parseInt(step,10)) + 'px';
}

Use whichever you prefer.

Now you are done. Refresh the page and click on Increase Font/Decrease Font links.Font size will change accordingly.

How does this happen actually?

  • First convert step as an integer
  • Then use javascript function getElementById to get the html element.
  • Then use the style property to get the font size that has been set for the element. element.style.fontSize will give us 10px. Pass it to function parseInt to get an integer value – 12 in this case.
  • Finally reset the fontSize property for the element by adding the value of step.

Simple :)

There may be other methods/variations also by which you can control the font size. For example, create a combo box with values for font size as smaller,small,medium,large and largest.Each value of combo box will have a specific font size associated with it say 8px,10px,12px,14px and 16px respectively. Onchange event will set the font size according to selected value.

Thats all. Hope you enjoyed the post.

For more information on changing the styles/css of html elements by javascript you can read my previous post.

15 thoughts on “Changing font size on a page with javascript for better user experience

  1. Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  2. Joe Beck

    So far all scripts I found on the internet (incl yours) use style.fontSize.
    This works fine if the style is determined within the HTML file (either by inline css, or by a css sheet in the HEAD section, or by plain old HTML like H1)
    However, it does not work when you use an external CSS style sheet, as most people do these days.
    style.fontSize does not seem te be able to extract the font style that is set in an external sheet.
    Are you familiar with this and do you now a solution?
    Thanks

    Reply
  3. Vijay Post author

    hi Joe,
    thanks for the comment.
    style.fontSize does not get the information from external stylesheet.
    Reason for not manipulating this through external css is that it is very painful(browser issues). There is no inbuilt function to do so. Hence you have to manipulae things. Suggest you look at this article at quirksmode http://www.quirksmode.org/dom/getstyles.html . This explains why we avoid using external css for simple tasks like the one mentioned in post above.

    Reply
  4. Vijay Post author

    hi Tony,
    thanks for the comment. Yes, these changes will not apply to newly visited pages. This is because all this is javascript , happening on the browser. Once you navigate away from page, you lose the current state of browser.

    Reply
    1. Kevin

      This is an old post, but thought I’d ask add to the question because it is a great script. I know nothing about cookies however, and it seems like this would be really valuable for this script. How hard would it be to create a cookie for the ‘content style font-size’? I’d like to learn if anyone has a solution. Thanks, kevin

      Reply
  5. Dan

    I have 2 issues that you can only change the font size for one instance on the page.. Like I would use it in a but want it to also change another on the same page and it won’t work… That sucks or maybe there is specific way to use it that I don’t know. Second, there are no cookies so the font size chosen won’t cary all throughout a site.

    Reply
  6. Himanshu

    I have a issue ::

    Their is a six link in my footer.
    I need that if someone click on that(link1), that link should appears bold, and others would be in normal font weight.

    and if click another link(link2) then that link should appears bold, and others would be in normal font weight.

    pages goes on refresh.
    I m not able to use php their.

    Please help me out.

    Thanks

    Reply
  7. Pingback: Code font html page web - Html page - Web page

  8. Sudhir

    Hi Vijay, can you suggest me how to fix a decimal font for example like ’12.3′ or ’12.6′ to ’12′ or ’13′ respectively by using javascripting, as i am using illustrator for designing. Please suggest . Thanks.

    Reply
  9. stella

    Thanks – this was the most useful change font size script I could find online for someone like me with minimal knowledge about this stuff. Question though – how can I limit the number of times someone can increase/decrease or set max/min font sizes? Thanks!

    Reply
  10. Vito Macchia

    I think this is far way better :P

    var fSize=1;

    function setup()
    {
    document.body.style.fontSize=fSize+"em";
    }

    function augment()
    {
    fSize+=0.1;
    console.log(document.body.style.fontSize)
    document.body.style.fontSize=fSize+"em";
    }
    function reduce()
    {
    fSize-=0.1;
    console.log(document.body.style.fontSize)
    document.body.style.fontSize=fSize+"em";
    }

    +
    -

    This is some text in a paragraph

    Yet Some text in a paragraph

    Text outside elements

    text
    Big Text

    Reply

Leave a Reply