CSS `font-variant`: Creating Small-Caps Effects for Enhanced Typography

Enhance your web typography with the CSS `font-variant` property. This tutorial explains how to create small-caps effects, demonstrating its interaction with `text-transform` and providing techniques for achieving specific stylistic variations in your text rendering for improved readability and visual appeal.

Styling Text with CSS `font-variant`

Understanding `font-variant`

The CSS `font-variant` property controls the visual appearance of lowercase letters, specifically whether they are rendered as small capitals. It's primarily used to create a "small-caps" effect, where lowercase letters appear as uppercase but in a smaller size than regular capitals. This property only affects lowercase letters; uppercase letters remain unaffected.

`font-variant` Property Values

  • normal (default): Lowercase letters are displayed normally.
  • small-caps: Lowercase letters are rendered as uppercase letters, but smaller in size than standard capitals.
  • initial: Resets the property to its default value (normal).
  • inherit: Inherits the value from its parent element.

Interaction with `text-transform`

The effect of `font-variant: small-caps;` can be influenced by the `text-transform` property:

  • If text-transform: lowercase; is also set, the text will be in lowercase, even with `font-variant: small-caps;`.
  • If text-transform: uppercase; is set, the text will be in uppercase; `font-variant: small-caps;` has no effect on already uppercase letters.

`font-variant` Syntax

The syntax is:

font-variant: normal | small-caps | initial | inherit;

Example: `font-variant: small-caps;`

This example demonstrates the `font-variant: small-caps;` property. Note that it only affects lowercase letters. Uppercase letters will not be changed.

CSS Code

p {
  font-variant: small-caps;
}