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.
| <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> |
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.
| 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 | |
| */ | |
| } |
| <link href="//fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet" /> |