rick@tillitsdone.com

+66824564755

Scroll to discover

CSS Font-Variant-Position Enhance Typography with Superscript and Subscript

Discover the CSS font-variant-position property for controlling superscript and subscript glyphs.

Learn about its use cases, available options like 'normal', 'sub', and 'super', and how to incorporate it into your web design projects for improved typography.

Introduction

The font-variant-position CSS property helps web developers control the use of alternate glyphs for superscript and subscript text. Introduced in September 2023, this feature is now widely supported on the latest devices and browsers. It enhances the visual appeal and readability of text without affecting line-height or other box characteristics.

Description

The font-variant-position property is designed to control the use of alternate glyphs for superscript and subscript text. These glyphs are positioned relative to the baseline of the font, which remains unchanged. This property is particularly useful for elements like <sub> and <sup>.

When the property is activated, if any character in a text run lacks the appropriate glyph, the entire set of characters in the run is rendered using a fallback method. This ensures consistent typography and a seamless visual experience. These alternate glyphs share the same em-box and baseline as the rest of the font, providing a visually coherent appearance.

Syntax

The font-variant-position property is specified using one of the keyword values listed below. These values determine how the text should be displayed—either as normal, superscript, or subscript.

/* Keyword values */
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;

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

Values

The font-variant-position property can take several keyword values that determine how the text should be displayed relative to the baseline of the font.

`normal`

Deactivates the use of alternate superscript and subscript glyphs. Text is displayed in its default position relative to the baseline.

`sub`

Activates subscript alternate glyphs. Characters with subscript glyphs will be displayed as subscripts. If any character lacks a subscript glyph, the entire set of characters in the run will be rendered using synthesized glyphs.

`super`

Activates superscript alternate glyphs. Characters with superscript glyphs will be displayed as superscripts. If any character lacks a superscript glyph, the entire set of characters in the run will be rendered using synthesized glyphs.

Global Values

inherit: Inherits the value from its parent element.
initial: Sets the property to its initial value (normal).
revert: Resets the property to its default value defined by the user agent stylesheet.
revert-layer: Resets the property to its default value, considering the cascade layer it belongs to.
unset: Resets the property to its inherited value if it inherits from its parent, or to its initial value if not.

Formal Definition

The font-variant-position property has specific characteristics that govern its behavior and application.

Property	Value
Initial Value	`normal`
Applies To	All elements and text. It also applies to `::first-letter` and `::first-line`.
Inherited	Yes
Computed Value	As specified
Animation Type	Discrete

Formal Syntax

font-variant-position =
  normal | sub | super

Examples

Example: Using `font-variant-position: normal`

HTML

<!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-position Property</title>
  <style>
    em {
      font-style: unset;
    }
    .font {
      font-variant-position: normal;
    }
  </style>
</head>
<body>
  <em>(Website)<em class="font">2</em></em>
</body>
</html>

Output

The output will display the text “(Website)2” with the “2” in its default position relative to the baseline.

Example: Using `font-variant-position: super`

HTML

<!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-position Property</title>
  <style>
    .font {
      font-variant-position: super;
    }
  </style>
</head>
<body>
  <em>(Website)<em class="font">2</em></em>
</body>
</html>

Output

The output will display the text “(Website)²” with the “2” as a superscript.

Example: Using `font-variant-position: sub`

HTML

<!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-position Property</title>
  <style>
    .font {
      font-variant-position: sub;
    }
  </style>
</head>
<body>
  <em>H<em class="font">2</em>O<em class="font">2</em></em>
</body>
</html>

Output

The output will display the text “H₂O₂” with the “2”s as subscripts.

Combined Example

HTML

<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>

CSS

p {
  display: inline;
}

.normal {
  font-variant-position: normal;
}

.super {
  font-variant-position: super;
}

.sub {
  font-variant-position: sub;
}

Result

The above code will render three paragraphs:

The first paragraph will display “Normal!” in its default position.
The second paragraph will display “Super!” as superscript text.
The third paragraph will display “Sub!” as subscript text.

Specifications

The font-variant-position CSS property is defined in the CSS Fonts Module Level 4. This module provides comprehensive specifications for various font-related properties, including font-variant-position. The specifications outline the behavior, syntax, and usage of this property, ensuring consistency and interoperability across different browsers and platforms.

CSS Fonts Module Level 4

The CSS Fonts Module Level 4 is a critical part of the CSS standard, detailing how fonts and typography should be handled in web design. The font-variant-position property is specifically addressed in this module, providing clear guidelines on its implementation and use.

Browser Compatibility

The font-variant-position CSS property is a relatively new feature introduced in September 2023. It’s essential to check its compatibility across different browsers and devices to ensure consistent display for all users.

Browser Support

Here’s a quick overview of the browser compatibility for the font-variant-position property:

Google Chrome: Supported in the latest versions.
Mozilla Firefox: Supported in the latest versions.
Safari: Supported in the latest versions.
Microsoft Edge: Supported in the latest versions.
Opera: Supported in the latest versions.

Older versions of these browsers may have limited or no support. Always test your projects across multiple browsers and devices for consistent user experience.

Compatibility Resources

Stay informed about the latest compatibility information with these resources:

MDN Web Docs Browser Compatibility for font-variant-position
Can I Use: Provides up-to-date browser support info.

Fallback Strategies

For older browsers that don’t support the font-variant-position property, consider using fallback strategies. For example, use feature detection with JavaScript to apply alternative styling.

Example of feature detection with JavaScript:

if ('CSS' in window && 'supports' in CSS) {
  if (CSS.supports('font-variant-position', 'sub')) {
    // The browser supports the font-variant-position property
  } else {
    // The browser does not support the font-variant-position property
    // Apply fallback styling
  }
}

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

CSS Font-Variant-Position Enhance Typography with Superscript and Subscript

Introduction

Description

Syntax

Values

normal

sub

super

Global Values

Formal Definition

Formal Syntax

Examples

Example: Using font-variant-position: normal

HTML

Output

Example: Using font-variant-position: super

HTML

Output

Example: Using font-variant-position: sub

HTML

Output

Combined Example

HTML

CSS

Result

Specifications

CSS Fonts Module Level 4

Browser Compatibility

Browser Support

Compatibility Resources

Fallback Strategies

See Also

Talk with CEO

`normal`

`sub`

`super`

Example: Using `font-variant-position: normal`

Example: Using `font-variant-position: super`

Example: Using `font-variant-position: sub`