Accidentals (♭ ♮ ♯) and Other Musical Symbols as HTML Entities

Standardized musical notation &rocks;

Kaleidoscope effect applied with The GIMP to F♯ and B♭ (Font: Noto Sans)

The typography of musical symbols lacks style on the web. To improve it, we can use HTML entities and replace # and b and all the other lazy shortcuts in our musical notation.

Within WordPress posts the HTML entities might be useful or in any other context where HTML parsing is available. On Medium there is no way to input HTML directly, so the entity codes won’t work. But we can just copy and paste the symbols on the left side directly.

♭        ♭   /  ♭
♮        ♮   /  ♮
♯        ♯   /  ♯

A few examples to illustrate the difference between low-effort musical notation and notation with the correct HTML entities:

• F# → F♯
• Bb → B♭
• C (natural) → C♮

It’s obvious which rendering looks better. Using HTML entities also improves the readability because the symbols created via HTML entities are what musicians recognise from sheet music.

“tilt selective photograph of music notes” by Marius Masalar on Unsplash

Additional musical symbols