CSS Examples
How to Display Text in Small Caps using CSS
In this example, we will see how to display text in small caps using CSS. We can use the font-variant property to specify the variant of the font.
Prerequisites
Example
HTML
<span class="example">Hello ScanSkill</span>
CSS
.example {
font-size: 20px;
font-variant: small-caps;
}
Output
Here, we used the font-variant: small-caps to transform a text into small caps. The small-caps transform all the lowercase letters to uppercase but the transformed uppercase letters appear to be smaller than the original uppercase letters.
Conclusion
In this example, we learned how to display text in small caps using CSS. We used the font-variant: small-caps to transform a text into small caps.