Small Caps on Uppercase in CSS

Published | Go Back

I just found out how to ap­ply small caps to up­per­case let­ters us­ing CSS.

As a new­bie in web de­sign and ty­pog­ra­phy, I was try­ing to ap­ply small caps to ab­bre­vi­a­tions in the texts. I knew the fol­low­ing code:

.small-caps {
    font-variant: small-caps;
}

However, it did­n’t work for the ab­bre­vi­a­tions which are all up­per­case let­ters. I thought it was caused by the font since I could ap­ply small caps to the nav­i­ga­tion bar, but chang­ing the font for the texts was not help­ful. After some dig­ging around I found that I need to trans­form the up­per­case let­ters into low­er­case first. In other words, I need:

.small-caps {
    text-transform: lowercase;
    font-variant: small-caps;
}

By the way, I did­n’t use small caps on ab­bre­vi­a­tions in the end. It felt un­nat­ural. I think the best op­tion would be us­ing a na­tive small caps font in­stead, but a match­ing one has to be found first.