Designers often put design first and justify the sloppiness of their work by saying, “there is a creative idea here” or “that’s the author’s idea”. But a designer is not an artist.

Designer ≠ Artist

The Internet, printed matter, and outdoor design are visual mediums that carry information. Unlike art paintings, people read websites and signage to learn about something: how to buy a product, contact a company, or go to the library. Therefore, when working on information design, it is first of all important not to bring beauty, but to convey information clearly and unambiguously. In this, the designer is helped by rules and guidelines.

In this post, I will talk about the main principle of information perception and the rule that follows from it.

A little theory

The rule is based on the principle of proximity in Gestalt psychology — objects located next to each other are perceived together.

Proximity principle. The right part of the picture is perceived as three columns

Hence the conclusion:

The inner distances of an element should be smaller than the outer distances

The law of proximity works at all levels: in letters, words, sentences, paragraphs and modular layouts. If this principle is not followed, elements can form random unwanted relationships and cause curiosities:

Consider a block of text. Word spacing is internal, and line spacing (leading) is external. So, according to the rule, let’s increase the leading:

On the right, the leading has been increased. The block looks neater and lighter

If you add a title to the text, the leading of the title — external, should be larger than the leading of the text — internal. Remember, the outer is always larger than the inner:

A block with properly spaced text is easier to read

If this block is placed on a placeholder, its margins will play the role of outer, so they should be larger than the header leading:

The larger margins of the die give the block significance

Now let’s look at this with examples.

In letters and words

Let’s write a word for an example:

airport-1.jpg.

In the word, the inner distance plays the space inside the letter, and the outer distance plays the space up to the neighbouring letters. Now the rule of proximity is broken. The letters are cramped, it’s hard to read the words. The middle of the letter O looks like a hole.

Let’s increase the inter-letter distance so that visually the letter O will no longer make the word look like a hole:

A certain solemnity has appeared, the letters breathe, and the word is much easier to read.

Let’s add two more words, but leave the space between them as standard:

The phrase is hard to read, it feels like one long word.

Let’s increase the spaces between the words:

It’s better now, let’s continue the experiment. Let’s change the font to a more elongated one:

Since the letters are narrower, the distance between them is smaller, so we can reduce the distance between the letters themselves:

Done! The phrase is now compact, clear and easy to read.

This is how this inscription looks on the airport building:

Photo from the web

And this is what it could look like if the proximity rule was enforced:

The flag could also be aligned with the letters, but that’s beside the point

In a text block

While letter spacing and space play the role of inner and outer between words, space and leading play these roles in a paragraph.

Let’s look at an example from a paragraph with a heading. The paragraph and the header are two independent objects. The distance from the header to the first line plays the role of external for them. The distance between lines — text leading — plays an internal role.

In this example, we see that the distances are equal. Such text looks ugly and is uncomfortable to read. You can’t leave text blocks like this.

Let’s tidy it up. First, let’s increase the distance from the title to the text:

It’s better. The header has gained independence.

Now let’s increase the distance between the lines, but don’t forget that this distance plays the role of internal and should be smaller than external:

Done.

In a text block with an image

Now let’s consider a bunch of text blocks, titles and an illustration. For example, a screenshot of a website like this:

1-1.png.

The blocks consist of three elements: an image, a title, and a description. We can see that the text descriptions of the three columns are dangling by themselves, and their titles are stuck to the pictures. This is wrong.

There’s another principle from Gestalt psychology at work here — the principle of similarity:

Elements that are similar in size, outline, colour or shape tend to be perceived together

Headline and text have a greater connection than picture and headline, so descriptions should be moved to their headlines:

1-2.jpg.

Together they create a single block that comes into connection with the picture above it.

The proximity rule is followed at each level:

Another example. Let’s parse a block like this:

5-1.png.
Before

We apply the proximity rule: increase the text leading and move the text away from the title. Increase margins on all sides. We removed the “Read More” button and moved its function to the header. Moved the arrow that points to nowhere to the header.

After

There are fewer elements, informativeness has not suffered, and the block has become cleaner and neater.

Another example:

Before

Align the distances in the text block. Shift the icon a little to the right, behind the text line, so that visually it appears to be at its level.

Already better

Combine the “More” with the block title and enlarge the icon.

Now

The block became more compact and attractive.

Conclusion

Don’t ignore the proximity rule. When assembling the layout, first of all, determine the outer and inner distances. Make sure that the first is larger than the second. And do not forget about the principle of similarity, otherwise, the result can be deplorable:

It is a really bad word in Russian ;-)

Read more:
On object spacing and perception in “Editing by Design” by Ian White.
The rule of internal and external in Gorbunov’s “Typography and layout”.
The theory of proximity in Lebedev’s Kovodstvo.
On leading in Müller-Brockmann’s “Modular Systems”, Tschichold’s “The Image of the Book”, and Korolkova’s “Living Typography”.
Capitalisation in Chichold’s “Samples of Fonts”.