Fluid typography helper mixin for use with styled components

fluid-typography.js

/**
  * @desc Styled components mixin for fluid typography - https://www.youtube.com/watch?v=Wb5xDcUNq48
  * @param string minScreen - min screen width
  * @param string maxScreen - max screen width
  * @param string minFont - min font size
  * @param string maxFont - max font size
  * @return string - Template literal containing CSS
*/

export function fluidType (minScreen, maxScreen, minFont, maxFont) {
  return `
    font-size: calc(${minFont} + (${parseInt(maxFont) - parseInt(minFont)}) * (100vw - ${minScreen})/(${parseInt(maxScreen) - parseInt(minScreen)}));
  `
}

usage.js

import styled from 'styled-components'
import { fluidType } from './fluid-typography'

const Text = styled.p`
  ${props =>
    fluidType(
      props.theme.screen.mobile,
      props.theme.screen.desktop,
      '20px',
      '30px'
    )
};
  color: #4d4d4d;
`