Position

¶Usage

While it is possible to use the font-variant-position utilities at the "block" level, depending on the typeface this may result in other characters being substituted for the repositioned glyphs. To avoid this, wrap the appropriate characters in an inline element, such as <sup> or <sub>.

Using <sup> or <sub> elements has its own pitfalls, however. Common "reset" styles and even browser default styles often try to approximate superscript or subscript glyphs, which should be disabled if you are using a font designed with these features. These resets and defaults vary, so these utilities don't attempt to disable any default styles for these elements. Either account for this in your own baseline styles, or use a more neutral wrapper, like <span>.

The examples below use <sub> and <sup> with the default Tailwind CSS reset styles for the initial result, and <span> elements with the utility classes added for the final result, in order to show the difference between the "synthesized" characters and the specifically designed forms.

¶Superscript

sups

This feature replaces lining or oldstyle figures with superscript figures, often used for footnote indication, and replaces lowercase letters with superscript letters.

<p>M<sup class="font-features sups">me</sup></p>

This illustrates a case where blanket application of the feature wouldn't work: in 3He we want the 3 superscripted, but not the lowercase e.

¶Subscript

subs

Perhaps the most familiar example of subscripts is in chemical formulas.

<p>H<sub class="font-features subs">2</sub>O</p>

¶Scientific inferior

sinf

Scientific inferior are for chemical and mathematical typesetting, and include optically corrected letters and numbers. This feature is often conflated with subscripts and may not be fully supported for every scientific notation form. For optimal results, something like LaTeX may be a better option.

<p class="font-features sinf">H2O YCbCr νμ</p>