Small Caps on Uppercase in CSS
I just found out how to apply small caps to uppercase letters using CSS.
As a newbie in web design and typography, I was trying to apply small caps to abbreviations in the texts. I knew the following code:
.small-caps {
font-variant: small-caps;
}
However, it didn’t work for the abbreviations which are all uppercase letters. I thought it was caused by the font since I could apply small caps to the navigation bar, but changing the font for the texts was not helpful. After some digging around I found that I need to transform the uppercase letters into lowercase first. In other words, I need:
.small-caps {
text-transform: lowercase;
font-variant: small-caps;
}
By the way, I didn’t use small caps on abbreviations in the end. It felt unnatural. I think the best option would be using a native small caps font instead, but a matching one has to be found first.