typography.js

const calc = (minWidth, maxWidth, minFontSize, maxFontSize) =>
  `calc(${minFontSize}px + (${maxFontSize} - ${minFontSize}) * ((100vw - ${minWidth}px) / (${maxWidth} - ${minWidth})))`;

const fluidType = (minWidth, maxWidth, minFontSize, maxFontSize) => ({
  fontSize: minFontSize,
  [`@media screen and (min-width: ${minWidth}px)`]: {
    fontSize: calc(minWidth, maxWidth, minFontSize, maxFontSize),
  },

  [`@media screen and (min-width: ${maxWidth}px)`]: {
    fontSize: maxFontSize,
  },
});

export default class FluidHeading extends PureComponent {
  template(css) {
    const { children, ...props } = this.props;

    return (
      <Text color={ Colors.BLUE } className={ css('root') } tag="h1" { ...props } caps>
        { children }
      </Text>
    );
  }

  styles() {
    // Everything here is pixel based
    const minWidth = 320;
    const maxWidth = 1440;
    const minFontSize = 28;
    const maxFontSize = 80;

    return {
      root: {
        fontFamily: [fontSansSerif],
        ...fluidType(minWidth, maxWidth, minFontSize, maxFontSize),
      },
    };
  }
}