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

149 Comments

1 6 7 8
  1. Dazle
    Aug 24, 2011 @ 2:23 am

    Reply

  2. xbox 360
    Aug 25, 2011 @ 10:07 pm

    Thanks. For data good.

    Reply

  3. hotel near suvanabhumi airport
    Oct 17, 2011 @ 3:56 am

    This is the most smashing trick I’ve come across ever! Thanks a lot for sharing.

    Reply

  4. Moliva
    Dec 9, 2011 @ 8:17 am

    Heads up. Broken link on this post.

    Reply

  5. Martin Stoeckli
    Mar 20, 2012 @ 2:57 am

    That’s a really helpful post! I visited it frequently and it inspired me to write a font character map, to get an overview over available symbols. The overview can be found here: http://www.martinstoeckli.ch/fontmap/fontmap.html .
    Thanks again for your your excellent site.

    Reply

  6. custom bar stools
    Apr 23, 2012 @ 4:22 am

    I have read several just right stuff here. Certainly value bookmarking for revisiting. I surprise how a lot attempt you place to create one of these fantastic informative website.

    Reply

  7. Chasidy Monroy
    Jun 23, 2012 @ 9:49 am

    I have been exploring for a little for any high-quality articles or blog posts on this sort of area . Exploring in Yahoo I eventually stumbled upon this site. Studying this information So i am happy to show that I’ve an incredibly just right uncanny feeling I discovered exactly what I needed. I such a lot surely will make sure to don’t omit this site and give it a glance regularly.

    Reply

  8. John
    Jul 30, 2012 @ 4:37 pm

    For quick encoding I use http://www.html-entities.org/

    Reply

  9. Nichol
    May 26, 2013 @ 6:22 pm

    I like the helpful information you provide in your articles.
    I will bookmark your blog and check again here frequently.

    I am quite sure I will learn many new stuff right here!
    Good luck for the next!

    Reply

1 6 7 8

Leave a Reply