This issue comes up on occasion and is one that needs further explanation and, preferably, examples to specifically illustrate the issues that can occur when superscripting characters in text.
Now, before we jump into the problem and the examples, it is important to note that this issue PRIMARILY affects the proper coding for email HTML and has less of an affect on web/browser HTML. This is because in HTML code that is rendered by a browser, we are able to do many more coding tricks and workarounds to solve the problem. In email rendered HTML, however, we are limited in the types of code that we are able to use that will be properly rendered across all of the different email applications.
The block of example text below shows three paragraphs which each have different examples of superscripts in action. They show exactly how they affect the paragraph around them. Pay close attention to the line height / leading of the different lines in which a superscripted character appears.
Lorem ipsum dolor sit amet®, consectetur adipiscing elit. Etiam eu dui vitae erat lacinia ullamcorper. In gravida neque bibendum orci mattis consectetur. Sed cursus dolor sed purus dignissim tempus. Nunc vitae felis id lacus scelerisque tempus a a nisl. Suspendisse aliquam, arcu eget pulvinar tincidunt, tellus ante posuere diam, id sodales elit erat eget massa. Nullam et eros nulla, in gravida nunc. Morbi lacinia® arcu id purus lacinia nec semper lacus fringilla. Suspendisse ut tempor lectus. Aenean™ commodo scelerisque ligula, in ullamcorper augue suscipit cursus. Mauris ligula ligula, consectetur in suscipit eu, placerat in turpis. Suspendisse sit amet nisi in tortor ultricies pulvinar a et elit. Curabitur suscipit, sapien quis lacinia placerat, quam est fermentum sem, vel blandit ligula dui a erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam nec pellentesque® ante.
Aliquam erat volutpat. Curabitur nulla ligula, sodales vitae laoreet nec, porttitor quis dolor. Nam lacinia dictum arcu quis ultricies. Phasellus ¼, ½ or ¾ nec purus eu felis gravida cursus. Maecenas id tellus vitae¼ lorem porttitor venenatis quis at urna.
Sed quis ante ut massa facilisis fringilla ac vitae ante. Praesent urna neque, interdum nec rutrum a, pharetra sed sem. Aliquam¹ ipsum mi, aliquam² et vulputate et³, placerat sed sem°. Pellentesque dictum ultricies arcu a aliquam. Nullam nisl quam, eleifend quis adipiscing sit amet, varius vitae sapien. In rutrum eleifend dui in rhoncus. Duis pellentesque malesuada congue.
We'll take a look at some of the examples above and describe the situation with each.
Naturally Superscript Characters
There are some characters that have been created as a superscript character. In other words, they exist naturally as a small character that is raised from the baseline of the font. Examples (shown in the third example paragraph above) of some commonly used, naturally superscripted characters are the TM (™) the degree (°) and power/footnote characters (¹ , ² , ³). Again, to be specific, these characters exist already created as a superscript value.
All Other Normal Characters
There are a few characters that are often requested to be rendered as a superscript, yet DO NOT HAVE naturally superscript-created characters such as fractions (for which there are special characters that will allow for 1/2 to appear as ½ however not as a superscript, as shown in the second example paragraph!), the service mark SM, and most importantly, the registered mark, ®.
These characters, and any/all other standard characters have an ability to be "made" or displayed as a subscript or superscript value by enclosing them in the font styling tag called "sup" or "sub" respectively. In one of these cases, (example: < sup >any text< /sup >) can be rendered so that it can be made into a superscript. Once a character or text has been made to render as a superscript, it will appear at the same font size, and will be shifted above the baseline of the font. This will make it display or render like a superscript character, HOWEVER, there are problems with this approach that become especially noticeable in the basic HTML code that is possible in email.
- If the superscript appears on the first line of a paragraph, or on a single line, there there is no problem. However, if it appears in the middle of a paragraph block or as the last line of that block, it will show that the html rendering alters the line-height / rendering for that one line, making it larger than the standard lines of that paragraph. This makes the line with the superscripted character appear "off" or "wrong" when technically, it is simply properly displaying the fact that a full-sized character has been shifted up from the baseline and it reserves the full, normal height of the line height from that new shifted position. Examples of this shifting/change of the line height are shown in the first paragraph of the example block above.
- A second, less noticable issue is that the superscripted character is the full, normal size/height of the font whereas real superscript characters are a smaller, reduced size of that type face. Together, these issues create layout and design problems that are often not noticed by average users yet are highly frustrating to most graphic designers that do not understand the code-related issues.
While there are workarounds that can be done in web-rendered HTML code, and even some workarounds that can be achieved in email-rendered HTML code, it is important to note that there is no code that will properly render these forced superscripts well across all email applications, or even across a few of the major email applications.
We are often asked, "why can you superscript a TM, but not a ®?" or "Why can't you superscript this ® in the paragraph when you just made a superscript ® in the title/headline that appears above it?"
The end answer is that we will always try to make a superscript wherever possible, and as long as that created superscript will not negatively affect the paragraph around it. Therefore, headlines or the first line in a paragraph are places where we may easily be able to make a superscript. Additionally, depending on the tolerance of the client for cross-application issues, or standards for the minimum level of email application or target email applications that the client has specified, we may be able to achieve the superscript and minimize the line height related effects with other/newer html/css code. It often comes down to consideration and testing from the developer on a mix of issues involving the chance placement of the mark that needs superscript, and the email html code standards that we are required to adhere to for that client/situation.