Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

On the web, using ® (® or ®) will make the Registered mark almost as big as the rest of the text. How can you modify the size of it to match how it would appear in print?

share|improve this question
    
Ended up wrapping the &#174; with a <sup> tag using a modified CSS class of sup { vertical-align: text-top; font-size:0.7em; } –  JGallardo Jan 3 '13 at 0:06
add comment

1 Answer

up vote 5 down vote accepted

The term you for making text smaller and floating upwards is called superscript.

HTML

You can use the <sup> HTML tag to superscript text.

My text<sup>®</sup>

My text®

Here is a live example from w3schools.


CSS

Alternatively it can be done with CSS with something like this:

.superscript { vertical-align:super; font-size:0.8em; }

And then implemented in HTML like this:

My Text<span class="superscript">®</span>


EDIT (HTML & CSS)

If you are looking to keep your HTML cleaner but still wish to customize your superscript with CSS then apply CSS styling to the <sup> tag like so:

sup {
color: red;
font-size: 0.7em;
}

Just add whatever stylings you need. I just added two for example's sake. That way, whenever you use the <sup> tag the styling is automatically applied.

share|improve this answer
4  
... and could use &reg; for the mark :) –  Scott Jan 2 '13 at 23:24
    
Thanks, that got me going in the right direction. I ended up going the CSS route to get it to the designers specs by implementing the following modification .superscript { vertical-align:text-top; font-size:0.7em; } –  JGallardo Jan 2 '13 at 23:30
1  
Sure! Glad to have helped. I think the HTML route is cleaner, but the CSS obviously gives you the ability to customize it further. Though I would suggest styling the sup tag so that your HTML stays cleaner. I've updated my answer to address this. –  Johannes Jan 2 '13 at 23:33
    
@Johannes yes I agree about cleaner code and would encourage others to do it that way. In my scenario though, the specs are so picky that it has required a lot of custom CSS classes which has bloated the document. –  JGallardo Jan 2 '13 at 23:36
1  
The hybrid technique is ideal as it brings in the semantics of the sup tag, and can be styled further. Best of both worlds. A span adds no semantic meaning, and it requires more markup. –  Grant Palin Feb 14 at 17:53
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.