The small-caps Value in CSS

You can use font-variant: small-caps to change the styling of your fonts

<style>
  .small-capsed {
    font-variant: small-caps;
  }
</style>

<p class=”small-capsed”>
  In a small-caps font, ALL lowercase letters
  are converted to uppercase.
</p>

This will produce the following:

In a small-caps font, ALL lowercase letters are converted to uppercase.

Apart from small-caps, the font-variant property can take up a number of different values. See the CSS demo and the full list of available values on MDN documentation on the provided link.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

---

Resource

• CSS font-variant