5

I'm aware that this question will be very vague, but I'll put it out there at the chance that someone will know what I'm talking about.

I recently read an article about the science behind spacing and the benefits of creating spacing variables in your css that grow by a factor of some number. I think the magic number was 8. The author had some evidence that scaling spacing by a factor of 8 was more appealing to the eye. That number could be different but there was a magic number. He then set up variables with all the margin/padding sizes in his css to keep things uniform.

Ring any bells? Maybe not the article but the practice of creating spacing based on a common factor?

5

“White space is to be regarded as an active element, not a passive background.” — Jan Tschichold

enter image description here

Space As A Design Element

Think about music for a moment. If every note or chord were played at the same time, you wouldn’t have music. You’d have noise. Music occurs when sounds are contrasted against silence. Varying the pattern of sound and silence creates rhythm and melody. Without the silence, there is no music.

Space performs the same function visually. It gives positive elements room to breathe. It gives the eye freedom to move through a design and to discover the elements it’s looking for. The positive is seen only in contrast with the negative. Without space, you don’t have design. You have visual noise.

2

The "8 point grid" concept is about choosing a base unit size. But that only gets you so far (for the record, I prefer 6). The real underlying issue at question in such systems is the ...

Proportional scale

Historical precedent

The most widely known and well-developed example is Le Corbusier's Modulor which he called the harmonious scale.

Le Corbusier's diagram of The Modulor

Le Corbusier's scale was influenced by da Vinci's Vitruvian Man exploration (below) and they both carefully studied Vitruvius' pivotal work De Architectura.

da Vinci's diagram of the Vitruvian Man

As you can see from the diagrams, The Modulor and Vitruvian Man sought to find the ideal proportional scale by analysis of idealized human proportions.

Another key concept of The Modulor and Vitruvian Man is the Fibonacci Sequence and the value it progressively approaches: the Golden Ratio (1:1.618...). The Golden Ratio has been observed in various naturally occurring systems (such as the spiral arrangements of sunflower seeds and pine cone scales, and various idealized aspects of human form). It has been cited as a pervasive example "harmonious" proportion in various art and architecture writings for centuries.

Fibonacci sequence visualized in a series of nested golden rectangles

Intent

The goal in these systems is to identify a harmonious series of numbers that follow a given ratio. This series then becomes the foundation of all dimensional decisions.

A simple linear scale (eg, n + 8) produces a sequence of units whose differentiation from one to the next is unrelated to the progression as a whole. Dis-proportionate progression, if you will.

Using a logarithmic scale (eg, n * 1.618) the relationship between points on the scale becomes proportional to the relationship between all other points. Because this progression becomes quite rapid from a linear perspective, Le Corbusier promoted the dual scale seen in the sort of spiral-like measure in his diagram.

In practice

Defining one or two proportional scales for a project will provide you with a referential system of order. This is particularly evident as you specify type sizes, but you can also apply this to image sizes, buttons, the layout grid, or anything else you can dream up.

A single, experienced designer may find that they gravitate toward this sort of proportionality naturally. Such a designer might even be able to do so very rapidly. But as soon as you introduce a second designer to that equation or expect a developer to implement designs, having a system to constrain decision points can be very helpful.

For example ...

Here's a "dual strand" scale applied to type sizes and buttons. The scale is roughly 1:1.33 with some rounding adjustments for ease of use. The bold red numbers were the starting point (based on desired body font size and minimum button height). Numbers in grey are part of the scale, but not used here.

Arrange this system within your [desired base unit] grid and you have a pretty handy reference system.

A dual strand proportional scale in use

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.