CSS font-variant-caps Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 17 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The font-variant-caps property in CSS allows you to control the use of alternate glyphs for capital letters.

This can be particularly useful for setting text in small caps or other typographic variations, enhancing the visual appeal and readability of your content.

💡 Syntax

The syntax for the font-variant-caps property is straightforward. You can apply it to any element to specify how capital letters should be displayed.

Syntax

Copied

element {
  font-variant-caps: value;
}

🎛️ Default Value

The default value of the font-variant-caps property is normal, which means no special capitalization is applied.

🏠 Property Values

Value	Description
normal	The default value. No special capitalization is applied.
small-caps	Displays lowercase letters as small uppercase letters.
all-small-caps	Displays both uppercase and lowercase letters as small uppercase letters.
petite-caps	Displays lowercase letters as petite uppercase letters.
all-petite-caps	Displays both uppercase and lowercase letters as petite uppercase letters.
unicase	Uses a single case for both uppercase and lowercase letters.
titling-caps	Uses a font's titling capitals.

📄 Example

In this example, we'll use the small-caps value to display text in small caps.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS font-variant-caps Example</title>
  <style>
    p {
      font-variant-caps: small-caps;
    }
  </style>
</head>
<body>
  <h1>Text with Small Caps</h1>
  <p>
    This paragraph is using the <code>font-variant-caps: small-caps;</code> property to display text in small caps.
  </p>
</body>
</html>

🖥️ Browser Compatibility

The font-variant-caps property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The font-variant-caps property is a useful tool for web developers looking to enhance the typography of their web content.

By utilizing different capitalization styles, you can improve the visual hierarchy and readability of your text. Experiment with the various values of this property to see how they can improve the presentation of your content.