Special characters (aka ‘glyphs’) look cool and they’re a lot of fun. They can add some spice to your content if you use them in a non-spammy way. As a reader I know I get a small ↗ of interest when I read a special character (this seems trivial, but it is these small ↗ and ↘ in emotion that cause people to continue or stop reading your content).

Inserting these characters is not hard, but it may be less straightforward than you think and there are some concepts to learn that will help you with publishing content in general.

For instance, say you want to insert this nice ☆ symbol because you notice that repeating the phrase ‘five star’ is getting monotonous, so you want to abbreviate it to ‘5☆’. Inserting it will depend on which software you’re using for your web publishing and if you should insert it depends on some other factors.

A Content Management System

CMS’s are the easiest way to publish content on the web, as we concluded in our article Website Building for Non-Coders. They include services like WordPress, Blogger, Squarespace and Wix.

One of the ways they make publishing content easy is that they use WYSIWYG (‘what you see is what you get’) editors where what you enter into the editing area looks like what is displayed on the webpage. So if you use one of these systems, just paste an ☆ into the editing area to put an ☆ on your page. This info is still useful for you however because one day you might be web publishing or word processing in a different situation and be confused when a �, ▯ or something random appears in the place of it when published.

HTML coding in a text editor

This is where you’re going to learn something about web design. If you paste the special character into your HTML, your text editor may not even support the character, and may display a ‘not recognised’ symbol like &#65533. Or, it may display in the text editor, but not when the HTML is previewed in the browser. If this happens, then you need to paste not the character itself into your HTML, but its ‘character entity’. So continuing our example:

Symbol on page: ☆

Symbol in HTML:

HTML Entity (decimal): ☆

HTML Entity (hex): �

You can insert either of these codes into your HTML to have the symbol show up on your website. Some symbols also have a ‘name code’ like © for © which also does the same thing.

Where do I find HTML character entity codes?

To find these codes, you can just paste the symbol into your web browser but we recommend this character search engine that we have queried with ☆ as a demonstration: Fileformat.info/☆.

How do I find the special characters in the first place?

The two best ways to find these special characters that we have to recommend are:

    1. Search using words in the Fileformat.info search engine. For example, to find our star, you might try the search queries: Fileformat.info/star or /white star
    2. Draw the symbol you have in mind using this fantastic tool: shapecatcher.com. It detected our infantile 1-second drawing very well:

shapecatcher-drawing

Where can I find the full list of these special characters?

We love the Unicode® character table. It lists all of them in an informative, easy-to-understand interface.

What is this Unicode that I’ve been hearing about?

Unicode is the computing industry standard for text. It basically defines all the symbols and how they are ordered and coded into a manner that computers can use.

Problem: My character still isn’t showing up on the webpage

There are several possible reasons for this and we’ll go through them. This section is still useful for learning the basics of computer characters, so we recommend reading it even if you don’t have these problems right now.

Solution: It’s an OS-specific character

Some characters only work in the way you intended on a specific operating system (Windows, Mac, etc.) and not others. An example is the apple logo character: . If you’re on an Apple device, that will look like the Apple logo, but if you’re on a non-Apple device it will appear as some kind of ‘symbol not recognised’ symbol. This is the main OS-specific character that people mistakenly paste on to webpages thinking that everyone else can see them, but others include the Mozilla dinosaur character, the Debian logo and the AutoCAD ⌀, ± and ° characters.

Solution: Your font doesn’t support the character

No font currently supports all of the unicode characters. There are >40,000 characters total considering that Unicode aims to be a very comprehensive standard for text, so supports all languages, symbols from all fields, etc. The font which supports the most is the GNU Unicode Font which has >34,000 characters. You probably aren’t going to need that many characters so fonts that have good unicode support include: Courier New, GNU Free Fonts and DejaVu.

Solution: It’s a character from a dingbat font

A dingbat font like Wingdings is a font where the ordinary characters are mapped to different symbols. This is useful for extending the amount of symbols that can be inserted into a document. For example, ‘Wingdings’ written in the Wingdings font comes out as: Wingdings. If you convert one of these characters to another (non-dingbat) font it will come out as the normal character.

Solution: The browser doesn’t support that character

It’s actually a good thing that you picked this up then. Not all browsers support all characters and that’s another unfortunate limitation on the special characters you can use. Chrome has the worst support and Firefox the best. Chrome also has 70% of the browser market share so it’s best to check if the symbols work on Chrome if you only test them on one browser.

 

That was a lot of info, I hope it went down easily. Furthermore I hope it was interesting and kind of cool (in the nerdiest way possible of course). We personally love how pithy and quirky special characters can be when used in inventive ways. They’re like lego for content publishers. See what you can come up with ☺🖒.

Leave a comment