Text in subscript in HTML




Basic subscript

Subscript is made with the tag <SUB>, 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, <SUB>here the text becomes subscript,</SUB> 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 subscript, and here the text returns to normal.





Styling and fine-tuning of subscript

Normally, when doing subscript, 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 subscript 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, <SUB STYLE="font-size:75%">here the subscript font size is reduced to 75%,</SUB> and here the text returns to normal.


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


On the page it looks like this:

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


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



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

Here the text is normal, here the subscript 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 subscript to 8.0pt.

Here the text is 10.0pt, <SUB STYLE="font-size:8.0pt">here the subscript font size is reduced to 8.0pt,</SUB> 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 subscript 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 <SUB> when needing subscript. Then, if you need subscript in a header with font size 16, it will look weird:

Here the text is 16.0pt, here the subscript 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 subscript font size is reduced to 75% of 16.0pt, and here the text returns to 16.0pt.