Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

darcypaterson commented Jul 14, 2016

Groovy - thanks!

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