Skip to content

Instantly share code, notes, and snippets.

@nilshendriks
Created February 15, 2023 11:13
Show Gist options
  • Save nilshendriks/9dcbbfdbcb94dd62be5850f949ab221b to your computer and use it in GitHub Desktop.
Save nilshendriks/9dcbbfdbcb94dd62be5850f949ab221b to your computer and use it in GitHub Desktop.
setting a font-size in 2023
/*
minimum: 12
maximum: 14
scales between 12-14 until 992 breakpoint
1.41129032vw = 14/992*100 = max / breakpoint * 100
*/
/*font-size: max(min(14px, 1.41129032vw), 12px);*/
--size-font-minimum: calc(var(--size-font-xxsmall) / var(--size-font-root) * 1rem);
--size-font-maximum: calc(var(--size-font-small) / var(--size-font-root) * 1rem);
--breakpoint-max-px: 992;
--breakpoint-max: calc(var(--size-font-small) / var(--breakpoint-max-px) * 100 * 1vw);
font-size: max(min(var(--size-font-maximum), var(--breakpoint-max)), var(--size-font-minimum));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment