版权，注册商标，商标和服务商标实体定位

Question

Does anybody know why the © and ® don't superscript nicely without affecting the leading (ie line-height ) like ™ and ℠ do?

I've tried wrapping © and ® with <sup> and even <small> but I can't get it to work the way I need it to. Sometimes changing the font size helps but not always.

This is for HTML emails where we use it in <h1> , subheads, and body copy.

When I do wrap it in <sup> and apply CSS it just becomes difficult to control. It behaves differently from one email client to another, and one device to another (this is for responsive emails).

Here's the fiddle: http://jsfiddle.net/cy03eov1/5/

And of course position: and em don't work well in email and margin support is spotty.

 body { font-size: 26px; line-height: 1em; color: #ccc; font-family: Helvetica, sans-serif; background: lightslategray; } table { width: 80%; margin: 30px auto 0; background: #fff; padding: 5px 20px; } .copyright { font-size:70%; } 

 <table cellspacing="0" border="0"> <tr> <td> <p>Do you know that horrible fear when you've broken something on a client project and you have no idea how to fix it? I do… Sometimes I'll have been<span class="copyright" style="color:red;"><sup>&copy;</sup></span> wading through templates on a site, getting it all up to scratch, then suddenly I'm faced with a page of doom—a whole<span style="color:red; font-size: 70%; vertical-align:text-top;">&reg;</span> page of garbled semi-English that sort of resembles an error<span style="color:red;">&trade;</span> message, but nothing I've ever seen before.</p> <p>As a freelancer, I've always been proud to have the time to dedicate to learning<span style="color:red;">&#8480;</span>. Keeping up with the industry, and being able to level up my skills on each new project, is very important to me.</p> <p>But sometimes I struggled when I pushed myself that little bit too far. A few times I've had to request a lifeline from kind people on Twitter to pull me out of a hole. And then I feel a bit daft, having to admit my inadequacies on a social network in order to save myself from a worse situation.</p> </td> </tr> </table> 

Answer 1

Unicode does not have superscript or subscript glyphs for these characters so you have to modify the font style separately

http://jsfiddle.net/cy03eov1/8/embedded/result/

I just added

p span { }

and made the font smaller and moved it up by 8 pixels.

---

I noticed you mentioned your doing this for an email. While the above mentioned solution would work fine for a webpage, it's best not to use CSS in email, especially positioning attributes like position:relative;

You can achieve the same affect with tables though (see demo)

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="20" style="font-size:18px;">Line of text followed by a </td>
        <td height="20">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td height="10" style="font-size:9px;">&copy;</td>
                </tr>
                <tr>
                    <td height="10"><table border="0" cellpadding="0" cellspacing="0"><tr><td><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table></td><!-- this is a standard table spacer alternative to email shim -->
                </tr>
            </table>
        </td>
        <td height="20" style="font-size:18px;">character.</td>
    </tr>
</table>

Takes a lot more work but works across all email clients.