Why does spacing adhere to a 7px grid. What is the logic?

[thinksitdo]

Hi,

I'm evaluating PrimeNG (and Figma UI kit) for a web app we are developing. It's the front runner at the moment. One hurdle for me is that the grid scale seems to be based on 7px? I'm assuming this is a direct reflection of the code? Can anyone offer any insight as to why this is the case? it seem utterly wrong to not adhere to a standard 8px/4px standard. And what is the logic of having 17.5 as a standard padding as opposed to 16? What am I missing?

[thinksitdo]

Okay, my bad. PrimeNG uses 14px font baseline by default. However, primeflex (and I think primeblocks) uses 16px in its examples. Would be useful for these to be aligned.

[onursenture]

For years, we've used 14 as the base font size in our UI libraries and have followed the same approach in every design we made in Figma.

However, based on recent feedback, we have decided to transition to the 16 px system in our Figma designs. This will be a beneficial change for everyone, especially given that Figma rounds up fractions.

Thank you for your feedback.

[megaroeny]

Excellent news. I was just about to post about this issue. I was beginning to wonder I was crazy, then I realized the root-level font-size was indeed 14px, which makes sense as to why the calculated padding, margins, and more become very odd numbers that cause sub-pixeling. To clarify, this happens both in Figma and code.

For example, the button padding ends up with sub-pixels:

This not only causes odd numbers out of inconvenience but also can cause anti-aliasing issues for typography and iconography.

I'm probably preaching to the choir here, but you can have the root-level font size = 16px, but then you can define the default body typography style to still be 14px, apply it to button components, etc. CSS variables should make that pretty simple to do, but I know it will cause a large, sweeping change.

Thanks for taking the time to consider and adhere to newer trends/standards.

[thinksitdo]

Thanks for the quick response and history. I changed to 16 in token studio and all the padding values changed to ones that didn’t freak me out.

[cagataycivici]

We use 14px in our websites, you can use any value, Prime UI libraries do not enforce something. Components use rem values so they scale according to root value. New UI Kit update will use 16px by default though.

[geiregjo]

@cagataycivici Can you give us some more info about this new UI Kit update?
When is it coming? What's the reference on the roadmap?
What's the impact for existing projects when you switch from 14px to 16px grid?