Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I am working on a web page that displays some music note names such as "B", "Bb" (B flat), or C# (C sharp). For a better readability I would prefer to display the correct flat and sharp symbols.

It seems that the standard sans-serif fonts such as Arial or Helvetica do not support these symbols, which leads me to the conclusion that I need to find a web font that looks similar to the widespread sans-serifs (Arial, Helvetica) and in addition has these two symbols.

Q1: Do you know of any such web font?

Q2: Or was I completely mistaken and the Arial and Helvetica actually do support musical notation symbols, and they happen to be in the same position for both of these fonts?

share|improve this question
    
Very view fonts implement more than a tiny handful of unicode symbols. Might consider some specific music fonts. I know they exist but I don't know which to recommend. –  Ben Brocka Apr 18 '12 at 18:12
    
Thanks, @Ben; I'd like to let you guys from this site know that there is a duplicate of my post on stackoverflow since my original post at UX was considered OT. One day later my UX post was migrated here. I didn't even have an account, so even now that I have one, I don't own this post and am not able to close it... –  chiccodoro Apr 19 '12 at 6:31
    
@chiccodoro: You can flag the question for moderation, and say that you want your active account here now to be associated with it. See a similar situation that was solved. –  Aᵂᴱ Jun 20 '12 at 12:16
    
@awe: Thanks, done. –  chiccodoro Jun 20 '12 at 12:21
    
Also see this for more details on the procedure in this kind of scenario. My advice of flagging is the fifth step... –  Aᵂᴱ Jun 20 '12 at 12:25
show 3 more comments

2 Answers

If using unicode characters, this will be available for a wide range of fonts.

Here you can see how to program these symbols in HTML as unicode, and how it is displayed here in the font used on this page:

♭ will show as: ♭

♮ will show as: ♮

♯ will show as: ♯

You can also copy the characters directly and paste them in as you like:

♭♮♯ will show as: ♭♮♯

share|improve this answer
add comment

I think you just have to know where to look.

There are at least three available as web fonts: Music Sheets, P22 Music and P22 Music Pro.

share|improve this answer
    
See also stackoverflow.com/questions/10209549/… –  Andrew Leach Apr 19 '12 at 10:52
    
Thank's Andrew. What I was looking for is a web font that renders the ASCII set (at least) just like a sans-serif font does but provides a FLAT and SHARP sign in its Dingbats set. –  chiccodoro Apr 19 '12 at 15:03
2  
OK. If you go to alanwood.net/unicode/miscellaneous_symbols.html you can test fonts. Unicode 266D, 266E and 266F appear to be the right symbols, and they might be read out correctly by screen-readers. In fact I wonder if ♭ will be rendered as a flat by browsers anyway. –  Andrew Leach Apr 19 '12 at 15:14
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.