Simple Clean JS script to create Faux Small Caps
.sm-cap {
text-transform: uppercase;
}
.sm-cap span {
display: inline-block;
}
.sm-cap span:first-letter {
font-size: 1.2em;
}
var spanWrap = document.getElementsByClassName('sm-cap');
for(var i=0; i < spanWrap.length; i++) {
var t = spanWrap[i];
t.innerHTML = '<span>' + t.innerHTML . split(' ') . join('</span> <span>') + '</span>';
}
I needed to create some faux small caps that were only slightly smaller than the full cap. Font-variant was too drastic so instead I wrapped each word in a <span> set the span to inline-block and used :first-letter to increase the font-size of the first letter in each word.