Rebass: How to manage line-height per font-size?

[karland]

I have not found a means to manage line-height per font-size to achieve a vertical rhyhtm. Have I overlooked something?

[jxnblk]

I wouldn't recommend changing line-height per font size, but if you'd like to do something like that, you can always extend the Rebass components.

const LooseText = styled(Text)`
  line-height: 1.75;
`

[karland]

Thanks for the answer. Just for curiosity: why are you not recommending changing line-heights? At the moment line-height is not set so it inherits the global value. I think line-heights are essential for vertical rhythms (example at Grid Lovers or described at Compose to a Vertical Rhythm). You are already suggesting a Modular Scale as default for the fontsize. Of course one could always extend components, but the beauty of Rebass is that it provides the essentials out of the box.

Would you agree to something like <Box lineHeight={[1, 2, 3]} /> prop if I provided a PR including docs to styled-systems?

[selrond]

@jxnblk or what about making Rebass play nice with typography.js?
I agree with @karland that having line-height set in stone is suboptimal, although it's modifiable on individual component's basis.
Can we do something to improve it? How do you see it?

[smarchetti]

FWIW, my solution was to create an array called lineHeights in the theme and then extend the Text component.

const theme = {
  lineHeights: [
    16,
    17,
    19,
    22
  ],
  fontSizes: [
    12,
    13,
    14,
    16
  ]
}

import {Text as BaseText} from 'rebass'
import styled from 'styled-components'

const Text = styled(BaseText)`
  line-height: ${({theme, fontSize, f}) => (theme.lineHeights && theme.lineHeights[f]) && `${theme.lineHeights[f]}px`}
`

<Text f={0}>Hello World</Text>
// font-size: 12px; line-height: 16px

<Text f={1}>Hello World</Text>
// font-size: 13px; line-height: 17px

<Text f={2}>Hello World</Text>
// font-size: 14px; line-height: 19px

<Text f={3}>Hello World</Text>
// font-size: 16px; line-height: 22px

[karland]

@smarchetti Good idea and thanks for telling. I would love Rebass to offer line-heights but this is an excellent workaround.

[selrond]

@smarchetti that's exactly how I was doing it. The problem is, though, that you have to remember which component you've extended, and which one you use as-is; and import them correctly.
Thus it'd be really nice if Rebass provided something to manage line-height internally.

@jxnblk have you seen Kyle Mathews' Typography.js?
Having a global typography config for Rebass would be nice!

[smarchetti]

Another idea is to use styled-system's responsiveStyle method and mapping the theme lineHeights array to the fontSize property.

const lineHeight = responsiveStyle({ prop: 'fontSize', cssProperty: 'line-height', key: 'lineHeights' });