Use relative line-height

[dashouse]

• Converts line heights to relative unit-less value

This needs to be tested on Samsung Internet browser to see if it fixes issue brought up in Accessibility audit.

[kr8n3r]

good stuff

[kr8n3r]

can you add a changelog entry please

[NickColley]

Can we please test this:

• across browsers/devices
• where possible where we have the font text size changed (e.g. samsung browser)

before merging since it's a pretty wide reaching change.

[hannalaakso]

I've tested this on the following and it looks good:

• Chrome (latest) on Mac
• Chrome (Samsung Android) with text resized to 200% in Chrome settings
• Samsung Internet (Samsung Android) with text resized to "Huge" in phone settings
• Firefox (latest) on Mac
• Safari 11.1 on Mac
• iOS 11 Safari with text resized to max size in phone settings
• IE8-11 on Windows

To test, I made the examples in examples/typography longer in order to check text wrapping.

Just need a changelog entry for the PR.

[NickColley]

Firefox before and after:

[NickColley]

Since we're not changing the public api, and we're fixing a behaviour I think this might be a 'fix' instead of a 'feature'

Done

[NickColley]

This is a great improvement 👏

[36degrees]

I do wonder if these would have been clearer if written as:

line-height: 55px / 53px;

Thoughts?

[36degrees]

Alternatively, we could have left these as pixel values in the font-map and calculated them in the typography-responsive mixin.

[dashouse]

I tried various ways of doing this calculation but kept running into issues...Should probably refactor so it's more "automatic" / less prone to typos. If we haven't released can we carry on?

[NickColley]

If we don't expect this to change often, might be worth doing less here?

[36degrees]

Yep, happy with this. I've been playing locally with this too – looks like our font-size and line-height are ending up as strings somehow, which means using them in calculations doesn't work. It'd be great to be able to define everything in pixels and everything 'just work', but happy with this for now 👍

[dashouse]

I kind of got something interesting when spitting it out as a string if we change the output to font: 16 / 20 and not define line height independently... but this didn't play very nicely with the other PR that needed two font-size declarations.