I asked this question on Meta Stack Overflow: Make Badge Width Consistent

I thought it was a shoo-in, but it got downvoted a lot more than I expected (currently stands at +3/-15 for those unable to see vote count breakdown), so I'd like to see what the good folks on GDSE think.

Which looks better?

Badge width mockup

On the left are the current badges. On the right, badges are all equal width (min-width: 10em;)

One possible explanation for the disagreement came from user Adel:

I think you see the badge as an image. But I see it as just text.

I think that's very astute. Despite my reputation on Stack Overflow, I'm decidedly not a programmer. I'm a VFX supervisor who spends a fair amount of downtime at work developing tools, but my bread and butter is VFX.

So, I see the badges as images, and so want them consistent. As text, I understand why a tighter boundary makes more sense.

What does the Graphic Design Stack Exchange community feel looks best? Should width be consistent, or is it better as is?

  • 1
    Keep in mind you're looking at a full list of them where the right rag is quite awful looking, it's not as bad usually when you are in a user profile usually...luckily!
    – curious Mod
    Commented Mar 29, 2014 at 19:27

3 Answers 3


Similar to setting text in all caps, ragged right edges make reading easier in most cases.

The human brain sees not only characters, but shapes, including the overall shape of a word. This shape recognition carries a great deal of weight when reading. In fact, it's often why taht old tirck of mixnig letrtes in wrods alwos them to sitll be raed corertcely. :)

Forcing all badges to the same overall shape would actually reduce readability.

  • 1
    That's a good point. Readability really hadn't even entered my consideration. Your "old trick" got me caught up on alwos. Then I realized there was a missing L ;)
    – mhlester
    Commented Mar 29, 2014 at 7:26
  • I'd like to add that there is a term for that. It's called the "Bouma-shape" en.wikipedia.org/wiki/Bouma
    – Pdxd
    Commented Apr 1, 2014 at 14:08

Symmetry is not always the best aesthetic; organic contours are often preferable to perfectly symmetrical lock-step designs. I'm not going to get into whether or not this is a place where that's true, I'm just pointing out that there are multiple aesthetic perspectives on this and they're very much influenced by context and culture.

(Personally I think the current organic look is fine, and the massive swathes of blank tag in your proposal are rather unsightly: it's better to have the "white space" of the background than to introduce a whole new kind of blank area. All you're doing is calling further attention to the fact that the text is of differing lengths, giving us black bars to measure it by.)

However, there's a very simple, practical reason to keep badge "buckets" automatically sized to their text, regardless of aesthetics:

New badges.

If all badges are sized to accommodate the longest phrase any badge could possibly have, that not only calls attention to the unused space--it introduces a new variable. This wouldn't be a one-time fix, it would have to be kept in mind every time a new badge is made: at the very least, it would impose a new restriction on badge naming. Badge design and implementation would get finickier and that would in turn artificially and unnecessarily discourage the practice.

  • 1
    Thanks for the feedback. It's an interesting design perspective I hadn't thought of. As for different badges, the biggest risk I thought of is tag badges, so I looked at the top 200 tags on Stack Overflow before deciding on 10em. For normal badges, clever puns or witty anachronisms have been generally short.
    – mhlester
    Commented Mar 29, 2014 at 7:26
  • Granted, there does seem to be a 25-character limit on tags, so that's got a predictable upper limit. But yeah... there's no such thing as a universal design aesthetic and I'm definitely leaning toward the current choices on this matter.
    – BESW
    Commented Mar 29, 2014 at 7:35

I like the equal width, It being a badge i think it gives it more force and gravitas. I don't think the intent is "easy to read" in gamification. you want them to have a sense of weight, power. A medal, a Roman standard! I would even toy with centering the text.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .