Our team is experimenting with adjusting the spacing scale to tighten things up a bit. We're leaving 1-4 alone, but somewhat reducing 5-9.
This generally works well - everything "just works".
However, checkbox and radio item icons unexpectedly break. They rely on using two values from the spacing scale and their specific ratios - if you adjust the scale, they break and the icons are no longer visually centred / correct, or are oddly proportioned.
Checkbox icon misplaced
Selected radio too large
My reckon is that these shouldn't use the scale at all - they should be hardcoded / static values. Or if they do, they should use just one value from the scale and do everything proportionally from that, rather than two values.
We don't actually want to touch the sizing of these anyway - they already support two sizes, and have certain sizes set to meet WCAG requirements. Which feels all the more reason not to have them use the scale at all.
Our team is experimenting with adjusting the spacing scale to tighten things up a bit. We're leaving 1-4 alone, but somewhat reducing 5-9.
This generally works well - everything "just works".
However, checkbox and radio item icons unexpectedly break. They rely on using two values from the spacing scale and their specific ratios - if you adjust the scale, they break and the icons are no longer visually centred / correct, or are oddly proportioned.
Checkbox icon misplaced
Selected radio too large
My reckon is that these shouldn't use the scale at all - they should be hardcoded / static values. Or if they do, they should use just one value from the scale and do everything proportionally from that, rather than two values.
We don't actually want to touch the sizing of these anyway - they already support two sizes, and have certain sizes set to meet WCAG requirements. Which feels all the more reason not to have them use the scale at all.