<p><span>Small caps are short cap­i­tal let­ters designed to blend with low­er­case text. They’re usu­ally slightly taller than low­er­case let­ters.</span> Small-cap for­mat­ting works by scal­ing down reg­u­lar caps. But com­pared to the other char­ac­ters in the font, the fake small caps that result are too tall, and their ver­ti­cal strokes are too light. The color and height of real small caps have been cal­i­brated to blend well with the nor­mal upper­case and low­er­case let­ters.</p>
<p class="small">— Matthew Butterick, <a href="http://typographyforlawyers.com/small-caps.html">Typography for Lawyers</a></p>


<button>Turn small caps</button>

p {
  font-size: 20px;
  margin-bottom: 10px;
  padding-left: 10px;
  font-style: normal;
}

body {
  background-color: #ddd;
  font-family: "chaparral-pro";
  margin: 0;
  padding: 0;
}

span {
  transition: color .5s linear;
}

.smcp {
  span {
    font-feature-settings: "smcp" 1;
  }
  
  span {
    color: lighten(red, 10);
  }
}

.small {
  font-size: 15px;
}

a {
  color: #888;
  text-decoration: none;
}

button {
  display: block;
  cursor: pointer;
  margin-left: 10px;
  
  &:after {
    content: " on";
  }
  
  &.on:after {
    content: " off";
  }
}

var btn = document.querySelector("button"),
    body = document.documentElement,
    activeClass = "smcp";

btn.addEventListener("click", function(e){
  e.preventDefault();
  body.classList.toggle(activeClass);
  btn.classList.toggle('on');
});