Responsive Capsize

> Responsive Capsize generates Capsize text styles for multiple breakpoints using responsive arrays.

Install

``sh
npm install responsive-capsize
`

Usage

Use the Capsize website to find the fontMetrics values for the specified font.

Responsive Capsize accepts responsive arrays for the following input values:

- capHeight or fontSize for defining the size of text
- lineGap or leading for specifying line height. If you pass neither, the text will follow the default spacing of the specified font eg. line-height: normal

See the Capsize documentation for further information.

`js
import responsiveCapsize from 'responsive-capsize'

const fontMetrics = {
capHeight: 1456,
ascent: 1900,
descent: -500,
lineGap: 0,
unitsPerEm: 2048
}

const capsizedTextStyles = responsiveCapsize({
fontMetrics,
capHeight: [24, 48],
lineGap: [12, 24]
})
`

Examples

The output styles can be used in the following ways.

Included in a Theme UI styles object:

`js
export default {
styles: {
h1: {
fontFamily: 'heading',
fontWeight: 'heading',
...capsizedTextStyles
}
}
}
`

Added to an element using Theme UI's sx prop:

`js
export default props => (
sx={{
...capsizedTextStyles
}}
>
Responsive Heading

)
`

Added to an element using Styled System's css prop:

`js
export default props =>
css={css({
...capsizedTextStyles
}}
>
Responsive Heading

)
``