<style>
@page { size: A7; margin: 4mm; }
body { font-family: "Libertinus Serif"; font-size: 12pt; }
.sups { font-feature-settings: "sups" 1; }
.fake { vertical-align: super; font-size: 58%; }
.big { font-size: 20pt; }
.medium { font-size: 14pt; }
.smallcaps { font-feature-settings: "smcp" 1; }
.italic { font-style: italic; }
.sans { font-family: "Libertinus Sans"; }
</style>

<span class="medium">ther</span> (not superscript)

<span class="big">Xᵗʰᵉʳ</span> (unicode superscript)

<span class="big">X<span class="sups">ther</span></span> (font feature)

<span class="big">X<span class="fake">ther</span></span> (scaled and raised)

20ᵗʰ <span class="smallcaps">xx</span>ᵉ /
20<span class="sups">th</span> <span class="smallcaps">xx</span><span class="sups">e</span> /
20<span class="fake">th</span> <span class="smallcaps">xx</span><span class="fake">e</span>

20ᵗʰ <span class="smallcaps">xx</span>ᵉ /
20<span class="sups">th</span> <span class="smallcaps">xx</span><span class="sups">e</span> /
20<span class="fake">th</span> <span class="smallcaps">xx</span><span class="fake">e</span>
{.italic}

20ᵗʰ <span class="smallcaps">xx</span>ᵉ /
20<span class="sups">th</span> <span class="smallcaps">xx</span><span class="sups">e</span> /
20<span class="fake">th</span> <span class="smallcaps">xx</span><span class="fake">e</span>
{.sans}

20ᵗʰ <span class="smallcaps">xx</span>ᵉ /
20<span class="sups">th</span> <span class="smallcaps">xx</span><span class="sups">e</span> /
20<span class="fake">th</span> <span class="smallcaps">xx</span><span class="fake">e</span>
{.sans .italic}
