Example 1: responsive text css

/* Uses vh and vm with calc */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

@media screen and (min-width: 50em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

Example 2: css text to fit container

//The viewport-percentage lengths are relative to the size of the initial
//containing block. When the height or width of the initial containing block
//are changed, they are scaled accordingly.
//vw = (% of the viewport width). So using it will look like this:
p {
    font-size: 2.5vw;
}

Example 3: responsive text css

Responsive Text

Resize the browser window to see how the text size scales.