8pt grid vs 10pt grid<>Design Grid Layout

I work with 8pt grid system in my designs, and Internet resources have tons of posts on how good it is and why. What are the advantages of a 10pt grid? In which cases can we use it? Why is it not popular as popular as the 8pt grid?


I never heard or read that. IMHO it’s the opposite.

Both google and apple recommend the 8pt system for a reason. It scales better and offers more flexibility.

I’d say the 10pt-grid is for those who don’t know how to asjust the default nudge values :smiling_imp:

Edit: Sorry, I misread the first sentence but it doesn’t effect my opinion about the whole topic :slight_smile:

1 Like

She is saying that 8pt has tons of resources on how and why it’s good. Not 10pt.
I guess the question comes from the fact that Figma by default uses 10pt.

I’ve been wondering the same about a similar subject but haven’t looked much into it.
After you mentioned that it scaled better, it made much more sense after thinking about it for a little bit.

So, @Maria_Donchenko, to demonstrate how 8pt systems scale better than 10pt, let’s do some math!

Let’s say we have a line of pixels. If we want to make the line twice as long then we can simply double each pixel, and it will look good. This we can do for all lengths of a line, no problem. It doesn’t matter if the length is an even or odd number. However, if we were to halve this line, it’s another story. When halving we do the opposite of doubling, i.e. for every two pixels, we keep one. Halving odd numbers gives us decimals, which means we’ve got half pixels, which are really bad. But halving an even number can create roadblocks. Like 90 / 2 = 45. 45 is an odd number which means if you halve that again you get decimals, and decimals are bad.

By sizing objects by adding / subtracting by 8 you guarantee that whatever you end up with will be divisible by 2. At least for any size that would be usable in UI design.

1 Like

Apple are the same guys who dig for 8px grid, while they “suggest” you to use 17pt text, and ultra random heigts like 41px on bottom nav and a lot of stuff like that…

Everything very 8grid friendly

1 Like

This topic was automatically closed after 30 days. New replies are no longer allowed.