font-variant-position

Свойство font-variant-position управляет альтернативными глифами надстрочных или подстрочных символов. При этом базовая линия текста не меняется меняется, только положение и размер самих символов.

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство font-variant-position принимает одно из следующих значений:

• normal — отключает альтернативное начертание (значение по умолчанию);
• sub — включает подстрочные символы, например для химических формул (H₂O);
• super — включает надстрочные символы, например для степеней (x²).

Вот как выглядят эти значения на примере:

Свойство помогает корректно отображать символы в математических и химических формулах, а также, например, в сносках и примечаниях. Лучше всего его использовать в связке с html-тегами <sup и <sub>: теги будут отвечать за семантику, а font-variant-position делать отображение аккуратным и типографически правильным (как это задумал дизайнер шрифта).

💡 Свойство пока поддерживается не во всех браузерах и работает только со шрифтами, в которых заложены OpenType. Если шрифт их не поддерживает, свойство не сработает.

💡 Того же поведения можно добиться с помощью font-feature-settings: "sups" 1; и "subs" 1;, однако в будущем лучше использовать именно font-variant-position для более предсказуемого и точного управления.