Text in superscript in HTML

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:



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

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:





On the page it looks like this:






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




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.



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



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:



The reduction to 75% instead gives: