Scalability and visual rhythm

No secret that design systems often use the number 8 as base value for scaling their patterns. Github's own primer or Google's material design are good examples for this practice. Using 2x2x2 became the rule of thumb. There are a lot of articles about how to implement such a system (duh), but not much on the why.

Some digging and rambling below.

It's because it scales, dummy

One of the most visible parts of a design system is spacing. Spacings are the building blocks of components and layouts. A small gap is not just a self-serving visual key, it can define meaning, strengthen a user-flow or establish relationship between elements. For a good user experience, pages cannot jump around visually, there should be peace among elements. Having fixed spacing helps you keep your design steady.

What happens if you just use an 5 point base for spacings?
Some user will zoom in, others would like to have crazy retina screens.

110%, 125%, 150% 175%, 200%.
If you only consider spacing — this might just work.

Typography

Font sizes

Things were great when only metal pushed ink into paper, but when we turned on computer screens, the initial joy we had faded quickly. Operating systems converted from point based system to pixels, shit started to hit the fan.

OSpoint sizepixel sizeresolution
MacOS12pt12px72 ppi
Windows12pt16px96 ppi

Throughout the late 1990s and early 2000s, websites had body text anywhere between 9–14px. For a while, designers thought 16px was too large because they were used to the 12pt (12px) default on their Macs. [2]

Baselines

In order to communicate with your audience, emphasize, interact, spark interest; a good system should define a scale for type. Being as basic as spacing or colors, font usage alone can tell a tousand stories.

One crucial, ofter overlooked part of a typescale is the baseline. Baseline essentially is vertical spacing, determined by the line-height property of your body text. [1]

Whole numbers

Now, with our pica-s converted to pixels, we can even do some math. Line heights usually moves between 120-180% of the font pixel size. Of course thats not true. There are exceptions, special fonts and use-cases. [3]

multiplier100%125%150%175%
1.512151821
1.751417.52124.5
216202428
2.520253035
324303642
3.528354249
432404856
4.536455463
540506070

Little to no fractioned number in a given composit comes visual rhythm. Product interactions and intentions of the brand will be in sync. Interoperable parts will less likely to feel off.

There is no holy grail in scaling alone — all of this only mean you have to deal with scaling to keep a system viable.


[1] Not going into details here, but I can't recommend A guide to vertical rhythm enough.
[2] Read more about the history of font sizes here: Your Body Text Is Too Small, Point (typography).
[3] Slightly updated table from @broccolini's Design Systems: when and how much? talk.


Something to add? Tweet me @pyx.