Be careful when using Unicode symbols for graphical elements

Updated . Posted . Visible to the public.

There are many fun Unicode characters like ▲ or ☯. You might be tempted to use them for graphical elements in lieu for an image. After all they are so much easier to style and scale than a raster image!

Unfortunately you will discover that these symbols render very differently on Linux, Windows and MacOS. The reason for this is that the font you are using will probably not contain any characters outside the standard Latin-1 set. When browsers encounter a character not included in the current font, they use a fallback font for this one character. And that fallback font looks different on each platform.

I recommend to never use a Unicode character that isn't part of your current font. What you can do is to use an icon font that probably includes the symbol you are looking for.

Henning Koch
Last edit
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2012-09-04 22:33)