Creating Responsive & Flexible Headings with Fitter Happier Text

Category: Javascript , Text | March 1, 2016
Views Total:132 views
Official Page:Go to website
Last Update:March 1, 2016


Creating Responsive & Flexible Headings with Fitter Happier Text


Fitter Happier Text is a lightweight Javascript helps you create responsive, big, and fully flexible headings on your web page. It will automatically and dynamically resize font size for responsive web layout to make your text flexible. When the window’s size changed, the headings will be resized as big as possible to fit within its parent container.

How to use it:

Include the fitter-happier-text.js script into your web page.

<script src="dist/fitter-happier-text.js"></script>

Wrap your headings in a container element with a CSS class of ‘demo’.

<div class="demo">Your heading goes here</div>

Initialization with options.

var nodes = document.querySelectorAll('[data-fitter-happier-text]');
fitterHappierText(nodes, { baseline: 16,paddingY: 2 });


v0.0.7 (03/01/2016)

  • Adds support for getBoundingClientRect

You Might Be Interested In:

Leave a Reply