How to create responsive text in a div using the fitty.js library

How to create responsive text in a div using the fitty.js library

Sometimes we came up with a requirement where we have to scale up or down a text in a div or parent container. It is normally required when we are creating a responsive website. In this article, we will see how to create responsive text in div using the fitty.js library.

What is fitty.js?

Fitty.js is a JavaScript-based library used to scale up or scale down text size so that it may fit perfectly into its parent container. It is an ideal way to resize text when we are building a responsive website design. In simple words, it is used to create a responsive text that fits itself in its parent div.

In the following image, the container (dark blue bordered box) has a width of 500px while the actual font size is 32px.

actual text before fitty js
before applying fitty.js

After applying fitty.js, we get the following output:

fitty js output
fitty.js output

This is an example with a fixed width. In case you have container width in percentage, the text will automatically get resized based on device type width.

How to use fitty.js

The fitty.js comes with an npm package and as well as a CDN link.

1. NPM Package

Open the terminal and execute the following command:

npm install fitty --save

2. CDN Installation

The library is available as a CDN link:

<script src=""></script>

Execute fitty.js like the following and pass an element selector.

<div class="container">
	<div><h1 class="responsive-text">W3 Programmings</h1></div>

<!-- include jquery lib -->
<script src="" crossorigin="anonymous"></script>

<!-- include fitty lib -->
<script src=""></script>

It is recommended to include the script just before the closing of </body> element to get the best performance.

The padding issue

A 15px padding is applied to the container. Ideally, the library should handle it but it lacks the feature.

fitty.js padding issue

In order to fix that problem, we have to wrap the element in a parent div element.

Please see the following code example to get more clarity:

The full code

An example of full working code with the padding fix is below:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Respinsive text using fitty.js</title>
    <!-- apply some basic stylings -->
    <style type="text/css">
    	body {
    		font-family: arial;
    		background: #60c0f0;
    	.container {
    		width: 500px;
    		border: 5px solid #3633ce;
    		padding: 15px;
    		margin: 50px auto;
    		background: #fff;
    		border-radius: 15px;
    	h1 {
    		color: #d68a0f;
    		font-size: 32px;
	<!-- wrapper -->
	<div class="container">
		<!-- element wrap inside a div to handle the padding issue -->
		<div><h1 class="responsive-text">W3 Programmings</h1></div>

	<!-- include jquery lib -->
	<script src="" crossorigin="anonymous"></script>

	<!-- include fitty lib -->
	<script src=""></script>

	<!-- call the fitty function -->

The above HTML example is using CDN links.


Following are the options available to configure the fitty method:

minSize16The minimum font size in pixels
maxSize512The maximum font size in pixels
multiLinetrueWrap lines when using the minimum font size.
observeMutationsMutationObserverInitRescale when element contents are altered. Is set to false when MutationObserver is not supported. Pass a custom MutationObserverInit config to optimize monitoring based on your project. By default contains the MutationObserverInit configuration below or false based on browser support.
Reference: Options

An example of passing options to the fitty function is:

fitty('.responsive-text', {
    minSize: 32,
    maxSize: 45,

The fitty function returns single or multiple instances depending on how it is executed.

If you pass a query selector it will return an array of Fitty instances since the query selector targets all matched elements. If you pass a single element reference you’ll receive a single fitty instance.


The fitty also supports the following methods:

fit()Force a redraw of the current fitty element
freeze()No longer update this fitty on changes
unfreeze()Resume updates to this fitty
unsubscribe()Remove the fitty element from the redraw loop and restore it to its original state
Reference: Methods

Their usage is below:

var fitties = fitty('.responsive-text');

// get element reference of first fitty
var myFittyElement = fitties[0].element;

// force refit

// stop updating this fitty and restore to original state


For best performance, add a CSS selector to your stylesheet that sets the elements that will be resized to have white-space:nowrap and display:inline-block. If not, Fitty will detect this and will have to restyle the elements automatically, resulting in a slight performance penalty.

Suppose all elements that you apply fitty to are assigned the fit class name, add the following CSS selector to your stylesheet:

.fit {
    display: inline-block;
    white-space: nowrap;

This will apply the properties on all elements with the CSS class fit.


  • It will not work if the fitty element is not a part of the DOM.
  • If the parent element of fitty element has horizontal padding, the width calculation will become incorrect. You can fix this by wrapping the fitty element in another parent element (already explained and covered in the code example previously).

Click here to learn more about the fitty.js library.

Related Posts