Creating a spacing and sizing system isn’t quite as simple as something like “make sure everything is a multiple of 4px” — a naive approach like that doesn’t make it any easier to choose between 120px and 125px.
For a system to be truly useful, it needs to take into consideration the relative difference between adjacent values.
At the small end of the scale (like the size of an icon, or the padding inside a button), a couple of pixels can make a big difference. Jumping from 12px to 16px is an increase of 33%!
Just like you don’t want to toil over arbitrary values when sizing an element or fine-tuning the space between elements, you don’t want to build your spacing and sizing scale from arbitrary values either.
A simple approach is to start with a sensible base value, then build a scale using factors and multiples of that value.
16px is a great number to start with because it divides nicely, and also happens to be the default font size in every major web browser.
The values at the small end of the scale should start pretty packed together, and get progressively more spaced apart as you get further up the scale.
Here’s an example of a fairly practical scale built using this approach:
The question for me would be, how to use a scale system like that in a intelligent feshion? What do you think @visualjerk?
A linear scale won’t work
Creating a spacing and sizing system isn’t quite as simple as something like “make sure everything is a multiple of 4px” — a naive approach like that doesn’t make it any easier to choose between 120px and 125px.
For a system to be truly useful, it needs to take into consideration the relative difference between adjacent values.
At the small end of the scale (like the size of an icon, or the padding inside a button), a couple of pixels can make a big difference. Jumping from 12px to 16px is an increase of 33%!
Just like you don’t want to toil over arbitrary values when sizing an element or fine-tuning the space between elements, you don’t want to build your spacing and sizing scale from arbitrary values either. A simple approach is to start with a sensible base value, then build a scale using factors and multiples of that value.
16px is a great number to start with because it divides nicely, and also happens to be the default font size in every major web browser.
The values at the small end of the scale should start pretty packed together, and get progressively more spaced apart as you get further up the scale.
Here’s an example of a fairly practical scale built using this approach:
The question for me would be, how to use a scale system like that in a intelligent feshion? What do you think @visualjerk?