How to optimise the space used by tags in the right column of StackExchange sites?

In this meta question about what the StackExchange UI site should look like, I'm working on (read: messing around with) a design for the site. I'm using a web-based tool to edit the page's CSS, which is giving me a lot of freedom to change things while limiting me to the available HTML rendered by the server.

While changing and reorganising things (mainly elements like typography and visual weight) I realised that the right hand column as shown on nearly every StackExchange website is pretty inefficient. Here's how it looks on the meta site:

How the tags look on beta sites

Tags (and below, badges) are small objects greater in length horizontally than vertically. Each one has several attributes:

  • Name of the object
  • Number of times the tag has been awarded or member the badge has been assigned to
  • A visual element to reinforce the notion of the object
  • A distinct horizontal width depending on the length of the name

The way things are organised now feels very inefficient:

  • Each tag/badge takes up one line of space, despite not needing the entire horizontal width.
  • The tag and badge visual representation on this page feels inadequate. While tags and badges are designed to be displayed by themselves, for instance a tag on a question, or a badge on a member's profile, in these cases they are accompanied by metadata: the number of times the tag has been applied, or the member the badge is awarded to. But the visual representation still assumes a generic application.
  • On most StackExchange sites, these elements have strong borders, which creates a lot of awkward negative space in between each element as it sits on a line.

In my redesign I've taken care to reduce the strength of the tags (haven't tackled badges yet) to reduce that visual noise, but I haven't come up with a good way to represent tags in combination with number of times applied yet. I've had some ideas, but none of them feel right:

  • Render them in a tag cloud. This would use more horizontal and less vertical space. However, tag clouds are mostly scannable and not legible. Not sure if that's a problem though.
  • Consider a new visual representation for the combination of tag with number of applications. Perhaps by including the number in the tag: < discussion ]x14 would become < discussion|14 ]. Or by increasing the height of the tag element and placing the "14" below the name. That would take up more vertical space overall, but allow for several tags on each row.
  • Remove reference to specific number of applications and instead use a visual metaphor to indicate number of times applied. Perhaps by using a thermometer palette: "hot" tags could be more red, and cold ones more blue. This wouldn't be immediately apparent to new users, though.
  • Remove reference to specific number of applications and instead use width to indicate hotness. The wider a tag (in the right hand column), the more popular it is. As above, however, this would be somewhat confusing initially.

Question time: What would be an effective way to redesign the way tags and badges are displayed in the right hand column, given that I'm only able to modify the CSS and can't tamper with the HTML?

Tags: