If you would like to participate in discussions, please sign in or register.

Sign In with Facebook Sign In with Twitter

In this Discussion

Most Popular This Week

Theory symbols in online publications

If you're like me, you probably notice broken characters on websites with music theory texts all the time. Take, for example, this passage from the Grove Music Online entry on Notation:

The first symbol in this paragraph is supposed to be a circle. The character they've used is Unicode U+1D1C8 (Musical Symbol Tempus Perfectum Cum Prolatione Imperfecta). It does not render properly--in my browser at least, as the screenshot above shows--because the font that the Grove web designers have selected for entry body texts (Merriweather, is listed first in the relevant CSS declaration) does not include a glyph in the 1D1C8 slot. Now, there are alternatives that might have led to a more consistent user experience. For example, the editors could have employed one of the more commonly used glyphs such as U+25EF (Large Circle), but that would have led to other problems and they still wouldn't have the corresponding symbols for major prolation, let alone tempus imperfectum. 

I do not mean to disparage the Grove, of course, this kind of situation is quite common. It happens all over the place because, it turns out, using inline music theory symbols is surprisingly difficult when it comes to presenting different readers (with different browsers installed on different comupters) a consistent experience. And the issue is not just with arcane medieval symbols: careted scale degree numbers, half-diminished chord symbols, figured bass numerals, and even sharps, flats, and naturals are all subject to the same inconsistencies

I am confronted with this matter now because I am preparing an open-access textbook for online publication. I would like to do as much as I can to standardize the reader experience and so I am wondering if anyone here has any insights on how best to approach this matter. 

Some possibilities:

  • Embedded graphics in-line with the surrounding text

  • Using a custom font for symbol characters

  • Repurposing common characters that look like music theory symbols, such as using ø (Latin small letter o with stroke) for half-diminished

  • Writing out the symbols in longhand: ^5 for the fifth scale degree, viio6/5 for a fully-diminished seventh chord in first inversion, etc. (This sort of convention appears in older, typewritten manuscripts such as dissertations, but I've never seen any attempt to standardize the practice.)

Some concerns:

  • Cross-browser compatibility

  • Accessibility issues such as fallbacks for screen readers for visually impaired readers

Any information/suggestions/anecdotes on this would be greatly appreciated!

Sign In or Register to comment.


  • 4 Comments sorted by Votes Date Added
  • The Unicode block of musical symbols is supported by only about half a dozen fonts – see https://en.wikipedia.org/wiki/Musical_Symbols_(Unicode_block). It is therefore hopeless to expect that many of us could read these glyphs in any device that does not embed the fonts. The same is true, of course, for custom (non Unicode) musical fonts.

    The only viable solutions appear therefore to be either to use a format that allows embedding the fonts (PDF, for instance), or to embed in-line graphics.

    Some PDF virtual printers allow embedding only the glyphs used, which reduces the weigth of the result. This is a much better solution than embedding graphics – which however is the only solution for documents in HTML.



  • MTO uses MathXML for some symbols, like time signatures and figured bass. Examples: 

    I64 = <nobr>I<math><msubsup><mtext></mtext><mn>4</mn><mn>6</mn></msubsup></math></nobr>

    3/4 = <nobr><math><msubsup><mtext></mtext><mn>4</mn><mn>3</mn></msubsup></math></nobr>

    In other cases, we have to use inline graphics, because of the unreliability of fonts in the browser. Also, the Unicode symbols for flats and sharps look pretty bad (like Comic Sans). 

    Brent Yorgason

    SMT Discuss Manager
    Somewhere in the Universe
  • Thanks for the replies. 

    Nicolas, yes, you're right. The Unicode block of musical symbols is limited to the point of being worthless. PDF is a great option, but my current project will be published primarily in Pressbooks, meaning that I need to find a reliable HTML/CSS solution.

    Brent, thanks for your insight. MathML is useful but the lack of support in Chrome is a dealbreaker, I'm afraid! You mentioned "the unreliability of fonts in the browser." Could you clarify what you mean? Has MTO had issues with embedding (custom) fonts?

  • You can use MathML (and TeX) in chrome via MathJax. Just include a statement like this in the head tag: 

    <script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>;



        TeX: { noErrors: { disabled: true } }




    We do use some custom fonts, but they seem to render slightly differently from browser to browser. Also, I'm not aware of a good music font that is free to embed on the web ... 

    SMT Discuss Manager
    Somewhere in the Universe