Font-To-Width FTW

Font-To-Width if a small Javascript routine which fits text to the width of an element using multiple font styles of different widths.

© 2014–2018 Chris Lewis and Nick Sherman

Freely made available under the MIT license: http://opensource.org/licenses/MIT

Usage

<div class="ftw">Text To Fit</div>
<script> 
	new FontToWidth({
		fonts: [
			'Font Family Name String',
			{ fontFamily: 'Complete CSS Spec', fontWeight: 'normal', fontStyle: 'italic' },
			…
		];
		elements: ".ftw, .css-selector-or-jQuery-object"
	}); 
</script>

Notes

• Multiple FontToWidth instances can be created using different font lists and elements.
• Elements can be anything that is display:block or inline-block
• If no fonts are specified, behavior reverts to a simple scale-to-width system

Options

All options are optional.

Name	Default	Description
fonts		A list of font-family names or sets of CSS style parameters. If empty, existing fonts are scaled to fit
variableFont		A font object as in fonts, plus optional axis, min, max properties
elements	".ftw, .font-to-width, .fonttowidth"	A CSS selector or jQuery object specifying which elements should apply FTW
minLetterSpace	-0.04	A very small, probably negative number indicating degree of allowed tightening
maxLetterSpace	none	Maximum allowed letterspace stretching when font size maxes out
minFontSize	1.0	Allow scaling of font-size to this ratio of original
maxFontSize	1.0	Allow scaling of font-size to this ratio of original
preferredFit	"tight"	Whether to prefer "tight" or "loose" letterspacing
preferredSize	"large"	Whether to prefer "large" or "small" font-size

History

• 2018-10-04 Add maxLetterSpace option

• 2018-02-05 Remove jQuery dependency; better font load detection; add support for variable fonts

• 2015-03-04 Added no-fonts scale-to-width behavior

• 2015-02-28

  • Added ability to specify complete CSS spec for each font style
  • Added min/maxFontSize, preferredFit/Size options
  • Added demo.html for usage hints
  • Support hyphenated-type or camelCaseType options
  • Bugfixes and safer coding style

• 2014-03-31 Initial release

  • Only option is 'min-letter-space'
  • Fitting errs on the side of tight spacing