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
With WinXP and Firefox I can’t see all characters, some are a box with numbers in it, why use something that isn’t safe?
Thanks a lot. Very useful. It’s pity that windows renders it so bad…
http://www.digitalmediaminute.com/reference/entity/index.php is my favorite HTML character entity reference.
This is a great post. Thanks always insightful.
I’m not too fond of these entities. You’re all talking about screenreaders – I can’t even see 90% of the symbols here in my Feedreader! I would never use these, as you never know what browser the visitor is using or what special characters he has or has not installed on his machine.
As already said here, I would always prefer using UTF-8 and then just copying the symbols in, without any of that entity stuff.
nice post… these are very much helpfull for designing issues ….
keep it up…
Nick, this was such a fun post!
Some of these are really cool, even if I’ll probably never use them. I do use the », «, ←, →, •, ·, and ♥ sometimes, though.
A few people mentioned concern about how they would appear on screenreaders, and I think it would be wise to not use them as the sole part of a design. For example, if you want your logo to look like:
Letters of L♥ve
use an image instead. Same goes for trademarks and copyrights, though I would assume those are safe since they are pretty widely used.
The same rule for anything web design applies here: when in doubt, leave it out. (:
Wiki has a long list of different entities, for anyone who’s interested: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references They don’t have all of the ones Nick used in this post, though. I’m still searching, though, and will post a link if I find a better list.
Mac OS kicks Vista ass as usual…
Great post, I had totally overlooked the Apostrophe & Quotation Marks thing. thank you!
Here is the best list I could find: http://www.bigbaer.com/reference/character_entity_reference.htm They’ve got umbrellas and lots of other goodies, but they don’t have some of the entities Nick used here. I think there are a lot of entities that we don’t know about, which makes for a fun Easter egg hunt!
The page does not work
That’s just awesome! I am totally going to snow man it up!
Much as I enjoy working with Photoshop using (x)html and css when possible is often the best decision as long as one remains aware of accessibility issues.
I hope you all know that the way the symbols are rendered depends on the used font. You could use (for example) an @font-face declaration to implement a font which renders the way you like it. This has nothing to do with Mac OSX or Windows Vista.
And, more important then the above, it is better to use those things in utf-8. This way you don’t have to rely on the entities, just copy the sign or symbol you want as it is into your document, and Google will not parse some shitty entities.
♔ ♕ ♖ ♘ ♆ ✠ ♂ ♀ ♠ ♣ ♥ ♦ ☣ ☮ ☃ ☂ ☯ ☠
(just copied the signs)
I’ve found these triangle-shaped arrows extremely useful for table sorting and collapsable areas. ▲ (& #9650;), ▼ (& #9650;), ► (& #9650;), ▲ (& #9650;). Hardly found in any character tables.
oops. ▲ (& #9650;), ▼ (& #9660;), ► (& #9658;), ◄ (& #9668;).
Concerning the rendering problem in Vista, I just found this:
http://www.microsoft.com/typography/ClearType/tuner/tune.aspx
Maybe this helps? I can’t test it, don’t have Vista. :)
I use HTML Entity Look up by left logic. Works great!
I was eager to use the e-mail and telephone symbols, but them and most of the fancy symbols don’t work on IE and Safari…☹
(btw why are these 2 so unpaired → ☺ ☹)
All 65536 UTF coded characters are posted on utf8.of-cour.se
Website wing dings, great write-up.