In this tutorial I am going to explain how to change the font size of text content in a paragraph dynamically using jquery. We can change the font-size using jQuery css() function.When page will load font-size will be 14px .When user will click  Increase Font button  the font of the text will increase by 2px. When user will click Decrease Font  button the font of the text will decrease by 2px. Check out the demo to see how it works with the help of the given fiddle link.

Working Demo: https://jsfiddle.net/qcng788n/24/

The html of the page goes like:

<p id="wrapper" style="height:260px">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
</p>
<button id="large">Large Font</button>
<button href="#" id="small">Small Font</button>

This is the css of the page is given below:

#wrapper{background-color:#FF4F49;height:400px;color:#205081;height:260px}
#large,#small{background-color:#23517F;color:#FF4F49;border:none;padding:15px 10px}

The jquery goes like this:

 $(document).ready(function() { 
  $('#large').click(function(){    
        defaultSize= parseInt($('#wrapper').css('font-size')) + 1;
  if(defaultSize<=20)
        $('#wrapper').css('font-size', defaultSize);
        });  
  $('#small').click(function(){    
        defaultSize= parseInt($('#wrapper').css('font-size')) - 1;
  if(defaultSize>=12)
        $('#wrapper').css('font-size', defaultSize);
        }); 
 });