Define font CSS property about typography.js HOT 7 CLOSED

Fixed in #88

from typography.js.

I didn't get around to implementing this. Now tests are in I can have another go?

from typography.js.

Oh my bad — I thought this had been finished for some reason and we'd just forgotten to close it.

from typography.js.

Looking at this again it could either be

styles = setStyles(styles, 'body', {
  font: `${options.baseFontSize}/${options.baseLineHeight} ${options.bodyFontFamily.join(',')}`,
})

or

const { fontSize, lineHeight } = vr.establishBaseline()

styles = setStyles(styles, 'body', {
  font: `${fontSize}/${lineHeight} ${options.bodyFontFamily.join(',')}`,
})

Either way both end up overriding the font-size and line-height on the html element. So it might be worth defining it all on the html element? I'm not sure of the consequence of doing it that way

from typography.js.

I define font-size on the html element so that we can use REM everywhere.

What you're trying to solve is that the plugin needs font defined so it can override it? If so, yeah, just combine the font-size/line-height declarations on html into one on font and I think we're fine then.

from typography.js.

https://css-tricks.com/html-vs-body-in-css/

from typography.js.

Awesome, that's exactly what I was looking for

from typography.js.