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 &lt; (entity name) or &#60; (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 ( “ ” ).

apostrophe and quotation

To correct this, you can use the right single quote entity (&rsquo;) as the apostrophe. Use the left double quote (&ldquo;) and right double quote (&rdquo;) for the quotation marks.

Arrows

I particularly find the arrow symbols useful because they can be used as direction arrows or breadcrumb separators.

back arrow

breadcrumb examples

Link Separators

My favorite entities for separating links are bullet &bull; ( • ) and dot operator &sdot; ( ⋅ ).

bullet

separators

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

trademark, copyright, degree

Symbols For Web Design

Here some entities that you can perhaps use for design layout:

✉ ✍ ✎ ✓ ☑ ☒ ✗ ⊕ ⊗ ☞ ☜ ♫ ✄ ✁ ∞ ♨ ☢ ✈ ☰ ☷ ♥ ★ ☆ ☺ ☹

symbols for web design

Miscellaneous Symbols

Here are some miscellaneous symbols that you will most likely never going to use (but they are cool):

♔ ♕ ♖ ♘ ♆ ✠ ♂ ♀ ♠ ♣ ♥ ♦ ☣ ☮ ☃ ☂ ☯ ☠

misc symbols

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.

rendering issues

Reference Links