A Pen by Ian Farb.

index.html

<div id="wrapper">
  <div id="controls">
    <a href="#" id="small">A</a>
    <a href="#" id="medium" class="selected">A</a>
    <a href="#" id="large">A</a>
  </div>
<h1>Header</h1>
  <h2>Subheader</h2>
<p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.
</p>

</div>

Resize-Fonts-with-jQuery.markdown

Resize Fonts with jQuery

Tinkering away with some more jQuery. Still pretty new to me but I am finding it very fun and challenging so far. If there is something that could be better please feel free to share. Thanks.

Updated pen to include a selected state for the different sizing options.

A Pen by Ian Farb on CodePen.

License.

script.js

$(document).ready(function(){
  
  $("#small").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"24px"});
    $("h2").animate({"font-size":"16px"});
    $("p").animate({"font-size":"12px", "line-height":"16px"});
    
  });
  
  $("#medium").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"36px"});
    $("h2").animate({"font-size":"24px"});
    $("p").animate({"font-size":"14px", "line-height":"20px"});
    
  });
  
  $("#large").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"48px"});
    $("h2").animate({"font-size":"30px"});
    $("p").animate({"font-size":"16px", "line-height":"20px"});
    
  });
  
  $( "a" ).click(function() {
   $("a").removeClass("selected");
  $(this).addClass("selected");
  
 });

});

style.css

*      {  margin:0; padding:0;
  font-family:Arial, Helvetica, sans-serif; text-decoration:none;}

body       {  background:#e7e7e7;}

#wrapper   {  width:400px;
              margin: 0 auto;
              padding:40px;
              background:#fff;
              box-shadow:0 0 50px 0 rgba(0,0,0,.25);}

#controls  {  float:right;
              padding:2px;
              width:25px;
              background:#333;
              position:fixed;
              margin:0 0 0 440px;
              text-align:center;
              transition:.25s ease-out;}

#controls a
           {  font-size:24px;
              color:#aaa;
              display:block;
              font-weight:bold;
              padding: 5px;}

#controls a:hover
           {  color:#fff;
              background:#000;
              transition:.25s ease-out;}

a.selected  {  background:#000;
               color:#fff !important;}

#small     {  font-size:10px !important;}
#medium    {  font-size:14px !important;}
#large     {  font-size:18px  !important;}

.small     {  font-size:75%;}

h1         {  font-size:36px;
              font-weight:bold;}

h2         {  font-size:24px;
              margin: 10px 0;}
 
p          {  font-size:14px;
              line-height:20px;}