Search code examples
cssstylesheethtml-entities

Advice for CSS styling of Service Mark Symbol (SM)

I need to add the Service Mark Symbol ( http://en.wikipedia.org/wiki/Service_mark_symbol ) to a bunch of websites. I have found the XHTML entity code for it ( ℠ ) and have it displayed right now.

The problem is that it is almost impossible to read. I would like some advice best practices to display this. Perhaps different CSS is needed based on browser and/or client platform.

I am looking for advice and/or URLs to real-world examples using Service Mark Symbols.

** EDIT **

My problem isn't making the actual SM symbol; the XHTML entity code works. My problem is that the SM symbol looks bad and is hard to read.

I want some CSS advice and/or URLs for sites that have pretty implementations of the SM symbol.

** SECOND EDIT **

Here is a JSFiddle example of the SM symbol looking bad: http://jsfiddle.net/DGrkd/2/

Solution

  • You could add a span around the entity code and style that.

    Fiddle: http://jsfiddle.net/jasongennaro/QSR6M/

    Note: this does change the line height.