CSS Font-Variant Enhance Typography with Ease

Introduction

The font-variant CSS property is a handy tool for web developers and designers, allowing you to easily set various font variants. This property is widely supported across many devices and browser versions, ensuring consistent typography across different platforms. With font-variant, you can control aspects like small-caps, ligatures, numerical figures, and more, giving you fine-grained control over your text’s appearance.

Baseline Widely Available

The font-variant CSS property is a well-established feature that has been available across many devices and browser versions since July 2015. This broad compatibility ensures that your typography choices remain consistent and effective, regardless of the platform your users are on.

Constituent Properties

The font-variant CSS property is a shorthand for several individual properties designed to control various aspects of text rendering. By using font-variant, you can efficiently manage multiple typographic features with a single declaration. Here are the constituent properties that font-variant encapsulates:

1. font-variant-alternates:
   • Controls the use of alternate glyphs for a font. This can include stylistic sets, contextual alternates, and other OpenType features.
2. font-variant-caps:
   • Determines the use of small-caps and other capitalization styles. You can specify options like small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, and titling-caps.
3. font-variant-east-asian:
   • Manages the use of East Asian text variants, including different character widths and forms. Options include jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, and ruby.
4. font-variant-emoji:
   • Specifies how emoji characters should be displayed. You can choose between text, emoji, and unicode.
5. font-variant-ligatures:
   • Controls the use of ligatures, which are special characters that combine two or more letters into a single glyph. Options include common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, and no-contextual.
6. font-variant-numeric:
   • Determines the style of numerical figures, spacing, and fractions. Options include lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, and slashed-zero.
7. font-variant-position:
   • Manages the vertical positioning of text, allowing for subscript and superscript. Options include sub and super.

Syntax

The font-variant CSS property is straightforward to use and offers a wide range of options for customizing text appearance. Here is the basic syntax for this property:

font-variant: small-caps;
font-variant: common-ligatures small-caps;

/* Global values */
font-variant: inherit;
font-variant: initial;
font-variant: revert;
font-variant: revert-layer;
font-variant: unset;

Detailed Syntax Breakdown

The font-variant property can accept a variety of values, each controlling different aspects of text rendering. Here is a more detailed look at the possible values:

1. normal:
   • Specifies a normal font face. Each longhand property has an initial value of normal.
2. none:
   • Sets the value of the font-variant-ligatures property to none and the values of the other longhand properties to normal, their initial value.
3. Ligature Values:
   • common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, no-contextual:
     • These values specify the use of ligatures, which are special characters that combine two or more letters into a single glyph.
4. Stylistic Variants:
   • stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation():
     • These functions and keywords control the use of stylistic alternates and other OpenType features.
5. Capitalization Variants:
   • small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps:
     • These values control the capitalization of text, converting lowercase letters to small caps or other capitalization styles.
6. Numerical Variants:
   • lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, slashed-zero:
     • These values control the style of numerical figures, spacing, and fractions.
7. East Asian Variants:
   • jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby:
     • These values control the use of East Asian text variants, including different character widths and forms.
8. Position Variants:
   • sub, super:
     • These values control the vertical positioning of text, allowing for subscript and superscript.
9. Emoji Variants:
   • text, emoji, unicode:
     • These values specify how emoji characters should be displayed.

Formal Definition

The font-variant CSS property is formally defined to control various typographic features of text, providing a shorthand way to set multiple font variants simultaneously. This property is crucial for web developers and designers who aim to create visually appealing and readable web pages. Here’s a breakdown of its formal definition:

Initial Value: normal

• This means that by default, no special text variants are applied.

Applies To:

• All elements and text. It also applies to the ::first-letter and ::first-line pseudo-elements.

Inherited: Yes

• The font-variant property is inherited from the parent element, ensuring that text within child elements maintains the same typographic styles unless overridden.

Computed Value: As specified

• The computed value of font-variant is determined by the specified value in the CSS rule.

Animation Type: Discrete

• The font-variant property cannot be animated smoothly; changes are applied discretely.

Formal Syntax

The formal syntax for the font-variant property is as follows:

font-variant: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] | [ <stylistic()> || <historical-forms> || <styleset()> || <character-variant()> || <swash()> || <ornaments()> || <annotation()> ] | [ <capitalize> ] | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] | [ <east-asian-variant-values> ] | [ <east-asian-width-values> ] | [ <east-asian-variant-values> ] | [ <vertical-align> ] | emoji | unicode;

Examples

Here are some examples to help you understand how to use the font-variant property effectively:

Setting the Small-Caps Font Variant

HTML

<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>

CSS

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

Result

The first paragraph displays “Firefox rocks!” in a normal font, while the second paragraph displays it in small-caps.

Using Ligatures and Small-Caps

HTML

<p class="common-ligatures">This is a test.</p>
<p class="small-caps">This is a test.</p>

CSS

p.common-ligatures {
  font-variant: common-ligatures;
}

p.small-caps {
  font-variant: common-ligatures small-caps;
}

Result

The first paragraph displays text with common ligatures, while the second paragraph displays text with common ligatures and small-caps.

Specifying Numerical Figures

HTML

<p class="oldstyle-nums">12345</p>
<p class="tabular-nums">12345</p>

CSS

p.oldstyle-nums {
  font-variant: oldstyle-nums;
}

p.tabular-nums {
  font-variant: tabular-nums;
}

Result

The first paragraph displays numbers using old-style numerals, while the second paragraph displays numbers using tabular numerals.

Controlling East Asian Variants

HTML

<p class="traditional">這是一段測試文字。</p>
<p class="full-width">這是一段測試文字。</p>

CSS

p.traditional {
  font-variant: traditional;
}

p.full-width {
  font-variant: full-width;
}

