Responsive Capsize

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

Install

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.

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:

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

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

export default props => (
  <h1
    sx={{
      ...capsizedTextStyles
    }}
  >
    Responsive Heading
  </h1>
)

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

export default props =>
  <h1
    css={css({
      ...capsizedTextStyles
    }}
  >
    Responsive Heading
  </h1>
)