Fix for Superscript and Line-Spacing Glitch
I do a lot of work for Amex and therefore have to pepper copy with copyright and trademark symbols. It has always driven me nuts that when I superscript a symbol, it would cause a jump of a few pixels in that line of copy. My solution was either to grin and bear it-because I was usually the only one who noticed anyway-or to not superscript-which was usually caught by the proofreader.
Don’t ask me how, but I came up with a fix. Create a CSS style with zero leading, and apply it to the <sup> wrapped around the symbol. It’s that easy. One more minor frustration removed from the big list.
Update
This still doesn’t fix it everywhere. I now add this inline style to my <sup> tag: style=”font-size: 70%; line-height: -1px; vertical-align: text-top;”
It compensates for superscript for text at 11–13pt in most cases. Enough at least to satisfy my clients.
Update 2
I had some lines of tinier type with messed up line-spacing and a fussy client forced me to find another solution. This is now working well for me: “font-size: smaller; vertical-align: baseline; position: relative; bottom: 0.33em;”
Be sure to put it in a sup tag!
