Manohar · UX Designer

Dec 8, 2024 · 6 mins read

What is 8 point grid?

We probably heard about grid, with which we can make the content arrangement easier and better, what is 8pt grid? - this means when we use multiple of 8 (i.e: 8, 16 ,24, 32, 40, 48, 56, 64, 72….) as a metric to measure anything in our UI like for padding, margins, heights, spacing, etc.

But Why 8Pt grid?

For better understanding, first we need to know what is the pt? - Points are fixed size

A point (pt) is a measurement of space that is dependent on screen resolution. The simplest explanation is that at a ‘1x’ resolution (or @1x), 1pt = 1px

At a ‘2x’ resolution (@2x), 1pt = 4px because resolution doubles on both the X and Y axes making it 2px wide by 2px tall.

At a ‘3x’ resolution (@3x), 1pt = 9px (3px x 3px) and so on.

While designing we only consider 1X, so it can be easily extended to different resolutions, it is friendly to use even number pts as base grid because it can be easily converted to any required resolutions. not clear? ok let say

If we take 8pt and 7pt as reference - in 1.5X we can get pixel perfect design in 8pt grid not in 7pt [8 X 1.5 = 12, 7 X 1.5 = 10.5]. but will be true for all even number pts right, but why 8pt why cant be 6pt?

The simple reason being most of the device that we are having are divided by 8 and 10, Mostly 8. so it is advisable to use 8pt grid as a your grid system.

Advantages of using 8pt Grid?

1. Consistent UI: When all of your measurements follow the same rules, you automatically get a more consistent UI
2. Accommodate for multi Platform Design
3. Easier Decision making, and less time to thing about design choices.

Soft 8pt grid and hard 8pt grid

Now we understood about 8pt grid, let see what is soft and hard grid.

Hard grids snap content to a fixed grid, if it is 8pt all the content and spacing fall under strict under 8 multiples where as soft grid is more loose but still following 8multiples principle.For better understanding. see the below image.

I see this soft and hard grid are maintain ‘rhythm of design’, there is no right or wrong here. its a design choice ‘made by you’ or ‘as a design team need to make’