How do I change the size of text between capital and lowercase letters?

user_17937371 0
Viewed 120

Is it possible to change the size of text based on whether it is a capital letter or if it is a lowercase letter within HTML/CSS? I am working with a font called Staatliches that only has uppercase letters, but I would like for the lowercase letters to be slightly smaller than the capital letters within the styling of the text. Is it possible to make this change within the CSS? Thank you!

css html
1 Answers

There's not a wealth of character specific css selectors (like p::first-letter), so I think you're best bet would be to use JavaScript to execute some regex matching similar to ncubica's solution here and wrap the capital letters in a their own span.

Working Example Below: 

function wrapCapsWithSpan (className) {    
    var regex = new RegExp(/[A-Z]+/g); //matches on groups of capital letters, remove the '+' to wrap individually
    let largeCaps = document.querySelectorAll('.staatliches')
    return [...largeCaps].map((p) => {
        p.innerHTML = p.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

window.onload = wrapCapsWithSpan("biggest-caps");
.staatliches {
  text-transform: uppercase; // simulating Staatliches font
  font-size: 10px;
}

.biggest-caps {
  font-size: 40px;
}
<p class="staatliches">Large CAPITALS BIGgER</p>
<p class="staatliches">Second Paragraph!</p>

user_76809940
Related