Booklet

author

Fullstack HQ

Design

Spacing Basics Every Designer Should Know

design

Design

|

Spacing Basics Every Designer Should Know

Lets tackle some of the spacing basics that impact all sizing, measuring, and spacing

Base Unit
The base unit defines what every measurement will be a multiple of 8px is the most common base unit used nowadays because it makes scaling between devices smooth and consistent

  1. It is divisible by 4 and 2.
  2. You can easily resize any element without ending up with half pixels, as 8/2=4, 4/2= 2, and 2/2 = 1. If you used 10, you'll end up with 5 px then 2.5 px, then 1.25 px. When designing for screen, avoid half pixels as possible. By using whole pixels, UI elements will align to precise pixel boundaries and look crisper.
  3. The numbers are easy to remember
  4. Finally, its Kobe's jersey number #ripkobe #MåmbaForever

Why 8 pixels?

Sizing
The height and width of Ul elements should be measured in increments of the base unit (ie. 8, 16, 24) when possible. They define a clear structure, hierarchy and rhythm in your design. This can be applied to line height, buttons and input forms.

Padding
The space between Ul elements should be measured in increments of the base unit (ie. 8, 16, 24) when possible. Consistent padding improves readability and aesthetically pleasing.

EXAMPLE 1 Use increments of 8 to size and space out the elements on a page. To me this means that any defined height or width, margin or padding will be an increment of 8.

EXAMPLE 2 The result of using an 8px grid

EXAMPLE 3
For typography, one proven scale is used with font sizes that you will want to stick with forever. The scale is 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, and 72 pixels.

More booklets by Fullstack HQ

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets