Tag Cloud Design pattern

Problem summary

The user wants to browse content by popularity or most elaborate topic




  • Use when users of your website can add content yourself and possibly also many tags
  • Use when your website has more than 10-20 different tags, each with different weight in post-count.
  • Do not use to show the categories of a strict hierarchical structure


A tag cloud is a list of tags, where the font size of each tag is larger or bigger depending on its weight. Weight in tag clouds can be represented in three different ways:

  1. Size represents the number of times that a tag has been applied to a single item.
    This kind of tag cloud can help define the distribution of how the item is categorized.
  2. Size represents the number of items to which a tag has been applied
    As a presentation of each tag’s popularity.
  3. Size represents the quantity of content items in that category
    Tags are used as a categorization method for content items

Source: Tag clouds at wikipedia

There are several opinions on how tags should be ordered. Examples of ways to order tags are:

  • Alphabetically
  • Randomly
  • By weight
  • In clusters of semantically similar tags (similar tags appear next to eachother)


Tag clouds helps visualize semantic fields; how some categories have greater importance than others.

It can also help give an impression of what content is to be found on a given site. Which categories of content is the site focused on?

More example images of the 'Tag Cloud' pattern

  • TagCloud

    Tag cloud at Flickr.

  • coda.co.za

    3D tag cloud - must see in real life. Click the source to view it: "coda.co.za":http://coda.co.za/blog/

  • delicious.com

    The tag cloud at delicious.com has listed its tags with alternating sizes, but also alternating colors where black is the heaviest and light grey is the lightest.

  • www.piano-faust.de

    The tag cloud at piano-faust.de incorporates 5 different colors for the tag text and also 5 colors for the tag icons. The tag cloud is simple designed in corporate colors by CSS.


Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 74 votes, 51.35% like this one.