Result

The first paragraph displays text using traditional character forms, while the second paragraph displays text using full-width characters.

Using Emoji Variants

HTML

<p class="text-emoji">😊</p>
<p class="unicode-emoji">😊</p>

CSS

p.text-emoji {
  font-variant: text;
}

p.unicode-emoji {
  font-variant: unicode;
}

Result

The first paragraph displays the emoji as text, while the second paragraph displays the emoji using Unicode.

Combining Multiple Variants

HTML

<p class="multi-variant">This is a test with multiple variants.</p>

CSS

p.multi-variant {
  font-variant: common-ligatures small-caps oldstyle-nums;
}

Result

This paragraph displays text with common ligatures, small-caps, and old-style numerals.

Related Properties

The font-variant CSS property is a powerful tool for controlling various typographic features, but it’s not the only property that can enhance your text styling. Several other CSS properties can be used in conjunction with font-variant to achieve more nuanced and visually appealing typography. Here are some related properties that you might find useful:

1. text-transform

   • Description: Controls the capitalization of text.
   • Common Values: none, capitalize, uppercase, lowercase, full-width, full-size-kana.
   • Use Case: Ideal for styling headings, buttons, and other UI elements where consistent capitalization is important.

2. text-combine-upright

   • Description: Combines characters into a vertical orientation, often used for displaying East Asian text correctly.
   • Common Values: none, all, digits <integer>.
   • Use Case: Useful for displaying vertical text in languages like Chinese, Japanese, and Korean.

3. text-orientation

   • Description: Controls the orientation of text, allowing you to switch between horizontal and vertical writing modes.
   • Common Values: mixed, upright, sideways.
   • Use Case: Essential for creating vertical text layouts, particularly useful for East Asian languages.

4. font-feature-settings

   • Description: Allows you to enable or disable specific OpenType features in a font, providing fine-grained control over typographic features.
   • Common Values: normal, <feature-tag-value>.
   • Use Case: Ideal for advanced typography, such as enabling stylistic sets, ligatures, or other OpenType features.

5. font-style

   • Description: Specifies whether the text should be styled as normal, italic, or oblique.
   • Common Values: normal, italic, oblique.
   • Use Case: Useful for adding emphasis to text, such as italicizing important words or phrases.

6. font-weight

   • Description: Specifies the weight (or boldness) of the text.
   • Common Values: normal, bold, bolder, lighter, numeric values (e.g., 100, 200, …, 900).
   • Use Case: Essential for creating hierarchical text styles, such as bold headings or emphasized text.

7. font-size

   • Description: Specifies the size of the text.
   • Common Values: Length values (e.g., px, em, rem), percentage values, keyword values (small, medium, large, etc.).
   • Use Case: Crucial for setting the overall scale of text, ensuring readability and visual hierarchy.

8. font-family

   • Description: Specifies the font family for the text.
   • Common Values: Specific font names (e.g., Arial, Helvetica, Times New Roman), generic font families (e.g., serif, sans-serif, monospace).
   • Use Case: Essential for defining the typographic style of your web pages, ensuring consistent and visually appealing text.

Example of Combined Usage

Here’s an example of how you might use some of these related properties together with font-variant to create a visually appealing and readable text style:

HTML

<h1 class="styled-heading">Welcome to Our Website</h1>
<p class="styled-text">This is an example of styled text using various CSS properties.</p>

CSS

.styled-heading {
  font-variant: small-caps;
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  font-size: 2em;
  text-transform: uppercase;
}

.styled-text {
  font-variant: common-ligatures;
  font-family: 'Helvetica', sans-serif;
  font-size: 1.2em;
  text-orientation: upright;
  font-feature-settings: 'liga' 1, 'dlig' 1;
}

Result

• The heading will be displayed in small-caps, bold, uppercase, and with a larger font size.
• The paragraph will display common ligatures, upright text orientation, and enable ligatures and discretionary ligatures.

By combining these related properties with font-variant, you can achieve a high level of typographic control, ensuring your text is both visually appealing and highly readable. These properties work together to create a cohesive and polished typographic style that enhances the overall design of your web pages.

Browser Compatibility

The font-variant CSS property is widely supported across different browsers, making it a reliable tool for enhancing your web pages’ typography. Here’s a quick overview of its compatibility:

Browser-Specific Notes

• Google Chrome: Supported since version 1.0 (Dec 2008).
• Mozilla Firefox: Supported since version 1.0 (Nov 2004).
• Internet Explorer: Supported since version 4.0 (Sep 1997).
• Microsoft Edge: Supported since version 12.0 (Mar 2015).
• Opera: Supported since version 3.5 (Nov 1998).
• Safari: Supported since version 1.0 (Jun 2003).

Full Compatibility Table

For a detailed view of compatibility, check the full compatibility table.

Reporting Feedback

If you encounter any issues or have suggestions, you can report feedback.

Conclusion

The font-variant property is a powerful tool with broad compatibility across major browsers. It helps you enhance the appearance and readability of your web pages. For more details, refer to the full compatibility table and the MDN documentation.

Specifications

The font-variant CSS property is defined in the CSS Fonts Module Level 4 specification. This specification outlines the behavior and usage of the font-variant property, including its syntax, values, and applications.

Specification Document:

• [CSS Fonts Module Level 4 - font-variant Property]WebsiteUrl

The CSS Fonts Module Level 4 specification provides comprehensive details on how the font-variant property can be used to control various typographic features. By understanding the specifications, you can ensure that your use of the font-variant property is compliant with the latest standards, maximizing compatibility and consistency across different browsers and devices.

For more detailed information on the font-variant property and its related features, you can refer to the official specification document linked above. This document contains valuable insights and guidelines to help you make the most of the font-variant property in your web development projects.