type-palette v1.0.0

type-palette

Handle type style baseline discrepancies with ease

What might a type palette look like?

{
  styles: {
    heading: {
      phone: {
        family: 'serif',
        defaultWeight: 600,
        fontSize: 22,
        lineHeight: 30,
        fontSmoothing: 'antialiased',
        letterSpacing: '0.5px'
      },
      default: {
        family: 'serif',
        defaultWeight: 600,
        fontSize: 20,
        lineHeight: 24,
        fontSmoothing: 'antialiased',
        letterSpacing: '0.5px'
      }
    }
  },
  spaces: {
    small: {
      phone: 13,
      default: 10
    }
  },
  thresholds: {
    phone: `@media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 568px)
      and (-webkit-min-device-pixel-ratio: 2)`
  },
  families: {
    serif: {
      fontStack: 'Georgia, sans-serif',
      baselineDiscrepency: .15,
      caplineDiscrepency: .15
    }
  }
}