FlexText - Responsive font size based on container DIV size

flextext-responsive-font-size-based-on-container-div-size.markdown

FlexText - Responsive font size based on container DIV size

A Pen by A973C on CodePen.

License.

index.html

<div class="flexFont">
    <h2>This is FlexText:<br>Autoscaling by DIV width</h2>
    <div class='smaller'>... scaled by 0.7em</div>
</div>

<div class="flexFont">
    <p>Font size scales parallel to the container width.<br>Change window size to test.<p>
</div>

script.js

flexFont = function () {
    var divs = document.getElementsByClassName("flexFont");
    for(var i = 0; i < divs.length; i++) {
        var relFontsize = divs[i].offsetWidth*0.05;
        divs[i].style.fontSize = relFontsize+'px';
    }
};

window.onload = function(event) {
    flexFont();
};
window.onresize = function(event) {
    flexFont();
};

style.css

@font-face {
  font-family: "San Francisco";
  font-weight: 200;
  src: url("//applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2");
}

body, html {
    height:100%;
    width:100%;
    font-family: "San Francisco";
    font-weight: 200
}
.flexFont {
    height:8em;
    width:75%;
    background-color:#eeeeee;
    padding:1%;
    margin: 10px;
}

.smaller {
    font-size: 0.7em;
    background-color:red;
    width: 10em;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100" rel="stylesheet" />