Home/ Questions/Q 8023563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T22:35:47+00:00

I’m working on a web app where I need to display a service mark

  • 0

I’m working on a web app where I need to display a service mark character (℠). The stylesheet has a font-weight of 300 for the tag where the character is rendered. When rendered at this weight, the service mark character seems to become abnormally large and slightly thicker than one would expect given the appearance of the trademark character (™) at the same weight. The behavior is more pronounced when a font-weight of 100 or 200 is used.

Below is a test document which demonstrates the behavior. The output on Firefox 12.0 on OS X looks like this (sorry, too new to attach image inline). This behavior seems to persist regardless of font-family used. Chrome 19.0.1084.52 on OS X also displays the service- and trademarks with some inconsistency across weights, but the effect is much less noticeable.

Is this a bug with Firefox/Gecko, or am I doing something wrong here? Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Service Mark Test</title>
    <meta content='text/html; charset=utf-8' http-equiv='Content-type' />
  </head>
  <body style="font-family:sans-serif;">
    <p style="font-weight:normal;">Here is a normal service mark&#8480; and trademark&#8482;</p>
    <p style="font-weight:100;">Here is a weight 100 service mark&#8480; and trademark&#8482; <span style="color:red;">(unexpected)</span></p>
    <p style="font-weight:200;">Here is a weight 200 service mark&#8480; and trademark&#8482; <span style="color:red;">(unexpected)</span></p>
    <p style="font-weight:300;">Here is a weight 300 service mark&#8480; and trademark&#8482; <span style="color:red;">(unexpected)</span></p>
    <p style="font-weight:400;">Here is a weight 400 service mark&#8480; and trademark&#8482;</p>
    <p style="font-weight:500;">Here is a weight 500 service mark&#8480; and trademark&#8482;</p>
    <p style="font-weight:600;">Here is a weight 600 service mark&#8480; and trademark&#8482;</p>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change the font family setting to e.g.

    font-family: Calibri, Arial Unicode MS, Lucida Sans Unicode,
  DejaVu Sans, FreeSans, sans-serif;

    This is a font problem: when you use just the generic name sans-serif, each browser will use its own default sans serif font. This is typically Arial, which does not contain the service mark character. Browsers will be forced to use fallback fonts, and Firefox apparently uses different fallback fonts for different font weights—this is a bit strange, but surely possible.

    The list above contains specific fonts that contain the service mark character. Most of those fonts have just one or two font weights, as most fonts, really. Even the bold version of e.g. Arial Unicode MS is “fake bold” (algorithmically bolded normal font), but the result is usually tolerable, though not pretty.

    • 0