Line-height is extremely large on a few elements after responsive typography update

When we merged this PR, we ended up with a couple of elements that suddenly had very large line-heights. See here and here for screenshots.

In looking at these examples, it looks like the “extra tall” components are all specifying a lineHeight={18} prop, like this:

  <Serif mb={1} size="3t" color="black100" lineHeight={18}>
    Country
  </Serif>

I suspect that this broke when we updated the styled-system dependency - we noticed similar issues in the development of #1531, where it seemed to switch from a default of pixels to a default of ems.

We should either add back support for lineHeight={18}, or update these elements to specify lineHeight="18px".

[pepopowitz]

In these examples, line-height is being used to adjust the height of the label, to match the line-height set by the other input fields. They are different, because…

Most input fields on the forms use the <Input> component - which uses the Garamond s17 font specified in src/assets/fonts.tsx for the label. That gives them a line height of 1.1em.

These one-off fields render a <Serif> component for the label. They specify size="3t", which gives them a matching font-size, but a non-matching line-height (20px instead of 18px).

I’m going to change these three examples to specify line-height of “1.1em”, to match the <Input> component labels more precisely.

[zephraph]

This was fixed a while back. Gonna close the issue.