Is there a way...

dberlow's picture set text on the web with consistent leading amid footnote superiors, for every user?

Thanks for any suggestions.


Si_Daniels's picture

Maybe try the Unicode superscript code points (00B9 etc.,) rather than the HTML SUP tag.

Cheers, Si

Si_Daniels's picture


David Berlow entered the type industry in 1978¹ as a letter designer for the respected Mergenthaler², Linotype³, Stempel⁴, and Haas typefoundries⁵. He joined the newly formed digital type supplier, Bitstream, Inc⁶. in 1982. After Berlow left Bitstream in 1989, he founded The Font Bureau, Inc⁷. with Roger Black⁸.

Fallback from Georgia (esp the 6) looks pretty poor on this machine (Vista+IE7).

dberlow's picture

Ouch, but Thanks ¡¡Sii!! Why would anybody, (wikipedia in my example), use the SUP taginstead?

And now, to perhaps answer myownquestion:

Safari's display of Punchcut's site on a mac (top), seems to get 1, 2 and 3 from glyphs, and 4, 5 and 6 from scaling glyphs.
Sii's Vista+IE7 (below) is rendering the 4 like bitmap and the 6 like another character's bitmap. ;)
So, is that something the SUP (the original illustration), avoids... and if it only would get the leading into it's brain?


Si_Daniels's picture

SUP, like the superscript option in most word processors will raise (and sometimes scale) the regular numerals. I'd imagine Wikipedia uses it because most system fonts don't contain a full set of the real thing* and because it's machine parse-able? There may be ways in CSS/HTML to lock leading, but my guess is that support will vary from browser to browser.

Looking at the fonts on my machine, Calibri seems to have them all (Georgia does not), and the design and alignment seems consistent. Comparison with Outlook/Word's superscript option.

*not sure if this is their intended purpose.

Dan Gayle's picture

Shooting from the hip, I believe you would have to set line-height to a specific fixed size for all inline elements within the block to work around this. Since most people set line-height, AKA bastardized leading, to relative em heights, it is sometimes difficult to accomplish.

Someone please correct me if I'm wrong, but I'm sure I'm right because I just did something like this.

For anything that requires Unicode, I make a specific HTML class to make darn sure that the fallback font is a full Unicode font. And even then it's iffy to get it to work because of the differences in browsers and OS.

kentlew's picture

DB -- FWIW, Firefox ( seems to handle Si's Unicode sups a little nicer than your Safari. Not sure where it's pulling them from. Scaled Lucida Grande?

paragraph's picture

Tracking. Thanks, gentlemen!

Syndicate content Syndicate content