Effective Way of Increasing/Decreasing Font Size of All Elements on Page

Question

In order to improve UX, I'm planning to have a font size increase/decrease/reset tool on all the pages of my website (A-, A, A+)

The problem I'm facing is that the font size used by different elements on the page is not uniform. Some are 14px, some are 18px, some are 12px and some are 15px.

As such, using the body tag for manipulating the font size will not get the desired result.

Is there a solution which will go through each element (get its present size) and increase its font size by 1 if A+ was clicked or decrease the size by 1 if A- was clicked and reset back to the originals if A was clicked?

PS: I'm open to jQuery solutions too.

Answer 1

That's why em and rem units were invented instead of px. rem refer to the root font size, which then makes increasing and decreasing the whole document's font size super easy using body{ font-size : 120% };

But, since you can't use rem, here's a dirty solution using jQuery :

var $affectedElements = $("p"); // Can be extended, ex. $("div, p, span.someClass")

// Storing the original size in a data attribute so size can be reset
$affectedElements.each( function(){
  var $this = $(this);
  $this.data("orig-size", $this.css("font-size") );
});

$("#btn-increase").click(function(){
  changeFontSize(1);
})

$("#btn-decrease").click(function(){
  changeFontSize(-1);
})

$("#btn-orig").click(function(){
  $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , $this.data("orig-size") );
   });
})

function changeFontSize(direction){
    $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , parseInt($this.css("font-size"))+direction );
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p style="font-size : 30px">This text is initially 30px</p>
  <div>
    <p style="font-size : 20px">This text is initially 20px</p>
    <p style="font-size : 10px">This text is initially 10px</p>
    
  </div>  
</div>

<button id="btn-decrease">A-</button>
<button id="btn-orig">A</button>
<button id="btn-increase">A+</button>