Skip to content

Instantly share code, notes, and snippets.

@b4z81

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

Last active August 28, 2015 10:10
Show Gist options
  • Save b4z81/d642602046f7d9625bcf to your computer and use it in GitHub Desktop.
Save b4z81/d642602046f7d9625bcf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. b4z81 revised this gist Aug 28, 2015. No changes.
  2. b4z81 created this gist Aug 28, 2015.
    7 changes: 7 additions & 0 deletions Mixing vw and vh in font-size.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    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](http://codepen.io/CrocoDillon/pen/fBJxu) by [CrocoDillon](http://codepen.io/CrocoDillon) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/CrocoDillon/pen/fBJxu/license).
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <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>
    14 changes: 14 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    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
    */
    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="//fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet" />