// http://fittextjs.com by Dave Rupert (function(){ var css = function (el, prop) { return window.getComputedStyle ? getComputedStyle(el).getPropertyValue(prop) : el.currentStyle[prop]; }; var addEvent = function (el, type, fn) { if (el.addEventListener) el.addEventListener(type, fn, false); else el.attachEvent('on'+type, fn); }; window.fitText = function (el, kompressor) { var settings = { 'minFontSize' : -1/0, 'maxFontSize' : 1/0 }; var fit = function (el) { var compressor = kompressor || 1; var resizer = function () { el.style.fontSize = Math.max(Math.min(el.clientWidth / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px'; // px :P }; // Call once to set. resizer(); // Bind events // If you have any js library which support Events, replace this part // and remove addEvent function (or use original jQuery version) addEvent(window, 'resize', resizer); }; if (el.length) for(var i=0; i<el.length; i++) fit(el[i]); else fit(el); // return set of elements return el; }; })(); fitText(document.getElementById('rwdfonts5'), 1.2) // the extra part to display the viewport var gogogo = function() { document.getElementById('viewport').innerHTML = window.innerWidth; } gogogo(); window.onresize=function(){ gogogo(); };
<!-- http://www.w3.org/TR/css3-values/#relative-lengths vm, vmax, vim etc. are measure units. Just like em, px, etc. You can use them on anything, not just 'font-size'. --> <!-- The em unit: Is relative to the 'font-size' of the parent, which causes the "Compounding issue". The rem unit: root(em) is the 'font-size' on the root element. --> <article class="container"> <p>Sizing with 'pt':</p> <h1 id="rwdfonts0">Lorem lorem</h1> <p>Sizing with 'px':</p> <h1 id="rwdfonts1">Lorem lorem</h1> <p>Sizing with '%':</p> <h1 id="rwdfonts2">Lorem lorem</h1> <p>Sizing with 'em' (Compounding issues: adopt the font-size of the child, not the parent element):</p> <h1 id="rwdfonts3">Lorem lorem</h1> <p>Sizing with 'rem' (root em, base their calculations on the font-size declared on the root body element):</p> <h1 id="rwdfonts4">Lorem lorem</h1> <p>Sizing automaticly using 'fittext.js':</p> <h1 id="rwdfonts5">Lorem lorem</h1> <p>Sizing with 'vm': 1/100 viewport: <a id="viewport"></a>px. (Calculated on load time. IE10+. iOS6+)</p> <h1 id="rwdfonts6">Lorem lorem</h1> <p>Sizing with 'vmax': 1% of viewport's larger</p> <h1 id="rwdfonts6">Lorem lorem</h1> <!-- 1vw = 1% of the viewport width calculated on load time, 1vh = 1% of the viewport height calculated on load time A full vw web example (ccs-tricks): http://css-tricks.com/examples/ViewportTypography/ --> </article> <!-- Feature detectiong: You could run the Modernizr to test the feature and load up FitText.js if no support is detected. Modernizr 2.6.2 supports viewport unit tests: vhunit, vwunit, vmaxunit, vminunit detection http://modernizr.com/news/modernizr-262/ -->
/* setting our minimum to 18pt */ #rwdfonts0 { font-size: 18pt; } #rwdfonts1 { font-size: 24px; } #rwdfonts2 { font-size: 150%; } #rwdfonts3 { font-size: 24px; font-size: 1.55em; } #rwdfonts4 { font-size: 24px; font-size: 1.55em; } #rwdfonts5 { /* using fittext.js to setting the values */ } #rwdfonts6 { font-size: 24px; font-size: 8.325vw; } #rwdfonts7 { font-size: 24px; font-size: 8.325vw; } body { background: rgb(201, 148, 53); background: rgba(201, 148, 53, 0.82);; color: #fff; font: 100% sans-serif; } h1 { background: #fff; text-align: center; color: tan; font: "Impact"; display: inline-block; text-shadow:#253e45 -1px 1px 0, red -2px 2px 0, blue -3px 3px 0, green -4px 4px 0; width: 100%; margin: 5% auto 5%; height: 65px; -moz-border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px; } .container { margin: 1rem ; } .container p { font-size: 1.95vmax; }