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

Your best and cleanest bet is using rem mixed with jQuery.

The difference between my answer and the one above/what you are asking for, is that instead of increasing/decreasing all of the font-sizes by 1, this will only change the root font-size, which will cascade down and make all the other fonts scale accordingly.

$('#_biggify').on('click', function() {
  var fontSize = $('html').css('font-size');
  var newFontSize = parseInt(fontSize)+1;
  
  $('html').css('font-size', newFontSize+'px')
})

$('#_smallify').on('click', function() {
  var fontSize = $('html').css('font-size');
  var newFontSize = parseInt(fontSize)-1;
  
  $('html').css('font-size', newFontSize+'px')
})

$('#_reset').on('click', function() {
  $('html').css('font-size', '32px')
})
html {
  font-size: 32px;
}

.smaller {
  font-size: 0.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Here is a regular piece of text in your document
</div>

<div class="smaller">
Here is text that should be smaller than the rest
</div>

<button id="_biggify">
Make Bigger
</button>

<button id="_smallify">
Make Smaller
</button>

<button id="_reset">
Make Default
</button>

Here is a JSFiddle: https://jsfiddle.net/Hybridx24/L3yzuvjr/


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>

Tags:

Javascript

Css

Jquery

Recent Posts