alexgetty
commented
3 years ago @phess101 and I discussed this and thought that this issue would benefit from some more concrete examples of how relative sizing works on a larger scale project. We are planning to use relative units for our upcoming client project and will share examples of that in action once we've completed the work. That can hopefully initiate some discussion around this.
By defining font-sizes, margins, padding, etc as REMs and EMs instead of pixels, we can create a much more responsive system by default and makes it easier to proportionately size items relative to their context.
For example, sizing an icon in a button to 1em height and width means it automatically scales up and down based on the size of the button's text and doesn't need to be explicitly defined for each variation. Also, by strategically using REM vs EMs, we can make it really easy to proportionally scale up or down all pieces of a children component, making them much more flexible automatically.
This proposal would include defining a base unit size at the body level (eg 16px), then replacing every instance of px units throughout the rest of the stylesheets to use REMs or EMs according to that base size.