Makes font-size of children respond to the container's width, complete with HTML, JS, and CSS

font-responsive.css

/**
 * Font responsive CSS, compiled. Open-source for everyone.
 * @author Rico Tiongson
 */

.font-responsive {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  text-align: center;
  font-size: 10px; /* use small initial font size for accurate scaling in JS */
  overflow: hidden;
  max-width: 400px; /* avoid really big fonts */
}

.font-responsive > * {
  display: block;
  margin: auto;
  line-height: 0.8;
  word-break: keep-all;
  white-space: nowrap;
  -moz-transition: font-size 0.3s ease;
  -o-transition: font-size 0.3s ease;
  -webkit-transition: font-size 0.3s ease;
  transition: font-size 0.3s ease;
}

font-responsive.js

/**
 * Font responsive JavaScript, using jQuery. Open-source for everyone.
 * Makes font responsive to container width.
 * @since jQuery 1.12.0
 * @author Rico Tiongson
 */

$(function() {
	var fontResponsive = $('.font-responsive');
	var fonts = fontResponsive.children();
	var wind = $(window);
	// respond on resize
	function resizer() {
		fonts.each(function() {
			var text = $(this);
			var parent = text.parent();
			text.css('font-size', '');
			
			// get font properties
			var font = parseFloat(text.css('font-size'));
			var spacing = parseFloat(parent.css('letter-spacing'));
			var letters = text.html().length;
			var sumspace = spacing * letters;

			// get approx font width per letter
			// fwidth * letters + spacing * letters == text.width()
			var fwidth = (text.width() - sumspace) / letters;
			var ratio = fwidth / font;

			// transform font to fit parent width
			// In reality, grandparent's width is the one followed because
			// the parent is not trustworthy.
			// (k * font * ratio * letters + letters) == pw
			var mw = parent.css('max-width');
			var gw = parent.parent().width();
			var dw = (mw[mw.length-1] == '%' ? gw * parseFloat(mw) / 100.0 : parseFloat(mw));
			var pw = Math.min(dw, wind.width() * 0.85);
			var transform = (pw - sumspace) / (ratio * letters);

			// set new font to computed size
			text.css('font-size', transform + 'px');
		});
	}
	fontResponsive.resize(resizer); // hook whenever 'resize' is triggered
	wind.resize(resizer); // hook to window resize
	resizer(); // first kerning
	setTimeout(resizer, 400); // rekerning
});

font-responsive.scss

/**
 * Font responsive CSS, using SASS. Open-source for everyone.
 * @author Rico Tiongson
 */

@import 'compass/css3';

.font-responsive {
	@include display-flex;
	@include flex-flow(column nowrap);
	text-align: center;
	font-size: 10px; // use small initial font size for accurate scaling in JS
	overflow: hidden;
	max-width: 400px; // avoid really big fonts
	> * {
		display: block;
		margin: auto;
		line-height: 0.8;
		word-break: keep-all;
		white-space: nowrap;
		@include transition(font-size 0.3s ease);
	}
}

sample.html

<div class='font-responsive'>
  <span>Long text</span>
  <span>Short</span>
</div>