Skip to content

Instantly share code, notes, and snippets.

@glenpadua
Last active March 25, 2022 13:10
Show Gist options
  • Save glenpadua/ff6092950ee477d45083cbc0c5768ebc to your computer and use it in GitHub Desktop.
Save glenpadua/ff6092950ee477d45083cbc0c5768ebc to your computer and use it in GitHub Desktop.
Fluid typography helper mixin for use with styled components
/**
* @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)}));
`
}
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;
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment