Skip to content

Instantly share code, notes, and snippets.

@kosciolek
Last active July 14, 2021 19:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kosciolek/e637814e003728847b429be268d3ea29 to your computer and use it in GitHub Desktop.
Save kosciolek/e637814e003728847b429be268d3ea29 to your computer and use it in GitHub Desktop.
fluid typography 1440px+
html {
font-size: max(8px, calc(8 / 1440 * 100vw));
font-family: 'Poppins', sans-serif;
line-height: 1;
letter-spacing: 0.02rem;
}
body {
font-size: max(18px, calc(18 / 1440 * 100vw));
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
const useConversion = () => {
const getRatio = () => Math.max(8, (8 / 1440) * window.innerWidth);
const pxToRem = useCallback((px: number) => px / getRatio(), []);
const remToPx = useCallback((px: number) => px * getRatio(), []);
return { pxToRem, remToPx };
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment