Blog Post: Super & Subscript

Red Deer & Blackfalds Web Design Writes:

I know what you’re thinking before you even say it … “What a basic article?!?” … but the fact of the matter is that a lot of websites do not contain the proper HTML Markup to properly display certain units of measurement, chemistry, etc…

Ultimately most sites do not contain the type of information necessary to elicit using these types of HTML Entities; however, for more technical sites you may either be managing or working on, there is a decent amount of technical data that needs to be represented appropriately for the consumer. As well, going that extra mile to properly differentiate between NO2 and NO2 can go a long way for prospective clients.

Below are the two ways you can quickly markup your websites information to properly show information:

  1. Superscript – displaying an object as superscript means to raise it up a single line and display it in a smaller font-size. This can be accomplished by adding <sup>ITEM</sup> around the ITEM in context that you are trying to superscript. An example looks like this:
    2<sup>nd</sup> equates to: 2nd
  2. Subscript – displaying an object as subscript means to drop it down a half a line and display it in a smaller font-size. This can be accomplished by adding <sub>ITEM</sub> around the ITEM in context that you are trying to subscript. An example looks like this:
    NO<sub>2</sub> equates to: NO2

BONUS!

For those of you having trouble with the size/position of your sub and superscript fonts, you can implement the CSS below and play around with it on your own website to get the most appropriate output:

sup {bottom: 0.7em; font-size: 9px;}

sub {top: 0.3em; font-size: 9px;}

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)