1

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?

Improve this question
1
  • 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
5

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.

Improve this answer
7
  • 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.
    – Hanna
    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 '14 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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