Responsive typography + line height?

[DanielPintilei]

Would it be a good idea?
Something like:

html {
    font-size: responsive 12px/1.4 21px/1.8;
}

or

html {
    line-height: responsive 1.4 1.8;
}

Unitless line height is fine, but if you want to set a specific line height for a specific font range, you have to do it without Rucksack, the result being unnecessary multiple media queries.
I guess it wouldn't work just by adding the line height along font size, since that would result in line heights like 1.4654643?

[madeleineostoja]

How you'd do this is have Rucksack parse font: declarations, where you can define font-size/line-height shorthand.

Though I'm not sure what you're trying to achieve. By definition unitless line height is 'responsive'. Are there certain points where you want a different line height unit? How would rucksack know this?

[DanielPintilei]

Yes, I was talking about

certain points where you want a different line height unit

That's why I said that unitless line height works fine. But if you want to get artsy with the line height, rucksack can't help you.
like when your
font-size is 12px you want your line height to be 1.4
and when it's 21px, line height 1.8

How would rucksack know this?

By using something like

html {
font: responsive 12px/1.4 21px/1.8;
}

or

html {
line-height: responsive 1.4 1.8;

}

I guess

[madeleineostoja]

Seems the font shorthand processing wouldn't work because of this bug in Firefox. So the only option would be to add a new feature to postcss-responsive-type to parse line-height properties with the same logic. I probably don't have the time for this right now, and not sure if there's enough demand for it at the moment. But would probably welcome a PR if anyone's keen.

[madeleineostoja]

This feature has been added upstream in postcss-responsive-type. Just needs documentation.

[yocontra]

Any chance somebody can update the postcss-responsive-type dependency so we can start using this feature?

[madeleineostoja]

@contra sorry missed this, will bump it now and release a new version

[kodekoder]

So, is there a fix or not? I have issue with Firefox - Responsive doesn't work like it should!

[madeleineostoja]

This was released in the linked commit, you can use responsive line heights with new line height declarations