Article overview

Visual Balance: Dealing with Variable Headline Lengths

· By · 3 comments ·

How do you maintain the visual balance in your design when the length of your headlines vary dramatically? A long headline will naturally demand more attention than a short one because it takes up more space on the page, skewing the visual balance.

YouTube offers an interesting solution. On YouTube’s video pages, short headlines use a font size that’s approximately 10% bigger than the one used for long headlines. In other words, YouTube adjusts the scale of the headline depending on its length.

The headline to the left is approximately 10% bigger than the headline to the right.

By adjusting the scale of the headline relatively to its length, YouTube makes sure the headline draws just enough attention to itself. Long headlines don’t overpower, yet short headlines don’t drown either.

This is a great way to maintain the visual balance of the page even when the length of the headlines vary greatly. (An additional benefit is that this approach will ensure that more headlines will stay on a single line because long headlines are rendered in a smaller font-size).

The idea of adjusting the scale of your design elements to the amount of information they contain is interesting, and can be very powerful – especially on sites with multiple editors (or millions, in the case of YouTube).

This opens up the notion that, in a time of user generated content, our designs must be alive and adapt to the information of each page on our site.

Share your thoughts in a comment.

Andres Max August 25, 2010 Reply to this comment

It is a good idea, I’ve used this concept before. But you need to pull it off right, it’s very easy to over or under-size the font and there goes your visual balance!

Jamie, Baymard Institute August 27, 2010 Reply to this comment

True indeed. A 10% change is pretty good. Anything above 25% probably wouldn’t work.

Dirk Unger September 10, 2013 Reply to this comment

Great tip . I’ll keep this in mind for future projects.

Post a comment!

Close overlay