CSS font-variant Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 13 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The font-variant property in CSS is used to control the usage of alternate glyphs within a font. It allows you to specify whether certain characters, such as small capitals or old-style figures, should be used.

This property can enhance the typographic presentation of your text, adding a unique touch to your web content.

💡 Syntax

The syntax for the font-variant property is straightforward. It can be applied to any text element.

Syntax

Copied

element {
  font-variant: value;
}

🎛️ Default Value

The default value of the font-variant property is normal, which means no special variant glyphs are used and the text is displayed in its normal form.

🏠 Property Values

Value	Description
normal	The default value, which specifies a normal font face without any variants.
small-caps	Transforms lowercase letters into smaller uppercase letters.
all-small-caps	Changes all characters to small caps, including uppercase characters.
petite-caps	Transforms lowercase letters into petite capitals, a smaller version of small-caps.
all-petite-caps	Changes all characters to petite caps, including uppercase characters.
unicase	A mix of uppercase and lowercase letters for stylistic purposes.
titling-caps	Uses a titling font, which is designed for use in titles.

📄 Example

In this example, we'll apply the font-variant property to transform text into small capitals.

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 Example</title>
  <style>
    .small-caps {
      font-variant: small-caps;
    }
  </style>
</head>
<body>
  <h1>Font Variant Example</h1>
  <p class="small-caps">This text is displayed in small capitals.</p>
</body>
</html>

🖥️ Browser Compatibility

The font-variant 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 property is a useful tool for web developers looking to enhance the typographic presentation of their text.

By using this property, you can add stylistic variations to your fonts, making your web content more visually appealing and engaging. Experiment with different values to see how this property can improve the look and feel of your text.