Responsive Typo

Font-size based on your screen-size... In pure css please. Here's a way to do it: put a base font-size in a calc-function together with a viewport height and a viewport width value. Magic. Source


h1 {
    font-size: calc(2rem + 4vh + 4vw);
}

Or make your base font-size responsive...


html {
    font-size: calc(100% + .2vh + .2vw);
}

Or create text that always fills the viewport. No matter what ratio. Source


p {
    font-size: calc(4vw + 4vh + 2vmin);
}

Demo:

For a little demo of this awesome sause:
Small Demo - Responsive Base Typo