[Support request] typography in padding margin

[Yogesh]

Hello team, I have a quick question which seems I am unable to solve myself, so I am asking here.
There are three option namely px, em, % in padding margin of a container/grid. Which one should I use for padding/margin of a container/grid? I know for responsiveness of text, I should use em or rem but which one I should use for padding/margin of a container/grid to increase/decrease height/width. Any documentation? Please solve this query. Thanks

[David]

Hi there,

for the majority of designs px pixels work best and are the simplest to use.

em are good if you want all spacing to be relative to the font-size. If thats a design system you like then it has its advantages, as you can simply define the body font size you want ( for desktop / tablet / mobile ) and the spacing will update to reflect that.

However – you must note that EMs are relative to the parent container. For example:
We set the Body font size to 16px – now 1EM = 16px across that page.
However, we add a Container Block to a page and we set is font-size to 20px. Now within that Container 1em = 20px.
So that is something to be mindful.

% are the only truly responsive unit here, ie. they are relative to the width of the screen. NOTE i say the width of the screen – thats right even Top and Bottom spacing would be calculated as a % of the screens width. I only use % in very rare circumstances and i would advise against using them as your go to spacing unit.

[Author]

Posts