Skip to content

Instantly share code, notes, and snippets.

@steveosoule
Forked from iksi/fluid-typography.css
Created June 7, 2016 16:30
Show Gist options
  • Save steveosoule/1ce3b9e9da74f88a801db3d8a13aab68 to your computer and use it in GitHub Desktop.
Save steveosoule/1ce3b9e9da74f88a801db3d8a13aab68 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment