Creating Responsive & Flexible Headings with Fitter Happier Text

Preview:

Description:

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 });

Changelog:

v0.0.7 (03/01/2016)

• Adds support for getBoundingClientRect