tm symbol wont show up as it should in html, sm symbol works tho

1 Views

i cant make the TM symbol to show up as it should, the SM symbol is working fine. The test page you can see is located at http://codita.ro/test/
I have deleted both reset.css and normalize.css and its not because of the resets..
Here’s the page if you can track this down so i dont have to wrap the symbol in a span across the site to make it look smaller.

example of code:

 the SkinLaze™ aesthetic
Post Views: 1

Related posts

Leave a Reply

4 comments

  1. The symbol “™” is there, just pointlessly small (I copypasted it from the page into this message). This is a flaw in the design of the font being used.

    If you cannot change the font, consider using a different font for “™” and probably for “©” too (it looks broken). The simple way to do this is to wrap the occurrences in span elements with class and use CSS to set the font on them. A more modern, but somewhat less cross-browser way, is to use @font-face with unicode-range.

    The reference ™ is incorrect by the specs; ™ and ™ are correct. But nowadays all browsers accept ™ too.

  3. It looks to me like the font you’re using, Tinos Regular, doesn’t support the trademark symbol.

    I’m no expert on workarounds for this sort of thing, but the first that springs to mind is to drop back to a font that includes the glyph:

    /* CSS */
.fallback-font {
   font-family: serif;
}

<!-- HTML -->
This is trademarked<span class="fallback-font">™</span>.

    EDIT: While our solutions are basically the same, I’d defer to Jukka on this one, who clearly knows what he’s talking about more than I do 😀

  4. On my tool AmpWhat HTML entity reference, use the “f” button at the bottom to try out different fonts. Some have custom glyphs, and some fallback to other fonts. Although not its primary purpose, you can explore what characters are supported in different fonts.

    Alternatively, use suptm element, as in <sup>tm</sup>.