Why size matters

Having a bunch of elements whose sizes are only slightly different from each other, may create friction and possibly even confusion in the viewing experience. This is especially true when the different sizes are meant to add meaning to the elements.

Let’s look at the most important place where unclear proportions occur most frequently:

your website’s written content. Again.

If your title font is only a couple points bigger than your subtitle font, and your subtitle font is only a couple points bigger than your body font, this lack of contrast results in a messy, jumbled up look that causes confusion. The fonts – whose different sizes are meant to establish some form of meaning – have proportions that are far too similar. In other words, the very thing that is meant to give them meaning (the contrast in size), is not distinct enough to impose that meaning.

Just imagine you have a web page with titles, subtitles and body text that looks like the example below. Imagine someone reading through a whole website like this.

‍

How not to use typography

The definitive guide you need to follow or else…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,….

‍

To achieve maximal clarity, we need to increase the contrast between the sizes of each. Use our website as an example. On any given page, the font of our titles is AT LEAST twice the size of our body font. There is no confusion here. You know when you’re reading a title. You know when you’re reading the body.

Another way to use proportions to create contrast and clarity, is by playing with thickness. Instead of using subheadings in our posts, we simply BOLD a sentence when it starts a new topic. We’re able to do this because our font is naturally very thin, so the bold version is well over twice as thick. The contrast is plenty. To make things extra clear, you can use thickness and size simultaneously.

Let’s look at the same set of type as in the first example. This time, we’ll optimize both proportions – thickness and size – to develop sufficient contrast between the title, the sub-title and the body. There is no confusion now, because the contrast in proportions is VERY clear. It’s also much more aesthetically pleasing, AND we were able to do it all with a single typeface.

How to use typography

The definitive guide you need to follow or else…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,….

This same principle goes for other visual elements on your website. Imagine having your website’s buttons be slightly different sizes, yet in close proximity to each other. This causes confusion because the brain tries to create a meaning out of the minuscule difference in size, even though there is no meaning there. This develops a feeling of frustration at a subconscious level. You know how sometimes when you look at a website something just feels a bit off, yet you can’t tell exactly what it is? You’re often feeling that underlying frustration that your brain is generating from trying to find meaning in slight differences in proportions of objects that are related to each other.

If objects are meant to have different meanings via their sizes, then the difference in sizes should be easily noticeable. If the objects are meant to have the same meaning, (such as buttons or text), then they should not vary in size or proportions at all.

Use contrast wisely, or it’ll bite you in the ass.

‍