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.
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.
Join 24,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
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!
True indeed. A 10% change is pretty good. Anything above 25% probably wouldn’t work.
Great tip . I’ll keep this in mind for future projects.
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 email@example.com