taivare/Mixing vw and vh in font-size.markdown

## index.html
<p>Using calc in combination with vw and vh units for font-size to create text that always fills the viewport. No matter what ratio.</p>

## Mixing vw and vh in font-size.markdown

      
    Raw
  

              Mixing vw and vh in font-size.markdown
            
          
    Mixing vw and vh in font-size

To create text that always fill the viewport, no matter what ratio. This is just a concept and not very well tested ;-)
A Pen by CrocoDillon on CodePen.
License.

  
## style.css
body {
  color: slategray;
  font-family: 'Abril Fatface';
  line-height: 1.2;
}

p {
  margin: 0;
  font-size: calc(4vw + 4vh + 2vmin);
  /* See:
   * http://codepen.io/CrocoDillon/pen/jgmwt
   * For some math behind this
   */
}

## styles
<link href="//fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet" />
	body {
	color: slategray;
	font-family: 'Abril Fatface';
	line-height: 1.2;
	}

	p {
	margin: 0;
	font-size: calc(4vw + 4vh + 2vmin);
	/* See:
	* http://codepen.io/CrocoDillon/pen/jgmwt
	* For some math behind this
	*/
	}