Dynamic Text Resizing for Responsive Typography – Fit Text

Fit Text is a small JavaScript responsive text library that dynamically adjusts text size to fit within a specific container. It allows text to be resized to a precise width or height, fitted to a single line, and even trimmed when necessary.

The library measures the target element’s dimensions and iteratively reduces font size until text fits. If clipping is enabled, it shortens the text and appends a clip string, and returns the result.

Use Cases:

• Responsive headings that maintain proportions across screen sizes
• Fixed-width containers with variable content lengths
• Single-line text displays with automatic overflow handling
• Dynamic text blocks that respect both width and height boundaries

How to use it:

1. Install the Fit Text package with NPM.

# NPM
$ npm install @activetheory/fit-text

2. Import it into your JavaScript file:

import fitText from '@activetheory/fit-text';
// OR
import fitText from './src/index.js';

3. To fit text within an element:

<div class="el">Hello World!</div>

document.addEventListener('DOMContentLoaded', () => {
  const el = document.querySelector('.el');
  fitText({
    el,
  });
})

4. To fit text within a container:

<div class="box">
  <div class="el">Hello, world!</div>
</div>

document.addEventListener('DOMContentLoaded', () => {
  const el = document.querySelector('.el');
  const box = document.querySelector('.box');
  fitText({
    el,
    box,
  });
})

5. Customize the text fitting behavior with the following configuration options:

• el: The HTML element containing the text you want to fit. (required)
• box: The container element to fit the text inside of. (optional)
• afterFit: A function that executes after the text is fit, receiving the fit result. (optional)
• singleLine: A boolean to force the text to fit into a single line. (optional)
• clipOnly: A boolean that only clips the text instead of adjusting font size. (optional)
• boxMultiplier: An array of two numbers for width and height multipliers of the box. (optional)
• maxWidth: A maximum width to constrain the text to, can be a number or function. (optional)
• maxHeight: A maximum height to constrain the text to, can be a number or function. (optional)
• minFontSize: The minimum font size to use, can be a number or a function. (optional)
• debug: A boolean to enable console logging. (optional)
• flip: A boolean that flips the axes of the container. (optional)
• clip: The string to append when clipping the text. (optional)
• htmlClip: An HTML string to append when clipping the text. (optional)
• maxWidthLimit: The maximum width limit. (optional)
• maxHeightLimit: The maximum height limit. (optional)

fitText({
  el,
  box,
  maxWidth = null,
  maxHeight = null,
  minFontSize = 10,
  debug = false,
  flip = false,
  clipOnly = false,
  singleLine = false,
  boxWidthOnly = false,
  boxMultiplier = [1, 1],
  clip = '...',
  htmlClip = null,
  afterFit = null,
  maxWidthLimit = 999999,
  maxHeightLimit = 999999,
})