CSS
🎯 What is CSS font-variant?
The font-variant property in CSS controls how lowercase letters are displayed. It is mainly used to transform normal text into small-caps style for a more elegant typography effect.
It helps create a more formal and stylistic appearance, especially in headings, titles, and branding elements.
🔹 Basic Usage
CSS
p {
font-variant: small-caps;
}
📌 This converts lowercase letters into small capital letters.
📚 CSS font-variant Values
1️⃣ normal
The default value. Text appears normally with regular uppercase and lowercase letters.
2️⃣ small-caps
Converts lowercase letters into smaller uppercase-style letters.
CSS
h2 {
font-variant: small-caps;
}
📌 Example output: “css properties” → “CSS PROPERTIES”
🧩 Values Summary
| Value | Description |
|---|---|
| normal | Default text style |
| small-caps | Lowercase becomes small uppercase letters |
| initial | Resets to browser default |
| inherit | Inherits value from parent element |
-
🧠 Summary
- The font-variant property changes how lowercase letters are displayed.
- It is mostly used for small-caps typography effects.
- It improves design consistency and gives text a more elegant look.