Text box cropping

by phloe

HTML

<input type="range" min="12" value="48" max="200"/>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="gibson">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="gibsonSemiBold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="gibsonBold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="gibsonLight">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="arial">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="verdana">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="georgia">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="times">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

SCSS

@font-face{font-family:"gibsonLight";src:url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.eot");src:url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.eot?#iefix") format("embedded-opentype"),url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.woff2") format("woff2"),url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.woff") format("woff"),url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.ttf") format("truetype"),url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.svg") format("svg");font-weight:normal}@font-face{font-family:"gibsonRegular";src:url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.eot");src:url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.eot?#iefix") format("embedded-opentype"),url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.woff2") format("woff2"),url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.woff") format("woff"),url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.ttf") format("truetype"),url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.svg") format("svg");font-weight:normal}@font-face{font-family:"gibsonSemiBold";src:url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.eot");src:url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.eot?#iefix") format("embedded-opentype"),url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.woff2") format("woff2"),url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.woff") format("woff"),url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.ttf") format("truetype"),url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.svg")...

JavaScript

document.querySelector("input").oninput = function () {
	text.style.fontSize = this.value + "px";
};