So, a checkbox component consist of two parts: the box ☑️ and a label next to it. I overwrite the styling of checkboxes, which means I need to draw a custom ☑️.
However, the problem is that the current line height offsets the positions. If the label has a line height of 1.5, it will be taller than with line height 1 and the text will be a bit lower inside of the line. And because of this phenomenon, I also have to adjust the vertical position of the box to make it line up with the text. Otherwise you might get:
☑️
the labelOne solution could be to give the check box a fixed line height. The label would always have the same height, and that means I can also give the box the same fixed position.
But then it will look weird when placed into the page itself, because the text around the checkbox may have a different line height than the fixed line height I assigned to the check box. It would look like this:
some text:
☑️the label