Some characters (e.g. the less than and greater than signs) are reserved for HTML markup. In order to display these characters as text, you must enter the HTML entities in the source code. For example, to display the less than sign (<), you need to enter < (entity name) or < (entity number). Among the entity list, there are quite a lot of symbol entities that we can use in layout design. For examples: → ♥ ♫ ✓ ✗ • ☞ ✁ ★ “ ⊕. Have you seen the snowman ☃ symbol before? If not, continue on this post to find more surprises.
The Advantages of Using Entities Rather Than Images
- It loads fast because it is text base.
- Scalable according to font size.
- Easy to change color and sizing.
Apostrophe & Quotation Marks
Most common typography mistakes found on the internet are probably the misuses of apostrophe and quotation marks. We often misuse the prime symbol ( ' ) as the apostrophe ( ’ ) and the double prime ( " ) as the quotation marks ( “ ” ).
To correct this, you can use the right single quote entity (’) as the apostrophe. Use the left double quote (“) and right double quote (”) for the quotation marks.
Arrows
I particularly find the arrow symbols useful because they can be used as direction arrows or breadcrumb separators.
Link Separators
My favorite entities for separating links are bullet • ( • ) and dot operator ⋅ ( ⋅ ).
Trademark, Copyright, Degree, and Currency
The other commonly used entities are probably the trademark, copyright, degree, and currency symbols.
Trademark ™ | © Copyright | Registered Trademark ®
Degree: 29° | 26 ℃ | 60 ℉
Currency: ¢ Cent | £ Pound | ¥ Yen | € Euro
Symbols For Web Design
Here some entities that you can perhaps use for design layout:
✉ ✍ ✎ ✓ ☑ ☒ ✗ ⊕ ⊗ ☞ ☜ ♫ ✄ ✁ ∞ ♨ ☢ ✈ ☰ ☷ ♥ ★ ☆ ☺ ☹
Miscellaneous Symbols
Here are some miscellaneous symbols that you will most likely never going to use (but they are cool):
♔ ♕ ♖ ♘ ♆ ✠ ♂ ♀ ♠ ♣ ♥ ♦ ☣ ☮ ☃ ☂ ☯ ☠
Rendering Issues
Note that Mac and Windows have different rendering system. The symbol entities will most likely appear different on different operating systems. Check before you use it.
Reference Links
- For a full list of entity reference, check Bigbaer.com - Character Entity Reference.
- W3Schools.com - Symbols Entities
- Webstandards.org - Symbol Entities
I think its very important that you mentioned the rendering issues in there at the end. Most people don’t realize the massive differences cross-browser and cross-platform.
thanks!
this is very helpful :)
Dont forget about em and en dash (— and –) and horizontal ellipses properly set (&hellip); ellipses are not properly set with three periods (…).
PS: what you refer to as foot and inch marks (primes) are not actually primes. They are neutral apostrophe and quote marks. Primes, from a typographical and unicode point of view are actually different. Check it by searching first for “prime” in your unicode table and then for “quotation” in the table.
Damn, edited out the semi-colon by mistake. Horizontal ellipses properly set: …
The last three categories are rare on the net. I haven’t noticed them, but they are quite useful. Thanks for lining them all up. I did not even know there was a row/thumb/phone and email icons.
Just use UTF8 and type those characters directly (or copy from char palette).
Or copy them from copypastecharacter.com. A very handy site!
Thank you for this wonderful post Nick. It’s definitely very helpful for me, as I always get these wrong. I also think there’s a WordPress plugin for this, but I don’t remember what it was.
Great post Nick, I tend to ignore these, especially good quotation marks. I studied in Denmark and they dont use the same as in english and we use something else again here in Iceland.
Check this list out: http://en.wikipedia.org/wiki/Quotation_mark,_non-English_usage
…and this list is also very good: http://www.starr.net/is/type/htmlcodes.html
…thanks for reminding me of this. Typography is the most important part to master in web design, not photoshop ;)
Here you can find many screens how demopage looks in different browsers on different operating systems:
http://browsershots.org/http://www.webdesignerwall.com/demo/html-entities/
Luke
I am not sure how you managed to get them to render so badly in Vista. Other than that, quite helpful.
Very helpful indeed. Thanks for sharing.
The problem with many of these is that they are not accessible to screen readers. The screen readers do not know how to pronounce many of them.
Particularly, I would discourage the use of arrow (or any other entity-based) symbols in breadcrumb trails: They are meant to help with navigation, but to a user of a screen reader they are a great hindrance.
占个位子 ^_^
Those rendering issues are certainly worth noting. How much better do the OS X versions look? :)
Thanks for the info.
I agree with Rimantas. When using UTF-8 no need to suffer with HTML entities, just copy and paste a symbol as it is.
Like this post a lot.
One small note, when describing the prime symbol in the paragraph about apostophe and quotation marks. you accidentally used an open single quote instead of a prime.
I’m with Mike on this. I won’t be using these ’til I know what screen readers do with it.
@Martijn and @Mike, I think screen readers shouldn’t pronounce some entities at all. Whether entity should or how it should pronounced is up to the screen reader (software), don’t you think?
Otherwise bread crumbles would indeed be pretty annoying.
I am surprised that I have not seen a cheat sheet put together for these….