Font-to-Width (Vanilla FTW!)

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

Originally by Chris Lewis & Nick Sherman, this version has been modified by Kenneth Ormandy to remove the dependency on jQuery.

Install

To install the module through npm, run the following command:

npm install --save @kennethormandy/font-to-width

Then, within your project, require Font to Width:

var FontToWidth = require('@kennethormandy/font-to-width')

Or, if you’re using ES6/2015/whatever:

import FontToWidth from '@kennethormandy/font-to-width'
 
var els = document.querySelectorAll('.js-ftw')
 
var ftw = new FontToWidth({
  elements: els,
  fonts: [
    { fontFamily: 'Hardware Regular' },
    { fontFamily: 'Hardware Condensed' },
    { fontFamily: 'Hardware Compressed' }
  ]
})

Alternatively, you can include the font-to-width file in your build process manually, or even reference the file directly:

<script src="https://cdn.rawgit.com/kennethormandy/font-to-width/master/font-to-width.js"></script>

Note you’ll probably want to replace master with a specific version number if you take this approach

Usage

<div class="js-ftw">Text To Fit</div>

<script>
new FontToWidth({
  fonts: [
    'Font Family Name String',
    {
      fontFamily: 'Complete CSS Spec',
      fontWeight: 'normal',
      fontStyle: 'italic'
    },
    // … 
  ],
  elements: '.js-ftw' // CSS selector or node list
})
</script> 

Notes

• jQuery is required and must be present in the page before any FTW instances are created The jQuery dependency has been removed from this version.
• 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, behaviour 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
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
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

• 2016-05-29

  • Adds option to pass node list to elements

• 2016-05-28

  • Removed jQuery dependency
  • Exported for module systems (Browserify, Webpack, etc.)

• 2015-03-04

  • Added no-fonts scale-to-width behaviour

• 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

License

The MIT License (MIT)

Copyright © 2016–2017 Kenneth Ormandy
Copyright © 2014–2015 Chris Lewis and Nick Sherman