Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save tannerhodges/4dcef55c6d544708faf5 to your computer and use it in GitHub Desktop.
Save tannerhodges/4dcef55c6d544708faf5 to your computer and use it in GitHub Desktop.
Font size based on viewport size
/* base font size + viewport height + viewport width */
h1 {
font-size: calc(2rem + 4vh + 4vw);
}
/* responsive font-size responsive */
html {
font-size: calc(100% + .2vh + .2vw);
}
/* create text that always fills the viewport no matter what ratio */
p {
font-size: calc(4vw + 4vh + 2vmin);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment