Text in superscript in HTML




Basic superscript

Superscript is done with the tag <SUP>, and is added to the text like other types of text decoration. In its basic form, the tag works like this:

Here the text is normal, <SUP>here the text becomes superscript,</SUP> and here the text returns to normal.


På siden, når den vises, ser det således ud:

Here the text is normal, here the text becomes superscript, and here the text returns to normal.





Styling and fine-tuning of superscript

Normally, when doing superscript, you want the type face to be a little smaller, so it looks nice and becomes more readable. How much smaller the text becomes depends on the browser, and readability of the sub script is dependent on the font and how much the text is reduces in size. If you want to control this, which is definitely a good idea, it requires a bit of styling. There is several ways of doing this, some of which are smarter than others.

Starting with the most common and robust ways of doing it, you can set the font size to a specific percentage or you can use one of the fixed settings: smaller, small, x-small or xx-small. This makes the styling of the text independent of the font size. It could be something like this:

Here the text is normal, <SUP STYLE="font-size:75%">here the superscript font size is reduced to 75%,</SUP> and here the text returns to normal.


Here the text is normal, <SUP STYLE="font-size:xx-small">here the superscript font size is reduced to xx-small,</SUP> and here the text returns to normal.


On the page it looks like this:

Here the text is normal, here the superscript font size is reduced to 75%, and here the text returns to normal.


Here the text is normal, here the superscript font size is reduced to xx-small, and here the text returns to normal.



Should you, for some reason, feel like having superscript with a larger font size than the regular text, this can be done as well.

Here the text is normal, here the superscript font size is increased to 150%, and here the text returns to normal.



Choosing one or the other solution is a matter of personal taste. For some font types, there can be an advantage in being able to fine-tune the text proportions using percentages, to increase readability. It is one of the things you have to test on several browsers, when creating the pages.


I can be tempting to use a fixed font size, but this is one of the less fortunate ways of doing things. If you are using a fixed font size, e.g. 10.0pt you can easily set the superscript to 8.0pt.

Here the text is 10.0pt, <SUP STYLE="font-size:8.0pt">here the superscript font size is reduced to 8.0pt,</SUP> and here the text returns to 10.0pt.


On the page, when shown, it looks like this:

Here the text is 10.0pt, here the superscript font size is reduced to 8.0pt, and here the text returns to 10.0pt.


Trouble is, that you usually set the changes in font size globally, in a style sheet, so you just have to write <SUP> when needing superscript. Then, if you need superscript in a header with font size 16, it will look weird:

Here the text is 16.0pt, here the superscript font size is reduced to 8.0pt, and here the text returns to 16.0pt.


The reduction to 75% instead gives:

Here the text is 16.0pt, here the superscript font size is reduced to 75% of 16.0pt, and here the text returns to 16.0pt.