This is the second of a three-part series of articles about “invisible forces” in design. In the previous article, we learned about how alignment can be used to create direction and focus. In this article, we’ll learn about how working with size changes can create contrast and balance, and help your designs communicate more clearly.
Bigger Stuff Looks More Important
It’s obvious that when you make an element bigger, it tends to look more important than the smaller elements.
But, this needs to be considered along with other factors that affect visual hierarchy. For example, these two elements take on about the same level of importance, because they’re the same size:
If anything, you’d see the top element before you’d see the bottom element.
But if you make the bottom element bigger than the top element, it will look more important.
However, other things such as visual weight (are you using a bold or light font), or color contrast, can reverse the effects of larger size.
In this illustration, the lighter element looks less important, even though it’s bigger.
But just by giving the same illustration a dark background, now the lighter (and bigger) element is dominant, thanks to the fact that it contrasts the background more than the smaller element.
Make Meaningful Size Changes
Especially when designing for the tiny screens of today’s age, you should be using size changes with purpose. There’s no point in making a font larger–and thereby taking up valuable screen real-estate–if it’s not necessary.
Whenever possible, you can use the factors mentioned above to change your visual hierarchy, but sooner or later, you need to make one thing bigger than another. Just don’t do it haphazardly.
Look at these different elements, each one larger than the previous.
Now, which reads more clearly to you: that layout, or this one?
The elements from the second example are sized based upon a varied scale. Each font size relates to the next smallest size with the same mathematical relationship as it relates to the larger size.
The type sizes in the varied scale have a proportional relationship to one another. Proportions help make parts of your designs look like they belong together.
You can see proportions in action in the MailChimp logo.
Each of the circles that make up the features of the chimp relate to each other by a factor of .75. The circle that makes up the belly area is .75 the size of the circle that makes up the body, for example. Hicks Design, the firm that designed this logo, did this on purpose!
Don’t be Fooled by Fools’ Gold
Many of you are probably thinking about the so-called “Golden Ratio” that gets a lot of hype. The golden ratio is roughly 1:1.618. Yes, the chimp would still be attractive if it were based upon the golden ratio, but it wouldn’t be objectively any more attractive. Despite the hype, there is no evidence that The Golden Ratio is any more attractive than other popular ratios such as .75, or .67.
To illustrate this, I once polled my email list about which of the above rectangles they found more attractive. One of them is a square, another is a .75 rectangle, another is a .67 rectangle, and another is a “Golden” rectangle. Which rectangle looks most attractive to you?
Here are the poll results:
- top left (Square): 8%
- top right (3:4 rectangle): 29%
- bottom left (2:3 rectangle): 37%
- bottom right ("Golden" Ratio): 25%
As you can see, the so-called golden rectangle performed very well, but it didn’t turn out to be the most attractive rectangle.
The 2:3 rectangle won in this case, but don’t read too much into that. The point is, anything from the Golden Ratio to 3:4 is going to be more attractive than a square.
You can use this knowledge to make your typography beautiful, and save time if you work with a pre-set varied scale for your typography.
For example, these are the font sizes that I always use. Each size is roughly .75 the size of the previous size (with a little rounding).
A side-benefit of working with a .75 scale instead of the golden ratio, is the math is much easier to do in your head: What’s 75% of 16? Easy! What’s 61.8% of 16? Errr.
Conclusion
By thinking about the size changes you make, your designs will look cleaner and clearer, and while being more usable, and converting better. If you use a varied scale, you can actually make great designs faster!
Stick around for the final article in this series, where we’ll learn how shaping the page through alignment and sizing, and thinking about your white space, helps give your designs even more clarity.
