<p><span>Small caps are short capital letters designed to blend with lowercase text. They’re usually slightly taller than lowercase letters.</span> Small-cap formatting works by scaling down regular caps. But compared to the other characters in the font, the fake small caps that result are too tall, and their vertical strokes are too light. The color and height of real small caps have been calibrated to blend well with the normal uppercase and lowercase letters.</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";
}
}
View Compiled
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');
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.