Question

In a web application, I have to display a special unicode character, know as BLACK DIAMOND (U+25C6) (see here for more details). Here is a sample : ◆

The font defined for the page is Arial, with size 13px.

Surprisingly, the character is rendered with a bigger size in IE6 vs other browsers (FF, Chrome, …).

Is there any reason of this weird behavior and what is the solution to avoid this ?

Answer 1

This is because the specified character is missing from the font you specified. So the browser looks for a suitable font to use for that character so it can still display it. Different browsers pick different fonts, so you’ll see it a little bit differently on each.

There isn’t much in general you can do to avoid this because missing fonts are very common on the web and thus you cannot really rely on any font to be present on the user’s machine. You can try mitigating it, though:

1. You can put the U+25C6 in a span that’s styled to use a different but specific font that has the character (and which works well with your main font).
2. Same as above, but distribute a web font (WOFF seems to be a reasonable choice nowadays) that contains the glyph. That way you have more control about what is displayed.
3. Stay far, far away from specifying fallback fonts like Arial Unicode MS. Just don’t use them at all.
4. If you’re just after the looks of U+25C6 and don’t care about having it actually in text form you can use an image or a CSS hack.