Demo of scaling text with minimums

by ian_smithz

HTML

<div class="fontSizeXXSmallScaled">Some text</div>
<div class="fontSizeXSmallScaled">Some text</div>
<div class="fontSizeSmallScaled">Some text</div>
<div class="fontSizeMediumScaled">Some text</div>
<div class="fontSizeLargeScaled">Some text</div>
<div class="fontSizeXLargeScaled">Some text</div>
<div class="fontSizeXXLargeScaled">Some text</div>

CSS

.fontSizeXXSmallScaled { font-size:calc(.8em + 1vw); }
.fontSizeXSmallScaled { font-size:calc(.8em + 1.2vw); }
.fontSizeSmallScaled { font-size:calc(.9em + 1.4vw); }
.fontSizeMediumScaled { font-size:calc(1em + 1.5vw); }
.fontSizeLargeScaled { font-size:calc(1.25em + 1.6vw); }
.fontSizeXLargeScaled { font-size:calc(1.5em + 1.7vw); }
.fontSizeXXLargeScaled { font-size:calc(1.75em + 1.8vw); }