Skip to content

Instantly share code, notes, and snippets.

@iksi
Created January 14, 2016 11:45
Show Gist options
  • Save iksi/52fe71938dfa250621f0 to your computer and use it in GitHub Desktop.
Save iksi/52fe71938dfa250621f0 to your computer and use it in GitHub Desktop.
Fluid typography between a min & max font-size and molten leading
/**
* Fluid typography between a min & max font-size and molten leading
* calc(minSize + (maxSize - minSize) * ((100vw - minPort) / (maxPort - minPort)));
*/
:root {
font-size: 100%;
}
body {
font-size: 1em;
line-height: 1.4em;
}
@media screen and (min-width: 20em) {
body {
font-size: calc(1em + (1.3125 - 1) * ((100vw - 20em) / (80 - 20)));
line-height: calc(1.4em + (1.8 - 1.4) * ((100vw - 20em) / (80 - 20)));
}
}
@media (min-width: 80em) {
body {
font-size: 1.3125em;
line-height: 1.8em;
}
}
@darcypaterson
Copy link

Groovy - thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment